<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>A K Chauhan's Blog</title>
	<atom:link href="http://www.akchauhan.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.akchauhan.com</link>
	<description>PHP, MySql, JavaScript, JQuery, Prototype, Drupal, HTML, CSS and more...</description>
	<lastBuildDate>Mon, 15 Feb 2010 03:42:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Create Simple Carousel using jQuery</title>
		<link>http://www.akchauhan.com/create-simple-carousel-using-jquery/</link>
		<comments>http://www.akchauhan.com/create-simple-carousel-using-jquery/#comments</comments>
		<pubDate>Mon, 15 Feb 2010 03:42:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Carousel]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=607</guid>
		<description><![CDATA[You can see the working demo here.
Carousel is a way to present content in the form of slideshow  on web page. Here I&#8217;m showing how easily you can create a horizontal carousel using jQuery. You can play with the given code and easily create vertical carousel, circular carousel, auto-scrolling carousel etc.
I&#8217;m using jQuery for [...]]]></description>
			<content:encoded><![CDATA[<div id="attachment_609" class="wp-caption aligncenter" style="width: 671px"><a href="http://www.akchauhan.com/examples/carousel/"  target="_blank"><img src="http://www.akchauhan.com/wp-content/uploads/2010/02/carousel.png" alt="Carousel Image" title="Carousel" width="661" height="163" class="size-full wp-image-609" /></a><p class="wp-caption-text">Carousel</p></div>
<p><strong>You can see the working demo <a href="http://www.akchauhan.com/examples/carousel/" >here</a></strong>.</p>
<p><strong>Carousel </strong>is a way to present content in the form of <strong>slideshow </strong> on web page. Here I&#8217;m showing how easily you can create a horizontal carousel using <strong>jQuery</strong>. You can play with the given code and easily create <strong>vertical carousel, circular carousel, auto-scrolling carousel</strong> etc.</p>
<p>I&#8217;m using jQuery for animation. So, you need jQuery JavaScript library for it. You can download latest jQuery JavaScript library from <a href="http://jquery.com/" onclick="javascript:pageTracker._trackPageview('/outbound/article/jquery.com');">jquery.com</a>.</p>
<h3>So, how it work.</h3>
<p>Your basic structure of HTML for Carousel should be like this:-</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div id=&quot;my_carousel&quot;&gt;
   &lt;ul&gt;
    	&lt;li&gt;some content...&lt;/li&gt;
        &lt;li&gt;some content...&lt;/li&gt;
        &lt;li&gt;some content...&lt;/li&gt;
        &lt;li&gt;some content...&lt;/li&gt;
        &lt;li&gt;some content...&lt;/li&gt;
        &lt;li&gt;some content...&lt;/li&gt;
        .....
    &lt;/ul&gt;
&lt;/div&gt;</pre></div></div>

<h3>What you need to do before applying &#8220;my_carousel&#8221; ID to your Carousel DIV.</h3>
<p>1. Put any HTML content which you want to display in your <strong>LI&#8217;s</strong>.<br />
2. Create <strong>CSS </strong>for your Carousel DIV.<br />
3. You also need two images, or button to scroll your content in left and right direction.<br />
4. Assign &#8220;<strong>btnprev</strong>&#8221; class to your left button or image.<br />
5. Assign &#8220;<strong>btnnext</strong>&#8221; class to your right button or image.<br />
6. Assign &#8220;<strong>my_carousel</strong>&#8221; ID to you Carousel DIV.</p>
<h3>How JavaScript Code work:-</h3>
<p>So, when browser load the page JavaScript look for &#8220;<strong>my_carousel</strong>&#8221; ID in HTML and apply all the require attributes and events to your DIV, UL, and LI.</p>
<h4>Important JavaScript variables and their purpose:-</h4>
<p><strong>step</strong> &#8211; How many LI&#8217;s you want to scroll on click of left and right button.<br />
<strong>current</strong> &#8211; Index or Number of left most visible LI in carousel.<br />
<strong>maximum</strong> &#8211; Total number of LI in carousel.<br />
<strong>visible</strong> &#8211; Number of visible LI&#8217;s.<br />
<strong>speed</strong> &#8211; Animation speed.<br />
<strong>liSize</strong> &#8211; Width of one LI in pixels.<br />
<strong>liSize</strong> &#8211; Width of one LI in pixels.<br />
<strong>carousel_height</strong> &#8211; Carousel DIV height.<br />
<strong>ulSize</strong> &#8211; Width of UL. You can calculate it like this liSize * maximum.<br />
<strong>divSize</strong> &#8211; Width of CArousel DIV. You can calculate it like this liSize * visible.</p>
<h3>Assign require attributes to DIV, UL, and LI.</h3>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #339933;">,</span> divSize<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;height&quot;</span><span style="color: #339933;">,</span> carousel_height<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;visibility&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;visible&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;overflow&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;hidden&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;position&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;relative&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #339933;">,</span> ulSize<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;left&quot;</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span>current <span style="color: #339933;">*</span> liSize<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;position&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;absolute&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Here we changed the <strong>width, height, visibility, overflow, and position</strong> of Carousel DIV. The Carousel DIV <strong>overflow = hidden</strong> property is very important here, through it we are just showing the require(visible) LI&#8217;s which we want to show at a time. We just hide the remaining LI&#8217;s.</p>
<p>We also changes the <strong>width, left and position</strong> of UL.</p>
<h3>Assign Click event to left and right buttons/images</h3>
<h4>Left button/image</h4>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.btnprev'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>current <span style="color: #339933;">-</span> step <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> current <span style="color: #339933;">-</span> step <span style="color: #339933;">&gt;</span> maximum <span style="color: #339933;">-</span> visible<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		current <span style="color: #339933;">=</span> current <span style="color: #339933;">-</span> step<span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>left<span style="color: #339933;">:</span> <span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span>liSize <span style="color: #339933;">*</span> current<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> speed<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>So, we have assigned a click event on previous button. So, we are first checking the index of current LI. If the current LI is the first LI we will not do anything. We will simply return from the function. If the current LI is not the first LI then scroll the content of UL to left hand side by using the<strong> jQuery &#8220;animate&#8221; function</strong>. For more information about animate function <strong><a href="http://api.jquery.com/animate/" onclick="javascript:pageTracker._trackPageview('/outbound/article/api.jquery.com');">click here</a></strong>. And we also changed the current to current left most most visible LI.</p>
<h4>Right button/image</h4>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.btnnext'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>current <span style="color: #339933;">+</span> step <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> current <span style="color: #339933;">+</span> step <span style="color: #339933;">&gt;</span> maximum <span style="color: #339933;">-</span> visible<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
		current <span style="color: #339933;">=</span> current <span style="color: #339933;">+</span> step<span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>left<span style="color: #339933;">:</span> <span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span>liSize <span style="color: #339933;">*</span> current<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> speed<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Similarly we assigned the clicked event on next button and followed the same logic what we used for previous click. We just changed it slightly to check last LI when we click on next button. If the current is last LI we will do nothing.</p>
<h3>Complete JavaScript Code:-</h3>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script language<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript&quot;</span><span style="color: #339933;">&gt;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> step <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> 
		<span style="color: #003366; font-weight: bold;">var</span> current <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> 
		<span style="color: #003366; font-weight: bold;">var</span> maximum <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel ul li'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
		<span style="color: #003366; font-weight: bold;">var</span> visible <span style="color: #339933;">=</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> 
		<span style="color: #003366; font-weight: bold;">var</span> speed <span style="color: #339933;">=</span> <span style="color: #CC0000;">200</span><span style="color: #339933;">;</span> 
		<span style="color: #003366; font-weight: bold;">var</span> liSize <span style="color: #339933;">=</span> <span style="color: #CC0000;">331</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> carousel_height <span style="color: #339933;">=</span> <span style="color: #CC0000;">161</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
		<span style="color: #003366; font-weight: bold;">var</span> ulSize <span style="color: #339933;">=</span> liSize <span style="color: #339933;">*</span> maximum<span style="color: #339933;">;</span>   
		<span style="color: #003366; font-weight: bold;">var</span> divSize <span style="color: #339933;">=</span> liSize <span style="color: #339933;">*</span> visible<span style="color: #339933;">;</span>  
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #339933;">,</span> ulSize<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;left&quot;</span><span style="color: #339933;">,</span> <span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span>current <span style="color: #339933;">*</span> liSize<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;position&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;absolute&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;width&quot;</span><span style="color: #339933;">,</span> divSize<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;height&quot;</span><span style="color: #339933;">,</span> carousel_height<span style="color: #339933;">+</span><span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;visibility&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;visible&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;overflow&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;hidden&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;position&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;relative&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.btnnext'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>current <span style="color: #339933;">+</span> step <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> current <span style="color: #339933;">+</span> step <span style="color: #339933;">&gt;</span> maximum <span style="color: #339933;">-</span> visible<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				current <span style="color: #339933;">=</span> current <span style="color: #339933;">+</span> step<span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>left<span style="color: #339933;">:</span> <span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span>liSize <span style="color: #339933;">*</span> current<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> speed<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.btnprev'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>current <span style="color: #339933;">-</span> step <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">||</span> current <span style="color: #339933;">-</span> step <span style="color: #339933;">&gt;</span> maximum <span style="color: #339933;">-</span> visible<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				current <span style="color: #339933;">=</span> current <span style="color: #339933;">-</span> step<span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#my_carousel ul'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">animate</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>left<span style="color: #339933;">:</span> <span style="color: #339933;">-</span><span style="color: #009900;">&#40;</span>liSize <span style="color: #339933;">*</span> current<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> speed<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/create-simple-carousel-using-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Round Number upto 2 decimal places in JavaScript</title>
		<link>http://www.akchauhan.com/round-number-upto-2-decimal-places-in-javascript/</link>
		<comments>http://www.akchauhan.com/round-number-upto-2-decimal-places-in-javascript/#comments</comments>
		<pubDate>Sat, 16 Jan 2010 22:41:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=598</guid>
		<description><![CDATA[JavaScript&#8217;s Math.round() function doesn&#8217;t provide facility to round off a number up to 2 or more decimal places. So, here I&#8217;m showing a simple JavaScript code using which you can round off numbers up to 2 decimal places. You can change this for more decimal places.

var retailPrice = 9.99;
var percentage = 0.2525; /* 25.25% */
var [...]]]></description>
			<content:encoded><![CDATA[<p>JavaScript&#8217;s <strong>Math.round()</strong> function doesn&#8217;t provide facility to round off a number up to 2 or more decimal places. So, here I&#8217;m showing a simple JavaScript code using which you can round off numbers up to 2 decimal places. You can change this for more decimal places.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> retailPrice <span style="color: #339933;">=</span> <span style="color: #CC0000;">9.99</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> percentage <span style="color: #339933;">=</span> <span style="color: #CC0000;">0.2525</span><span style="color: #339933;">;</span> <span style="color: #009966; font-style: italic;">/* 25.25% */</span>
<span style="color: #003366; font-weight: bold;">var</span> decimalPlace <span style="color: #339933;">=</span> <span style="color: #CC0000;">100</span><span style="color: #339933;">;</span> <span style="color: #009966; font-style: italic;">/* 100 for 2 decimal place. 1000 for 3 decimal place.*/</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> wholeSalePrice <span style="color: #339933;">=</span> Math.<span style="color: #660066;">round</span><span style="color: #009900;">&#40;</span>percentage <span style="color: #339933;">*</span> retailPrice <span style="color: #339933;">*</span> decimalPlace<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> decimalPlace<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>wholeSalePrice<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">/* This will show 2.52 */</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/round-number-upto-2-decimal-places-in-javascript/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Create a TinyURL using PHP and TinyURL API</title>
		<link>http://www.akchauhan.com/create-a-tinyurl-using-php-and-tinyurl-api/</link>
		<comments>http://www.akchauhan.com/create-a-tinyurl-using-php-and-tinyurl-api/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 07:30:18 +0000</pubDate>
		<dc:creator>vivek</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Service]]></category>
		<category><![CDATA[TinyUrl]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=591</guid>
		<description><![CDATA[TinyURL is an awesome service. For those who don&#8217;t know what TinyURL is, TinyURL allows you to convert your long URLs like &#8220;http://www.akchauhan.com/category/jquery/&#8221; to small URLs like &#8220;http://tinyurl.com/yz4c4ba&#8221;. Basically you need such type of service when you are posting your data to some third party web service and there is limit on the number of [...]]]></description>
			<content:encoded><![CDATA[<p><strong>TinyURL </strong>is an awesome service. For those who don&#8217;t know what <strong>TinyURL </strong>is, <strong>TinyURL </strong>allows you to convert your long URLs like <strong>&#8220;http://www.akchauhan.com/category/jquery/&#8221;</strong> to small URLs like <strong>&#8220;http://tinyurl.com/yz4c4ba&#8221;</strong>. Basically you need such type of service when you are posting your data to some third party web service and there is limit on the number of characters you can post like <strong>Twitter</strong>. Twitter only allow 140 characters long Tweet.</p>
<p>Using the PHP and TinyURL API, you can create these tiny URLs.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> get_tiny_url<span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span>  
<span style="color: #009900;">&#123;</span>  
	<span style="color: #000088;">$ch</span> <span style="color: #339933;">=</span> curl_init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
	<span style="color: #000088;">$timeout</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">5</span><span style="color: #339933;">;</span>  
	curl_setopt<span style="color: #009900;">&#40;</span><span style="color: #000088;">$ch</span><span style="color: #339933;">,</span>CURLOPT_URL<span style="color: #339933;">,</span><span style="color: #0000ff;">'http://tinyurl.com/api-create.php?url='</span><span style="color: #339933;">.</span><span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
	curl_setopt<span style="color: #009900;">&#40;</span><span style="color: #000088;">$ch</span><span style="color: #339933;">,</span>CURLOPT_RETURNTRANSFER<span style="color: #339933;">,</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
	curl_setopt<span style="color: #009900;">&#40;</span><span style="color: #000088;">$ch</span><span style="color: #339933;">,</span>CURLOPT_CONNECTTIMEOUT<span style="color: #339933;">,</span><span style="color: #000088;">$timeout</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
	<span style="color: #000088;">$data</span> <span style="color: #339933;">=</span> curl_exec<span style="color: #009900;">&#40;</span><span style="color: #000088;">$ch</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
	curl_close<span style="color: #009900;">&#40;</span><span style="color: #000088;">$ch</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  
&nbsp;
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$data</span><span style="color: #339933;">;</span>  
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//test it out!</span>
<span style="color: #000088;">$new_url</span> <span style="color: #339933;">=</span> get_tiny_url<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'http://www.akchauhan.com/category/jquery/'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//returns http://tinyurl.com/yz4c4ba</span>
<span style="color: #990000;">echo</span> <span style="color: #000088;">$new_url</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/create-a-tinyurl-using-php-and-tinyurl-api/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Create Random Alphanumeric Password in PHP</title>
		<link>http://www.akchauhan.com/create-random-alphanumeric-password-in-php/</link>
		<comments>http://www.akchauhan.com/create-random-alphanumeric-password-in-php/#comments</comments>
		<pubDate>Thu, 12 Nov 2009 08:16:49 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Password]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=585</guid>
		<description><![CDATA[We can use this simple password generation function to create random passwords. The maximum limit of generated password is 36 characters.

&#60;?php
	function gen_password&#40;$size = 8&#41; &#123;
		$size = $size &#62; 36 ? 30 : $size;
		$pool = array_merge&#40;range&#40;0, 9&#41;, range&#40;'A', 'Z'&#41;&#41;;
		$rand_keys = array_rand&#40;$pool, $size&#41;;
&#160;
		$password = '';
&#160;
		foreach &#40;$rand_keys as $key&#41; &#123;
			$password .= $pool&#91;$key&#93;;
		&#125;
&#160;
		return $password;
	&#125;
&#160;
	$password = gen_password&#40;10&#41;;
?&#62;

We can use it [...]]]></description>
			<content:encoded><![CDATA[<p>We can use this simple password generation function to create random passwords. The maximum limit of generated password is 36 characters.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
	<span style="color: #000000; font-weight: bold;">function</span> gen_password<span style="color: #009900;">&#40;</span><span style="color: #000088;">$size</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">8</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$size</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$size</span> <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">36</span> ? <span style="color: #cc66cc;">30</span> <span style="color: #339933;">:</span> <span style="color: #000088;">$size</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$pool</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array_merge</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">range</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">9</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #990000;">range</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'A'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'Z'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$rand_keys</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array_rand</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$pool</span><span style="color: #339933;">,</span> <span style="color: #000088;">$size</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000088;">$password</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$rand_keys</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$key</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$password</span> <span style="color: #339933;">.=</span> <span style="color: #000088;">$pool</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$key</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #b1b100;">return</span> <span style="color: #000088;">$password</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #000088;">$password</span> <span style="color: #339933;">=</span> gen_password<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>We can use it like this.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
	<span style="color: #000088;">$password</span> <span style="color: #339933;">=</span> gen_password<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/create-random-alphanumeric-password-in-php/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>JavaScript List Search using jQuery</title>
		<link>http://www.akchauhan.com/javascript-list-search-using-jquery/</link>
		<comments>http://www.akchauhan.com/javascript-list-search-using-jquery/#comments</comments>
		<pubDate>Thu, 29 Oct 2009 20:58:27 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[listbox]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=574</guid>
		<description><![CDATA[Here in this example we are using jQuery to filter the list of products. We have list of products in UL and LI. We have associated the &#8220;KeyUp&#8221; event on the top search textbox. So when somebody type in the textbox we filter the list on the basis of entered value. 
We are using the [...]]]></description>
			<content:encoded><![CDATA[<p><div id="attachment_575" class="wp-caption aligncenter" style="width: 612px"><a href="http://www.akchauhan.com/examples/example13"  target="_blank"><img src="http://www.akchauhan.com/wp-content/uploads/2009/10/product-search.jpg" alt="List Search using jQuery" title="List Search using jQuery" width="602" height="524" class="size-full wp-image-575" /></a><p class="wp-caption-text">List Search using jQuery</p></div><br />
Here in this example we are using <strong>jQuery </strong>to filter the list of products. We have list of products in UL and LI. We have associated the &#8220;<strong>KeyUp</strong>&#8221; event on the top search textbox. So when somebody type in the textbox we filter the list on the basis of entered value. </p>
<p>We are using the <strong>RegExp </strong>for comparing the string for matching characters. First we created the regular expression &#8220;<strong>rg</strong>&#8221; from the given text and compare the product name (string) with the help of <strong>search </strong>function.</p>
<p><strong>The search function return the position of string where match is found or &#8216;-1&#8242; in case of no match.</strong></p>
<p>So, we selected all the <strong>LI&#8217;s</strong> exist inside the &#8216;<strong>product_list</strong>&#8216; <strong>ID</strong> and match each product name one by one. We hide the LI if its text not match the current search text and display the LIs with matching text. </p>
<p><strong>HTML Code: -</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span> xmlns<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.w3.org/1999/xhtml&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/html; charset=utf-8&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Sales Vu<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;pm-common-new.css&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #808080; font-style: italic;">&lt;!--[if IE]&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;ie.css&quot; type=&quot;text/css&quot; media=&quot;screen, projection&quot;&gt;&lt;![endif]--&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;padding-left:20px;&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;top-bar&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;top-left-corner&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/top-left-corner.png&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;top-mid-bg&quot;</span>&gt;</span>Product Management<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;top-right-corner&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/top-right-corner.png&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;body-part&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;body-part-top&quot;</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search-container&quot;</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search-box&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;float:left; width:257px;&quot;</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;float: left; width: 70px; padding-top: 4px; font-weight: bold;&quot;</span>&gt;</span>Search<span style="color: #ddbb00;">&amp;nbsp;</span><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span> 
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text-field-box&quot;</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span>  <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search&quot;</span> autocomplete<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;off&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search-box-bg&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text-field-cancel-button&quot;</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;javascript:void(0);&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search_clear&quot;</span> &gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/search-box-cancel.png&quot;</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search_clear&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;modifier-product&quot;</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;modifier-product-right&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;float:left;&quot;</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;modifier-product-right-top&quot;</span>&gt;</span>
                    Product
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;modifier-product-right-mid&quot;</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;modifier-product-right-detail&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product_list&quot;</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;modifier-product-right-detail-heading&quot;</span>&gt;</span>
                            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product-list-heading&quot;</span>&gt;</span>Product<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price-list-heading&quot;</span>&gt;</span>Price ($)<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product-list&quot;</span>&gt;</span>
                            <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
                            	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Banana Split<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>3.00<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Bird Lite<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>2.45<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Butter<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>2.00<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Chicken With Coke<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>3.45<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Chips With Coke<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>3.75<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Corono Lite<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>2.00<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Eggs<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>0.50<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Limca<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>1.05<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>Sprite<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>1.20<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;product&quot;</span>&gt;</span>test product<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;price&quot;</span>&gt;</span>3.00<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
                            <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
                        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
                <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;modifier-product-right-bottom&quot;</span>&gt;</span>
                    <span style="color: #ddbb00;">&amp;nbsp;</span>
                <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;body-part-bottom&quot;</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/body-bottom.png&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jquery.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;pm_new.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></div></div>

<p><strong>JavaScript Code: -</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// JavaScript Document</span>
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">keyup</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> search_text <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #003366; font-weight: bold;">var</span> rg <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> RegExp<span style="color: #009900;">&#40;</span>search_text<span style="color: #339933;">,</span><span style="color: #3366CC;">'i'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#product_list .product-list .product'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 			<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>$.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">search</span><span style="color: #009900;">&#40;</span>rg<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'none'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'none'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'none'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'none'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>	
			<span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search_clear'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#search'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#product_list .product-list .product'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">parent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">next</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'display'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/javascript-list-search-using-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Create Windows Service to Schedule PHP Script execution</title>
		<link>http://www.akchauhan.com/create-windows-service-to-schedule-php-script-execution/</link>
		<comments>http://www.akchauhan.com/create-windows-service-to-schedule-php-script-execution/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 15:02:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[C#]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web Service]]></category>
		<category><![CDATA[Job Schedule]]></category>
		<category><![CDATA[Windows Service]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=560</guid>
		<description><![CDATA[If you want to schedule your PHP script or any other command on Windows Platform recursively after a fix interval of time then you can create a Windows Service for it. Windows service is very easy to create in Visual Studio.Net. I&#8217;m using C# language for this scheduler service you can also use VB.net for [...]]]></description>
			<content:encoded><![CDATA[<p>If you want to schedule your PHP script or any other command on <strong>Windows Platform</strong> recursively after a fix interval of time then you can create a <strong>Windows Service</strong> for it. Windows service is very easy to create in Visual Studio.Net. I&#8217;m using <strong>C#</strong> language for this scheduler service you can also use <strong>VB.net</strong> for it. Basically we need this type of service if we want to execute some PHP script in background in a specific interval of time. For example, If you want to import data in bulk from some web service.</p>
<p>You need to follow these steps: -</p>
<ul>
<li>
Create a project by using the Windows Service application template. This template creates a class for you that inherits from ServiceBase and writes much of the basic service code, such as the code to start the service.</li>
<li>
Write the code for the OnStart and OnStop procedures, and override any other methods that you want to redefine.
</li>
<li>
Add the necessary installers for your service application. By default, a class that contains two or more installers is added to your application when you click the Add Installer link: one to install the process, and one for each associated service that your project contains.
</li>
<li>
Build your project.
</li>
<li>
Create a setup project to install your service, and then install it.
</li>
<li>
Access the Windows 2000 Services Control Manager and start your service.
</li>
</ul>
<p>For more detail check &#8220;<strong>Walkthrough: Creating a Windows Service Application in the Component Designer</strong>&#8221; topic in <strong>MSDN</strong>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">using <span style="color: #990000;">System</span><span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Collections<span style="color: #339933;">.</span>Generic<span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>ComponentModel<span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Data<span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Diagnostics<span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Linq<span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>ServiceProcess<span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Text<span style="color: #339933;">;</span>
using <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Timers<span style="color: #339933;">;</span>
&nbsp;
namespace MyNewService
<span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">public</span> partial <span style="color: #000000; font-weight: bold;">class</span> MyNewService <span style="color: #339933;">:</span> ServiceBase
    <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">private</span> Timer syncTimer <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">null</span><span style="color: #339933;">;</span>  
&nbsp;
        <span style="color: #000000; font-weight: bold;">public</span> MyNewService<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            InitializeComponent<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        protected override void OnStart<span style="color: #009900;">&#40;</span>string<span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> args<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            syncTimer <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Timer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            this<span style="color: #339933;">.</span>syncTimer<span style="color: #339933;">.</span>Interval <span style="color: #339933;">=</span> <span style="color: #cc66cc;">180000</span><span style="color: #339933;">;</span>
            this<span style="color: #339933;">.</span>syncTimer<span style="color: #339933;">.</span>Elapsed <span style="color: #339933;">+=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Timers<span style="color: #339933;">.</span>ElapsedEventHandler<span style="color: #009900;">&#40;</span>this<span style="color: #339933;">.</span>syncTimer_Tick<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            syncTimer<span style="color: #339933;">.</span>Enabled <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">true</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        protected override void OnStop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            syncTimer<span style="color: #339933;">.</span>Enabled <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">false</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000000; font-weight: bold;">private</span> void syncTimer_Tick<span style="color: #009900;">&#40;</span>object sender<span style="color: #339933;">,</span> EventArgs e<span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            <span style="color: #990000;">System</span><span style="color: #339933;">.</span>Diagnostics<span style="color: #339933;">.</span>Process<span style="color: #339933;">.</span>Start<span style="color: #009900;">&#40;</span><span style="color: #339933;">@</span><span style="color: #0000ff;">&quot;C:<span style="color: #660099; font-weight: bold;">\xa</span>mpp\htdocs<span style="color: #000099; font-weight: bold;">\t</span>ask.bat&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>  
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>The <strong>task.bat</strong> file is a batch file. We are executing our PHP script through this batch file. First we set the path of directory where php.exe is located in your windows. The <strong>import.php</strong> is basically importing data in bulk from some web and we need to execute this script file background in every 3 minutes.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">@</span><span style="color: #990000;">echo</span> off
cd\
set path<span style="color: #339933;">=</span>C<span style="color: #339933;">:</span>\xampp\php<span style="color: #339933;">;</span>
cd <span style="color: #0000ff;">&quot;C:<span style="color: #660099; font-weight: bold;">\xa</span>mpp\htdocs&quot;</span>
php import<span style="color: #339933;">.</span>php
<span style="color: #990000;">exit</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/create-windows-service-to-schedule-php-script-execution/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>How use cURL library when running PHP through Command Line</title>
		<link>http://www.akchauhan.com/how-use-curl-library-when-running-php-through-command-line/</link>
		<comments>http://www.akchauhan.com/how-use-curl-library-when-running-php-through-command-line/#comments</comments>
		<pubDate>Wed, 16 Sep 2009 23:40:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[curl]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=551</guid>
		<description><![CDATA[If you run any PHP code which using cURL extension through command line like this:

c:\&#62;php somefile.php

 it might give error that &#8220;curl_init()&#8221; function is not defined. The reason is the cURL extension &#8220;php_curl.dll&#8221; is not loaded. So, to resolve this issue you can load cURL (or any extension) dynamically in your PHP code. The &#8220;dl()&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>If you run any <strong>PHP code</strong> which using <strong>cURL extension</strong> through command line like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">c<span style="color: #339933;">:</span>\<span style="color: #339933;">&gt;</span>php somefile<span style="color: #339933;">.</span>php</pre></div></div>

<p> it might give error that &#8220;<strong>curl_init()</strong>&#8221; function is not defined. The reason is the cURL extension &#8220;<strong>php_curl.dll</strong>&#8221; is not loaded. So, to resolve this issue you can load cURL (or any extension) dynamically in your PHP code. The &#8220;<strong>dl()</strong>&#8221; basically load PHP extension at <strong>runtime</strong>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #990000;">dl</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;php_curl.dll&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">...</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/how-use-curl-library-when-running-php-through-command-line/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create Virtual Hosts and run multiple websites on Amazon server</title>
		<link>http://www.akchauhan.com/create-virtual-hosts-and-run-multiple-websites-on-amazon-server/</link>
		<comments>http://www.akchauhan.com/create-virtual-hosts-and-run-multiple-websites-on-amazon-server/#comments</comments>
		<pubDate>Sun, 30 Aug 2009 07:42:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Apache]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Amazon]]></category>
		<category><![CDATA[Vistual Host]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=525</guid>
		<description><![CDATA[You can create virtual hosts on any Linux or window platform if you are using Apache web server. Virtual hosts or v-hosts is basically Apache feature. I&#8217;m considering here Amazon server running with Apache version 2 or above. So, basically for creating v-hosts you need to modify Apache&#8217;s configuration (httpd.conf) file. You need the root [...]]]></description>
			<content:encoded><![CDATA[<p>You can create <strong>virtual hosts</strong> on any Linux or window platform if you are using <strong>Apache web server</strong>. Virtual hosts or v-hosts is basically Apache feature. I&#8217;m considering here Amazon server running with Apache version 2 or above. So, basically for creating v-hosts you need to modify Apache&#8217;s configuration (<strong>httpd.conf</strong>) file. You need the root access for all this modifications. Here I&#8217;m showing how we create the &#8220;<strong>name-based virtual hosting</strong>&#8220;. This is the easiest way of creating virtual host.<br />
On Amazon server httpd.conf is located on &#8216;<strong>/etc/httpd/conf/httpd.conf</strong>&#8216; location. You need to follow these steps:-<br/><br />
<strong>1. First, take the backup of this file so in case if anything goes wrong you can rollback changes.</strong><br />
<strong>2. Download this file in your local machine and open it in any text editor.</strong><br />
<strong>3. Go to section 3 (Virtual Hosts)  of this document.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">### Section 3: Virtual Hosts</pre></div></div>

<p><strong>4. Un-comment this line</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">NameVirtualHost *:80</pre></div></div>

<p><strong>5. Now create v-hosts like this</strong></p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;VirtualHost *:<span style="color: #cc66cc;">80</span>&gt;</span>
    ServerAdmin admin@mydomain1.com
    DocumentRoot /var/www/html/domainname1
    ServerName www.domainname1.com
    ErrorLog logs/www.domainname1.com-error_log
    CustomLog logs/www.domainname1.com-access_log common
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>VirtualHost&gt;</span>
<span style="color: #009900;">&lt;VirtualHost *:<span style="color: #cc66cc;">80</span>&gt;</span>
    ServerAdmin admin@mydomain2.com
    DocumentRoot /var/www/html/domainname2
    ServerName www.domainname2.com
    ErrorLog logs/www.domainname2.com-error_log
    CustomLog logs/www.domainname2.com-access_log common
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>VirtualHost&gt;</span></pre></div></div>

<p>Here we have create two virtual host one <strong>www.domainname1.com</strong> and second one <strong>www.domainname2.com</strong>. <strong>We have specified 5 Apache directive into a VirtualHost container.</strong> We can put almost any Apache directive into a VirtualHost container. Let&#8217;s discuss each one by one.<br/><br />
<strong>ServerAdmin</strong> &#8211; Here we specified email address of server administrator. If there is any issue Apache show this email address for contact.<br />
<strong>DocumentRoot </strong> &#8211; Here we give the absolute path of directory where our website files are located.<br />
<strong>ServerName </strong> &#8211; Here we give the name of our domain which is pointed to &#8220;/var/www/html/domainname1&#8243; directory.<br />
<strong>ErrorLog</strong> &#8211; Absolute path of Error log file for this domain.<br />
<strong>CustomLog</strong> &#8211; Absolute path of custom log file for this domain.<br/></p>
<p><strong>6. Restart the Apache web server to apply these changes.</strong><br />
You can restart your Apache server using Terminal or Putty on Windows.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">service httpd restart</pre></div></div>

<p><strong>Note:-</strong> One more thing which you need to do is you need to point both the domains &#8220;www.domainname1.com&#8221; and &#8220;www.domainname2.com&#8221; to the IP address of the Amazon server. </p>
<p>The Apache server it self find out the domain name form <strong>request header</strong> and point the incoming request to correct &#8220;<strong>DocumentRoot</strong>&#8221; directory.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/create-virtual-hosts-and-run-multiple-websites-on-amazon-server/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Initialize LightBox using JSON string and Run it from Flash</title>
		<link>http://www.akchauhan.com/initialize-lightbox-using-json-string-and-run-it-from-flash/</link>
		<comments>http://www.akchauhan.com/initialize-lightbox-using-json-string-and-run-it-from-flash/#comments</comments>
		<pubDate>Tue, 25 Aug 2009 06:19:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[LightBox]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=491</guid>
		<description><![CDATA[Lightbox is the most popular way of showing large image on click on thumbnail over the web. Lot of websites are using the LightBox. Normally, We use lightbox using the &#8220;rel&#8221; attribute of anchor tag. We use lightbox this way:-

&#60;a href=&#34;images/image-1.jpg&#34; rel=&#34;lightbox&#34; title=&#34;thumb&#34;&#62;&#60;img src=&#34;images/thumb-1.jpg&#34; width=&#34;100&#34; height=&#34;40&#34; alt=&#34;&#34; /&#62;&#60;/a&#62;

Here, we provided the &#8220;rel&#8221; attribute as &#8220;lightbox&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>Lightbox is the most popular way of showing large image on click on thumbnail over the web. Lot of websites are using the LightBox. Normally, We use lightbox using the<strong> &#8220;rel&#8221; </strong>attribute of anchor tag. We use lightbox this way:-</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/image-1.jpg&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;lightbox&quot;</span> <span style="color: #000066;">title</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;thumb&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/thumb-1.jpg&quot;</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;100&quot;</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;40&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<p>Here, we provided the <strong>&#8220;rel&#8221;</strong> attribute as <strong>&#8220;lightbox&#8221;</strong> in hyperlink. What lightbox script do is when page load completed its check all the hyperlinks of page and if <strong>rel=&#8221;lightbox&#8221;</strong> is exists them it push this link into an array.<br />
Lightbox extract the <strong>&#8220;href&#8221;</strong> and <strong>&#8220;title&#8221;</strong> attributes of each link having <strong>rel=&#8221;lightbox&#8221;</strong> and push all of them into array. <strong>&#8220;href&#8221;</strong> is normally the URL of larger image. Lingtbox also add <strong>&#8220;click&#8221;</strong> event on all of these hyperlinks and when user click on any particular thumbnail the lightbox starts.</p>
<p>Here, I&#8217;m showing a way in which you can initialize the lightbox by using the <strong>JSON</strong> string. Basically, this JSON string contains the <strong>&#8220;href&#8221;</strong> and <strong>&#8220;title&#8221;</strong> information which we want to show. We can create this string dynamically using any server side scripting language. Here is one of sample JSON string.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script language<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript&quot;</span><span style="color: #339933;">&gt;</span>
	<span style="color: #003366; font-weight: bold;">var</span> img_json <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'pics/photo-80.jpg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Title 01'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'pics/photo-128.jpg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Title 02'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'pics/photo-160.jpg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Title 03'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'pics/photo-165.jpg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Title 04'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'pics/photo-205.jpg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Title 05'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'pics/photo-206.jpg'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Title 06'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

<p>You can learn more about JSON <a href="http://www.json.org/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.json.org');" target="_blank">here</a>.</p>
<p>We also need to do some small changes in lightbox javascript file so it use our JSON string for image array instead of create array by checking the <strong>&#8220;rel&#8221; </strong>attribute in whole page. <br/><br/><strong>You can download the customized lightbox javascript file from <a href="http://www.akchauhan.com/downloads/example12.rar" >here</a>.</strong><br/><br />
<strong>You can see the working demo <a href="http://www.akchauhan.com/examples/example12/"  tagret="_blank">here</a>.</strong><br/><br/></p>
<p><strong>1. Remove the &#8220;imageLink&#8221; parameter from start function because now we not starting LightBox by not clicking any thumbnail.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">start<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>imageLink<span style="color: #009900;">&#41;</span></pre></div></div>

<p>function to</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">start<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p><strong>2. Now we are initializing the &#8220;imageArray&#8221; using JSON string.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">imageArray</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span></pre></div></div>

<p> to</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">imageArray</span> <span style="color: #339933;">=</span> img_json<span style="color: #339933;">;</span></pre></div></div>

<p><strong>3. Comment these line of code inside start function bacause we not want to check whole page links for lightbox.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*if ((imageLink.rel == 'lightbox')){
           // if image is NOT part of a set, add single image to imageArray
           this.imageArray.push([imageLink.href, imageLink.title]);         
  } else {
            // if image is part of a set..
            this.imageArray = 
                $$(imageLink.tagName + '[href][rel=&quot;' + imageLink.rel + '&quot;]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();
&nbsp;
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
  }*/</span></pre></div></div>

<p><strong>4. Add function startLightBox() at the end of Lightbox class. This function start the lightbox when we click on the link having id=&#8221;start&#8221;.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">startLightBox<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> th <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
	Event.<span style="color: #660066;">observe</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'start'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	 	th.<span style="color: #660066;">start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p><strong>5. Add this line in initialize() function to call &#8220;startLightBox()&#8221; function which create the click event on link having id=&#8221;start&#8221;.</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">startLightBox</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>After completing all the five changes in lightbox.js you need to create a link with<strong> id = &#8220;start&#8221;</strong> in your HTML file. When you click on this link its starts the LightBox. Here is the code for HTML file.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Content-Type&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/html; charset=utf-8&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>Initialize LightBox using JSON string and Run it from Flash<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;css/lightbox.css&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span> <span style="color: #000066;">media</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;screen&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/prototype.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/scriptaculous.js?load=effects,builder&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;js/lightbox.js&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;start&quot;</span>&gt;</span>Start LightBox<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;javascript&quot;</span>&gt;</span>
	var img_json = [['pics/photo-80.jpg', 'Title 01'],['pics/photo-128.jpg', 'Title 02'],['pics/photo-160.jpg', 'Title 03'],['pics/photo-165.jpg', 'Title 04'],['pics/photo-205.jpg', 'Title 05'],['pics/photo-206.jpg', 'Title 06']];
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/initialize-lightbox-using-json-string-and-run-it-from-flash/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Create Web Services using AMFPHP and XML-RPC</title>
		<link>http://www.akchauhan.com/create-web-services-using-amfphp-and-xml-rpc/</link>
		<comments>http://www.akchauhan.com/create-web-services-using-amfphp-and-xml-rpc/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 14:23:52 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Web Service]]></category>
		<category><![CDATA[AMFPHP]]></category>
		<category><![CDATA[XMLRPC]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=485</guid>
		<description><![CDATA[Here I&#8217;m going to demonstrate how we can create web services using AMFPHP and access them using XML-RPC. First, let&#8217;s understand some important terms:-
AMFPHP:  AMFPHP is a free open-source PHP implementation of the Action Message Format(AMF). AMF allows for binary serialization of Action Script (AS2, AS3) native types and objects to be sent to [...]]]></description>
			<content:encoded><![CDATA[<p>Here I&#8217;m going to demonstrate how we can create web services using AMFPHP and access them using XML-RPC. First, let&#8217;s understand some important terms:-</br></p>
<p><strong>AMFPHP: </strong> AMFPHP is a free open-source PHP implementation of the Action Message Format(AMF). AMF allows for binary serialization of Action Script (AS2, AS3) native types and objects to be sent to server side services. You can learn more about AMFPHP from its official website <a href="http://www.amfphp.org" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.amfphp.org');">www.amfphp.org</a>.</br></br></p>
<p><strong>XML-RPC: </strong>It&#8217;s a specification and a set of implementations that allow software running on disparate operating systems, running in different environments to make procedure calls over the Internet. You can learn more about AMFPHP from its official website <a href="http://www.xmlrpc.com/" onclick="javascript:pageTracker._trackPageview('/outbound/article/www.xmlrpc.com');">www.xmlrpc.com</a>.</br></br></p>
<p>So, here we are creating web services for FLEX or FLASH which we can directly call using the XML-RPC because AMFPHP already included the batteries for XML-RPC and JSON. We don&#8217;t need to do any thing special for accessing same services using XML-RPC.</br></br></p>
<p>First, we need to download AMFPHP. You can download the latest version of from <a href="http://sourceforge.net/projects/amfphp/files/#files" onclick="javascript:pageTracker._trackPageview('/outbound/article/sourceforge.net');">here</a>.</br> Unzip the files and place them into your htdocs directory. You can visit <strong>http://localhost/amfphp/gateway.php</strong> URL in your local to check the AMFPHP is properly installed or not.</p>
<p><strong>1. How to create web service using AMFPHP</strong><br />
In AMFPHP, all files related to web services should be places inside <strong>&#8220;amfphp\services&#8221;</strong> directory. I&#8217;m considering here an example of &#8220;Order&#8221; Web Service to make understand it easily.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #009933; font-style: italic;">/**
 * This class provide methods for handling orders received through web
 */</span>
<span style="color: #000000; font-weight: bold;">class</span> WebOrders <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">function</span> _getStoreInfo<span style="color: #009900;">&#40;</span><span style="color: #000088;">$storeid</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$query_id</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_query</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;SELECT * FROM store WHERE storeid = '<span style="color: #006699; font-weight: bold;">$storeid</span>' AND status = 1&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">mysql_num_rows</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$query_id</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #000000; font-weight: bold;">false</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #b1b100;">return</span> <span style="color: #990000;">mysql_fetch_object</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$query_id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #009933; font-style: italic;">/**
     * Method to receive new order from web.
     * @returns order request id. In case of error return error message.
     */</span>
    <span style="color: #000000; font-weight: bold;">function</span> receiveNewOrder<span style="color: #009900;">&#40;</span><span style="color: #000088;">$order</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #000088;">$store_info</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span>_getStoreInfo<span style="color: #009900;">&#40;</span><span style="color: #000088;">$order</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'storeid'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000088;">$store_info</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #b1b100;">return</span> <span style="color: #0000ff;">'Invalid store ID.'</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #000088;">$sql</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;SELECT MAX(fld_order_id) AS fld_order_id FROM tbl_order&quot;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000088;">$query_id</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_query</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$sql</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000088;">$obj</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_fetch_object</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$query_id</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000088;">$next_fld_order_id</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #990000;">is_null</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$obj</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">fld_order_id</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$next_fld_order_id</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$obj</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">fld_order_id</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #000088;">$sql</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;INSERT INTO tbl_order(fld_order_id, fld_total, fld_tax, fld_customer_name, fld_phone, fld_address, 
				fld_email_id, fld_del_status, fld_comment_cust, fld_order_status, fld_request_time, fld_lastupdated)
				VALUES('<span style="color: #006699; font-weight: bold;">$next_fld_order_id</span>', '<span style="color: #006699; font-weight: bold;">{$order['total']}</span>', '<span style="color: #006699; font-weight: bold;">{$order['tax']}</span>', '<span style="color: #006699; font-weight: bold;">{$order['customer_name']}</span>', '<span style="color: #006699; font-weight: bold;">{$order['phone']}</span>', 
				'<span style="color: #006699; font-weight: bold;">{$order['address']}</span>', '<span style="color: #006699; font-weight: bold;">{$order['email']}</span>', '<span style="color: #006699; font-weight: bold;">{$order['delivery']}</span>', '<span style="color: #006699; font-weight: bold;">{$order['note']}</span>', '1', NOW(), NOW())&quot;</span><span style="color: #339933;">;</span>
		<span style="color: #000088;">$query_id</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_query</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$sql</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$order</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'products'</span><span style="color: #009900;">&#93;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$product</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			<span style="color: #000088;">$sql</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;INSERT INTO tbl_order_detail(fld_order_id, fld_pid, fld_qty, fld_uid, fld_price, fld_lastupdated)
					VALUES('<span style="color: #006699; font-weight: bold;">$next_fld_order_id</span>', '<span style="color: #006699; font-weight: bold;">{$product['productid']}</span>', '<span style="color: #006699; font-weight: bold;">{$product['qty']}</span>', '<span style="color: #006699; font-weight: bold;">{$product['unit']}</span>', 
					'<span style="color: #006699; font-weight: bold;">{$product['price']}</span>', NOW())&quot;</span><span style="color: #339933;">;</span>
			<span style="color: #000088;">$query_id</span> <span style="color: #339933;">=</span> <span style="color: #990000;">mysql_query</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$sql</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #b1b100;">return</span> <span style="color: #000088;">$next_fld_order_id</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>	
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Here we have created a class <strong>&#8220;WebOrders&#8221;</strong>. It&#8217;s having two methods <strong>&#8220;_getStoreInfo&#8221;</strong> and <strong>&#8220;receiveNewOrder&#8221;</strong>. <strong>&#8220;_getStoreInfo&#8221;</strong> is the private method (We can create private method by prefixing &#8216;_&#8217; before function name). Its means no one can access this method of dervice. <strong>&#8220;receiveNewOrder&#8221;</strong> method is for receiving the new order request. Its taking <strong>&#8220;$order&#8221;</strong> associative array as paramater and return the new order ID.</p>
<p><strong>2. Access it using XML-RPC</strong><br />
We have create a web Service, now we need to access ir using XML-RPC. We need a XML-RPC library for calling the web service. I&#8217;m using this one <strong><a href="http://phpxmlrpc.sourceforge.net/#download" onclick="javascript:pageTracker._trackPageview('/outbound/article/phpxmlrpc.sourceforge.net');">http://phpxmlrpc.sourceforge.net/#download</a></strong>. You can call the web service like this:-</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
  	<span style="color: #b1b100;">require_once</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'lib/xmlrpc.inc'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  	<span style="color: #000088;">$xmlrpc_client</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> xmlrpc_client<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/amfphp/xmlrpc.php&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'localhost'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">80</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  	<span style="color: #000088;">$xmlrpc_client</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">setDebug</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//this will print all the responses as they come back</span>
&nbsp;
  	<span style="color: #000088;">$order</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> stdClass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  	<span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">storeid</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">total</span> <span style="color: #339933;">=</span> <span style="color:#800080;">100.50</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">tax</span> <span style="color: #339933;">=</span> <span style="color:#800080;">10.50</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">customer_name</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'Anil Chauhan'</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">email</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'meetanilchauhan@varshyl.com'</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">phone</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'9810713123'</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">address</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'24 - Laxmi Nagar, Delhi'</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">delivery</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'1'</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">note</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'Test Note'</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000088;">$order</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">products</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'productid'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">25</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'qty'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'unit'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'2'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'price'</span> <span style="color: #339933;">=&gt;</span> <span style="color:#800080;">30.00</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  	<span style="color: #000088;">$order</span> <span style="color: #339933;">=</span> php_xmlrpc_encode<span style="color: #009900;">&#40;</span><span style="color: #000088;">$order</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  	<span style="color: #000088;">$xmlrpc_message</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> xmlrpcmsg<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;WebOrders.receiveNewOrder&quot;</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$order</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  	<span style="color: #000088;">$xmlrpc_response</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$xmlrpc_client</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">send</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$xmlrpc_message</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  	<span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$xmlrpc_response</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">faultCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  		<span style="color: #990000;">echo</span> <span style="color: #000088;">$xmlrpc_response</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">faultString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  	<span style="color: #009900;">&#125;</span><span style="color: #b1b100;">else</span><span style="color: #009900;">&#123;</span>
  		<span style="color: #990000;">echo</span> <span style="color: #0000ff;">&quot;Pingback successful&quot;</span><span style="color: #339933;">;</span>
  	<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Here, first we have included the <strong>&#8220;xmlrpc.inc&#8221;</strong> lilbrary. Then we have created the object of <strong>xmlrpc_client</strong>. We have also enabled the debug option using &#8220;$xmlrpc_client->setDebug(1);&#8221;. Make sure you switch off the debugging option on your production server.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/create-web-services-using-amfphp-and-xml-rpc/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
