<?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>J&#039;bloo</title>
	<atom:link href="http://jbloo.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://jbloo.com</link>
	<description>- Free Ajax tutorials, PHP tutorials, JQuery tutorials, ASP.net tutorials By Kunal Kamble</description>
	<lastBuildDate>Thu, 17 Dec 2009 20:18:50 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>15+ Useful PHP + jQuery Components for Every Project</title>
		<link>http://jbloo.com/2009/12/15-useful-php-jquery-components-for-every-project/</link>
		<comments>http://jbloo.com/2009/12/15-useful-php-jquery-components-for-every-project/#comments</comments>
		<pubDate>Thu, 17 Dec 2009 20:18:50 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[only JQuery tutorial]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=332</guid>
		<description><![CDATA[1. Directory Trees With PHP And jQuery
A easy way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for. In this tutorial, you will be taught how to make a directory tree using PHP and [...]]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">1. Directory Trees With PHP And jQuery</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">A easy way to keep track of many files is to use a directory tree. A directory tree lists out files and directories so that it’s easy to find what you’re looking for. In this tutorial, you will be taught how to make a directory tree using PHP and jQuery.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.lateralcode.com/directory-trees-with-php-and-jquery/'); window.location=" href="http://www.lateralcode.com/directory-trees-with-php-and-jquery/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components1" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components1.jpg" alt="php-jquery-components1" width="500" height="200" /></a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">2. Create a Photo Admin Site Using PHP and jQuery</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">A sciences tutorial for creating a photo site using PHP, jQuery, and AJAX. You will be taught how to repossess images from a database, create a straightforward login form with substantiation, and then allow for the database to be asynchronously updated.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://net.tutsplus.com/videos/screencasts/create-a-photo-admin-site-using-php-and-jquery/'); window.location=" href="http://net.tutsplus.com/videos/screencasts/create-a-photo-admin-site-using-php-and-jquery/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components2" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components2.jpg" alt="php-jquery-components2" width="500" height="185" /></a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">3. Asynchronous Comments with PHP, jQuery, and JSON</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">In this article, be taught how to create a uncomplicated but effectual means of capturing and displaying visitor explanation using a merge of jQuery, PHP and JSON. In the public forum that is the blogosphere, the aptitude to incarcerate and display visitor comments on your blogs can give you immediate feedback and opinions from the people that substance most – those that read your blog.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://net.tutsplus.com/tutorials/php/asynchronous-comments-with-jquery-and-json/'); window.location=" href="http://net.tutsplus.com/tutorials/php/asynchronous-comments-with-jquery-and-json/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components3" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components3.jpg" alt="php-jquery-components3" width="500" height="185" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.danwellman.co.uk/comments.html'); window.location=" href="http://www.danwellman.co.uk/comments.html">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">4. PHP ajax login form using Jquery</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">Create a new PHP ajax login functionality by Jquery. You can easily switch the data basis flanked by database and PHP array, login substantiation can be using username or email, or even both of ‘em by changing the config, automatic redirection could be done within the javascript config.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.chazzuka.com/blog/?p=82'); window.location=" href="http://www.chazzuka.com/blog/?p=82" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components41" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components41.jpg" alt="php-jquery-components41" width="500" height="230" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.chazzuka.com/experiments/php-ajax-login/'); window.location=" href="http://www.chazzuka.com/experiments/php-ajax-login/">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">5. PHP + jQuery Todo List Part 1, part2</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">This is part 1 of a 2 part succession on making a To-do List with PHP and ornamental it with jQuery’s AJAX and handling capabilities.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://query7.com/php-jquery-todo-list-part-1/'); window.location=" href="http://query7.com/php-jquery-todo-list-part-1/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components5" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components5.jpg" alt="php-jquery-components5" width="500" height="230" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://lastkarrde.com/q7todo/'); window.location=" href="http://lastkarrde.com/q7todo/">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">6. Newsletter module</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">A PHP, jQuery and AJAX module, which should be great for any newsletter management needs. You just need to copy one file onto your site, and you’re prepared to send and archive all newsletters, supervise e-mail addresses and categories, and configure a template for your e-mails. Also have an aptitude of optional password protection. All options can be easily configured at the top of incorporated .php file.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://virae.org/newsletter_module/'); window.location=" href="http://virae.org/newsletter_module/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components6" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components6.jpg" alt="php-jquery-components6" width="500" height="310" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://virae.org/newsletter_module/'); window.location=" href="http://virae.org/newsletter_module/">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">7. From PHP to XML to jQuery and Ajax</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">This tutorial will focus on receiving data from a database by PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems multifaceted, but is in fact, very easy.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.reynoldsftw.com/2009/03/tutorial-from-php-to-xml-to-jquery-and-ajax/'); window.location=" href="http://www.reynoldsftw.com/2009/03/tutorial-from-php-to-xml-to-jquery-and-ajax/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components7" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components7.jpg" alt="php-jquery-components7" width="500" height="145" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://demos.reynoldsftw.com/php-xml-jquery-ajax/theHTML.html'); window.location=" href="http://demos.reynoldsftw.com/php-xml-jquery-ajax/theHTML.html">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">8. How to Validate Forms in both sides using PHP and jQuery</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">We are going to learn how to validate your forms using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/'); window.location=" href="http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php-jquery/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components8" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components8.jpg" alt="php-jquery-components8" width="500" height="300" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yensdesign.com/tutorials/validateform/'); window.location=" href="http://yensdesign.com/tutorials/validateform/">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">9. Create a shoutbox using PHP and AJAX</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">We will learn how to create a dynamic ajax based shoutbox with jQuery from scratch. It will be very interesting to know how to use the ajax function of jQuery and how it can be used to insert and recover data from a MySQL database via PHP in a way asynchronous.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yensdesign.com/2009/01/create-a-shoutbox-using-php-and-ajax-jquery/'); window.location=" href="http://yensdesign.com/2009/01/create-a-shoutbox-using-php-and-ajax-jquery/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components9" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components9.jpg" alt="php-jquery-components9" width="500" height="200" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.yensdesign.com/tutorials/shoutbox'); window.location=" href="http://www.yensdesign.com/tutorials/shoutbox">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">10. HOWTO: PHP and jQuery upload progress bar</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">With the controllable jQuery Progress Bar, writing a form upload advancement bar seems like a piece of cake now. Theoretically, all we need is to create the bar, poll for the progress of the file upload, drive the new progress bar value (in percentage) and set it using PHP.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://t.wits.sg/2008/06/25/howto-php-and-jquery-upload-progress-bar/'); window.location=" href="http://t.wits.sg/2008/06/25/howto-php-and-jquery-upload-progress-bar/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components10" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components10.jpg" alt="php-jquery-components10" width="500" height="200" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://t.wits.sg/misc/jQueryProgressBar/demo.php'); window.location=" href="http://t.wits.sg/misc/jQueryProgressBar/demo.php">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">11. Auto-Complete Field with jQuery, JSON &amp; PHP</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">Using jQuery with PHP to create auto complete field, beside the auto-complete code we need the jQuery library along with its Dimensions plug-in.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://fromvega.com/wordpress/2007/05/05/auto-complete-field-with-jquery-json-php/'); window.location=" href="http://fromvega.com/wordpress/2007/05/05/auto-complete-field-with-jquery-json-php/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components11" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components11.jpg" alt="php-jquery-components11" width="500" height="145" /></a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">12. A fancy Apple.com-style search suggestion</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">Learn how to recreate the effect from Apple website by creating a fancy apple.com-style search suggestion. This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html'); window.location=" href="http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components12" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components12.jpg" alt="php-jquery-components12" width="500" height="217" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://qpoit.com/marcofolio_demo/apple_search/'); window.location=" href="http://qpoit.com/marcofolio_demo/apple_search/">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">13. PHP &amp; jQuery image upload and crop v1.2</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">Create a PHP and jQuery image upload and crop tool using PHP, jQuery, PHP GD Library and<a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://odyniec.net/projects/imgareaselect/'); window.location=" href="http://odyniec.net/projects/imgareaselect/" target="_blank">Image Area Select.</a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/'); window.location=" href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components13" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components13.jpg" alt="php-jquery-components13" width="500" height="217" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.webmotionuk.co.uk/jquery/image_upload_crop.php'); window.location=" href="http://www.webmotionuk.co.uk/jquery/image_upload_crop.php">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">14. FlickrScrollr</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">FlickrScrollr is a combination of PHP and jQuery that parses a Flickr RSS feed and creates an animated thumbnail display.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ennuidesign.com/blog/FlickrScrollr+Explained:+PHP'); window.location=" href="http://ennuidesign.com/blog/FlickrScrollr+Explained:+PHP" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components14" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components14.jpg" alt="php-jquery-components14" width="500" height="217" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ennuidesign.com/demo/flickrscrollr'); window.location=" href="http://ennuidesign.com/demo/flickrscrollr">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">15. Reddit-style Voting With PHP, MySQL And jQuery</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ad1987.blogspot.com/2009/02/reddit-style-voting-with-php-mysql-and.html'); window.location=" href="http://ad1987.blogspot.com/2009/02/reddit-style-voting-with-php-mysql-and.html" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components15" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components15.jpg" alt="php-jquery-components15" width="500" height="217" /></a></p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://abhisek.uuuq.com/lab/reddit_votes/'); window.location=" href="http://abhisek.uuuq.com/lab/reddit_votes/">Check out the Demo Here</a></p>
<h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><span style="text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;">16. SMTP Feedback Mail class with jQuery Slide Effect</span></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;">This post is about feedback mail with nice slide effect using php SMTP class and jQuery. It’s very useful to add contact/feedback page to your php websites.</p>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://9lessons.blogspot.com/2009/02/smtp-feedback-mail-class-with-jquery.html'); window.location=" href="http://9lessons.blogspot.com/2009/02/smtp-feedback-mail-class-with-jquery.html" target="_blank"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="php-jquery-components16" src="http://www.dzinepress.com/wp-content/uploads/2009/04/php-jquery-components16.jpg" alt="php-jquery-components16" width="500" height="217" /></a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/15-useful-php-jquery-components-for-every-project/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>40+ excellent jquery tutorials</title>
		<link>http://jbloo.com/2009/12/40-excellent-jquery-tutorials/</link>
		<comments>http://jbloo.com/2009/12/40-excellent-jquery-tutorials/#comments</comments>
		<pubDate>Thu, 17 Dec 2009 20:12:27 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[only JQuery tutorial]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=328</guid>
		<description><![CDATA[Excellent jQuery Tutorials

01. jQuery for Absolute Beginners: The Complete Series
Tutorial Link
02. jQuery Tutorials for Designers
Tutorial Link
03. Facebox : Facebook-style lightbox
Tutorial Link Demo Link
04. Creating a “Filterable” Portfolio with jQuery
Tutorial Link Demo Link
05. Building a jQuery-Powered Tag-Cloud
Tutorial Link
06. jquery Hover Sub Tag Cloud
Tutorial Link Demo Link
07. Exactly How to Create a Custom jQuery Accordion
Tutorial Link Demo Link
08. Create a Cool Animated Navigation with CSS [...]]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><h1 style="font-size: 23px; color: #272727; padding-top: 6px; padding-right: 0px; padding-bottom: 1px; padding-left: 0px; font-weight: bold; font-family: 'Segoe UI', Arial, Verdana, Helvetica, sans-serif; letter-spacing: -1px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #272727; margin: 0px;"><span style="padding: 0px; margin: 0px;">Excellent jQuery Tutorials</span></h1>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;">
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">01. <span style="text-decoration: underline; padding: 0px; margin: 0px;">jQuery for Absolute Beginners: The Complete Series</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-01.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/" target="_blank">Tutorial Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">02. <span style="text-decoration: underline; padding: 0px; margin: 0px;">jQuery Tutorials for Designers</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-02.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/" target="_blank">Tutorial Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">03. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Facebox : Facebook-style lightbox</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://famspam.com/facebox" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-03.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://famspam.com/facebox" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://famspam.com/" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">04. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Creating a “Filterable” Portfolio with jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-04.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/196_jquery/index.htm" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">05. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Building a jQuery-Powered Tag-Cloud</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/building-a-jquery-powered-tag-cloud/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-05.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/building-a-jquery-powered-tag-cloud/" target="_blank">Tutorial Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">06. <span style="text-decoration: underline; padding: 0px; margin: 0px;">jquery Hover Sub Tag Cloud</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://www.noupe.com/css/jquery-hover-sub-tag-cloud.html" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-06.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.noupe.com/css/jquery-hover-sub-tag-cloud.html" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://noupe.com/examples/tagcloud/tag-cloud.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">07. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Exactly How to Create a Custom jQuery Accordion</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-07.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.nettuts.com/demos/020_jQueryUI/accordion-custom-jquery.php" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">08. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Create a Cool Animated Navigation with CSS and jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-08.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/009_jQueryMenu/sm/result/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">09. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Learn How to Create a jQuery Plugin</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/videos/screencasts/learn-how-to-create-a-jquery-plugin/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-09.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/videos/screencasts/learn-how-to-create-a-jquery-plugin/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/074_BuildYourFirstJqueryPluginSC/CreateYourFirstjQueryPlugin/index.htm" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">10. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Jquery Fade In.Fade Out</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-10.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.hv-designs.co.uk/tutorials/jquery/all.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">11. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Fading Menu – Replacing Content</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-11.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/examples/MenuFader/" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">12. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Fade-in Spoiler Revealer</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/fade-in-spoiler-revealer/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-12.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/fade-in-spoiler-revealer/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/examples/SpoilerRevealer/" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">13. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Creating a Dynamic Poll with jQuery and PHP</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-13.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/demos/test_poll/" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">14. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Creating accessible charts using canvas and jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-14.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.filamentgroup.com/examples/charting/" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">15. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Create a Photo Admin Site Using PHP and jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/videos/screencasts/create-a-photo-admin-site-using-php-and-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-15.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/videos/screencasts/create-a-photo-admin-site-using-php-and-jquery/" target="_blank">Tutorial Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">16. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Use jQuery with Google Analytics to Track Clicks on Outgoing Links From Your Site</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://www.think2loud.com/2008/08/use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-16.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.think2loud.com/2008/08/use-jquery-with-google-analytics-to-track-clicks-on-outgoing-links-from-your-site/" target="_blank">Tutorial Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">17. <span style="text-decoration: underline; padding: 0px; margin: 0px;">How to Load In and Animate Content with jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-17.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/011_jQuerySite/sample/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">18. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Create an Amazon Books Widget with jQuery and XML</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/create-an-amazoncom-books-widget-with-jquery-and-xml/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-18.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/create-an-amazoncom-books-widget-with-jquery-and-xml/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/152_jqueryBook/source/source/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">19. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Adding to Our Leopard Desktop with jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/adding-to-our-leopard-desktop-with-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-19.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/adding-to-our-leopard-desktop-with-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/082_leopard2/preview/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">20. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Leopard Desktop with jQuery using jqDock</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/leopard-desktop-in-jquery-using-jqdock/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-20.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/leopard-desktop-in-jquery-using-jqdock/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/076_jQueryDashboard/preview/preview.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">21. <span style="text-decoration: underline; padding: 0px; margin: 0px;">How To Create An Amazing jQuery Style Switcher</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/jquery-style-switcher/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-21.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/jquery-style-switcher/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/demos/03_jQueryStyleSwitcher/demo/index.php" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">22. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Style Sheet Switcheroo</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/style-sheet-switcheroo/12/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-22.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/style-sheet-switcheroo/12/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.kelvinluck.com/assets/jquery/styleswitch/" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">23. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Build An Incredible Login Form With jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-23.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">24. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Adding Form Validation to WordPress Comments using jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/adding-form-validation-to-wordpress-comments-using-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-24.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/adding-form-validation-to-wordpress-comments-using-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/021_Form/demo.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">25. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Evening Tip: Use jQuery To Retrieve Data From An XML File</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/use-jquery-to-retrieve-data-from-an-xml-file/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-25.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/use-jquery-to-retrieve-data-from-an-xml-file/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/045_LoadXMLWithJquery/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">26. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Improved Current Field Highlighting in Forms</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/improved-current-field-highlighting-in-forms/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-26.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/improved-current-field-highlighting-in-forms/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://css-tricks.com/examples/CurrentFieldHighlighting/" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">27. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Create an apple style menu and improve it via jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-27.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">28. <span style="text-decoration: underline; padding: 0px; margin: 0px;">LavaLamp for jQuery lovers!</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://gmarwaha.com/blog/?cat=8" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-28.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://gmarwaha.com/blog/?cat=8" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://gmarwaha.com/blog/?cat=8" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">29. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Create A Tabbed Interface Using jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-29.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">30. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Tabbed Content using jQuery and WP_Query</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/tabbed-content-using-jquery-and-wp_query/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-30.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/tabbed-content-using-jquery-and-wp_query/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/024_Tabbed/preview/preview.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">31. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Create a Slick Tabbed Content Area using CSS &amp; jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-31.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">32. <span style="text-decoration: underline; padding: 0px; margin: 0px;">jQuery Tabs</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/jquery-tabs/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-32.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/jquery-tabs/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/demo/tabs.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">33. <span style="text-decoration: underline; padding: 0px; margin: 0px;">How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-33.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">34. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Slide out and drawer effect</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-34.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/demo/plugin-slide-demo.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">35. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Creating a Floating HTML Menu Using jQuery and CSS</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-35.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/018_Floating_Menu/demo/dhtml_float_menu_final_nettut.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">36. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-36.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/javascript-ajax/building-a-better-blogroll-dynamic-fun-with-simplepie-and-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/036_BetterBlogRoll/sourceFiles/index.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">37. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Wordpress Sidebar Turned Apple-Flashy Using jQuery UI</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/wordpress-sidebar-turned-apple-flashy-using-jquery-ui/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-37.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/wordpress-sidebar-turned-apple-flashy-using-jquery-ui/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/028_jQuerySidebar/preview/preview.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">38. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Build a Basic Newspaper style layout with Wordpress and jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/build-a-basic-newspaper-style-layout-with-wordpress-and-jquery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-38.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.com/tutorials/wordpress/build-a-basic-newspaper-style-layout-with-wordpress-and-jquery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://nettuts.s3.amazonaws.com/023_Newspaper/preview/preview.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">39. <span style="text-decoration: underline; padding: 0px; margin: 0px;">jQuery image slider</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-39.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">40. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Slider Gallery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/slider-gallery/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-40.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/slider-gallery/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://jqueryfordesigners.com/demo/slider-gallery.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">41. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Photo Slider Tutorial</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://opiefoto.com/articles/photoslider" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-41.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://opiefoto.com/articles/photoslider" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://opiefoto.com/portfolio/Weddings" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">42. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Multiple File Upload Magic With Unobtrusive Javascript</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/multiple-file-upload-magic-with-unobtrusive-javascript/17/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-42.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/multiple-file-upload-magic-with-unobtrusive-javascript/17/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/examples/multiFile/demo2.php" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">43. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Easy Multi Select Transfer with jQuery</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-43.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">44. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Rounded Corners With Javascript (jQuery)</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #b30000; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/wrap-it-up-pretty-corners/13/" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-44.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/wrap-it-up-pretty-corners/13/" target="_blank">Tutorial Link</a> <a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://15daysofjquery.com/examples/rounded/demo.php" target="_blank">Demo Link</a></p>
<h4 style="font-size: 18px; text-decoration: none; color: #272727; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; position: relative; left: 0px; top: 0px; margin: 0px;"><span style="padding: 0px; margin: 0px;">45. <span style="text-decoration: underline; padding: 0px; margin: 0px;">Multiple Fancy Drop Caps</span></span></h4>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 21px; text-align: justify; margin: 0px;"><a style="color: #333333; text-decoration: underline; outline-style: none; outline-width: initial; outline-color: initial; padding: 0px; margin: 0px;" rel="external nofollow" href="http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps" target="_blank"><img style="background-image: none; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: initial; margin-top: 0px; margin-right: 20px; margin-bottom: 15px; margin-left: 0px; float: left; padding: 4px; border: 1px solid #eae9e9;" title="Excellent jQuery Tutorial" src="http://www.instantshift.com/wp-content/uploads/2009/02/ejt-45.jpg" alt="Excellent jQuery Tutorial" width="640" height="275" /></a><br style="padding: 0px; margin: 0px;" /><br style="padding: 0px; margin: 0px;" /><a style="color: #ffffff; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; text-decoration: none; outline-style: none; outline-width: initial; outline-color: initial; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #570e00; height: 25px; width: 125px; font-weight: bold; font-size: 12px; position: relative; left: 0px; top: 0px; margin: 0px;" rel="external nofollow" href="http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps" target="_blank">Tutorial Link</a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/40-excellent-jquery-tutorials/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>More Powerful &amp; Flexible Facebook-like TextboxList</title>
		<link>http://jbloo.com/2009/12/more-powerful-flexible-facebook-like-textboxlist/</link>
		<comments>http://jbloo.com/2009/12/more-powerful-flexible-facebook-like-textboxlist/#comments</comments>
		<pubDate>Thu, 17 Dec 2009 09:12:21 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Forms]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=325</guid>
		<description><![CDATA[We have mentioned TextboxList a while ago, which is something similar to Facebook List Input. Now New TextboxList has been rewritten from scratch, and it’s more powerful and flexible than ever.
It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. New TextboxList is now [...]]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><p style="padding-right: 0px; padding-left: 0px; font-size: 12px; padding-bottom: 7px; margin: 0px; line-height: 18px; padding-top: 7px;">We have mentioned <a style="margin: 0px; color: #3366cc; text-decoration: none; border-width: 0px; padding: 0px;" title="TextboxList" href="http://www.webappers.com/2008/01/17/facebook-list-textboxlist-with-autocompletion/" target="_blank">TextboxList</a> a while ago, which is something similar to Facebook List Input. Now <strong style="margin: 0px; padding: 0px;"><a style="margin: 0px; color: #3366cc; text-decoration: none; border-width: 0px; padding: 0px;" title="New TextboxList" href="http://devthought.com/blog/projects-news/2009/04/the-new-textboxlist-is-here/" target="_blank">New TextboxList</a></strong> has been rewritten from scratch, and it’s <em style="margin: 0px; padding: 0px;"><strong style="margin: 0px; padding: 0px;">more powerful and flexible than eve</strong></em>r.</p>
<p style="padding-right: 0px; padding-left: 0px; font-size: 12px; padding-bottom: 7px; margin: 0px; line-height: 18px; padding-top: 7px;">It is compatible with MooTools 1.2.x. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere. <strong style="margin: 0px; padding: 0px;"><a style="margin: 0px; color: #3366cc; text-decoration: none; border-width: 0px; padding: 0px;" title="New TextboxList" href="http://devthought.com/blog/projects-news/2009/04/the-new-textboxlist-is-here/" target="_blank">New TextboxList</a></strong> is now using Binary search for maximum performance. It supports new options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).</p>
<p style="padding-right: 0px; padding-left: 0px; font-size: 12px; padding-bottom: 7px; margin: 0px; line-height: 18px; padding-top: 7px; text-align: center;"><a style="margin: 0px; color: #3366cc; text-decoration: none; border-width: 0px; padding: 0px;" title="New TextboxList" href="http://devthought.com/blog/projects-news/2009/04/the-new-textboxlist-is-here/" target="_blank"><img style="margin: 5px 5px 0px; border: #efefef 1px solid; padding: 4px;" src="http://maxcdn.webappers.com/img/2009/04/facebook-list.jpg" alt="Facebook List Input" /></a></p>
<blockquote style="border-right: #efefef 0px solid; padding-right: 15px; border-top: #efefef 1px solid; padding-left: 15px; padding-bottom: 3px; margin: 5px 0px; border-left: #efefef 0px solid; color: #000000; padding-top: 3px; border-bottom: #efefef 1px solid; background-color: #f7f7f7; -webkit-background-clip: initial; -webkit-background-origin: initial;">
<p style="padding-right: 0px; padding-left: 0px; font-size: 11px; padding-bottom: 5px; margin: 5px 0px; line-height: 15px; padding-top: 5px;">Requirements: Mootools 1.2.x<br style="margin: 0px; padding: 0px;" />Demo: <a style="margin: 0px; color: #3366cc; text-decoration: none; border-width: 0px; padding: 0px;" title="Demo" href="http://devthought.com/projects/mootools/textboxlist/" target="_blank">http://devthought.com/projects/mootools/textboxlist/</a><br style="margin: 0px; padding: 0px;" />License: License Free</p>
</blockquote>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/more-powerful-flexible-facebook-like-textboxlist/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>iPhone Style Checkboxes in jQuery</title>
		<link>http://jbloo.com/2009/12/iphone-style-checkboxes-in-jquery/</link>
		<comments>http://jbloo.com/2009/12/iphone-style-checkboxes-in-jquery/#comments</comments>
		<pubDate>Thu, 17 Dec 2009 09:10:49 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Forms]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=323</guid>
		<description><![CDATA[Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then Thomas Reynolds has got something special for you. iPhone Style Checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes.
Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and [...]]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><p style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 7px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 7px">Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then <em style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px"><strong style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">Thomas Reynolds</strong></em> has got something special for you. <a style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #3366cc; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none" title="iPhone Style Checkboxes" href="http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html" target="_blank"><strong style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">iPhone Style Checkboxes</strong></a> implements the iPhone toggles as replacements for standard HTML checkboxes.</p>
<p style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 7px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 7px">Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.</p>
<p style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 7px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 7px; TEXT-ALIGN: center"><a style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #3366cc; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none" title="iPhone Style Checkboxes" href="http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html" target="_blank"><img style="BORDER-RIGHT: #efefef 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #efefef 1px solid; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; MARGIN: 5px 5px 0px; BORDER-LEFT: #efefef 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #efefef 1px solid" src="http://maxcdn.webappers.com/img/2009/06/iphone-checkbox.png" alt="iPhone Checkboxes" /></a></p>
<blockquote style="BORDER-RIGHT: #efefef 0px solid; PADDING-RIGHT: 15px; BORDER-TOP: #efefef 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 3px; MARGIN: 5px 0px; BORDER-LEFT: #efefef 0px solid; COLOR: #000000; PADDING-TOP: 3px; BORDER-BOTTOM: #efefef 1px solid; BACKGROUND-COLOR: #f7f7f7; -webkit-background-clip: initial; -webkit-background-origin: initial">
<p style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; MARGIN: 5px 0px; LINE-HEIGHT: 15px; PADDING-TOP: 5px">Requirements: jQuery Framework<br style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px" />Demo: <a style="BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #3366cc; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none" title="Demo" rel="nofollow" href="http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html" target="_blank">http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html</a><br style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px" />License: License Free</p>
</blockquote>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/iphone-style-checkboxes-in-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Nasi Briyani Lounge Login</title>
		<link>http://jbloo.com/2009/12/nasi-briyani-lounge-login/</link>
		<comments>http://jbloo.com/2009/12/nasi-briyani-lounge-login/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 18:33:51 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Login]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=318</guid>
		<description><![CDATA[Nasi Briyani Lounge


]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><p><a rel="external" href="http://www.nasibriyanilounge.com/" target="_blank">Nasi Briyani Lounge</a><br />
<a rel="external" href="http://www.nasibriyanilounge.com/" target="_blank"><br />
</a><a href="http://www.nasibriyanilounge.com/"><img class="alignnone size-full wp-image-321" title="login" src="http://jbloo.com/wp-content/uploads/2009/12/login.jpg" alt="login" width="503" height="236" /></a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/nasi-briyani-lounge-login/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Simple jQuery Modal Window Tutorial</title>
		<link>http://jbloo.com/2009/12/simple-jquery-modal-window-tutorial/</link>
		<comments>http://jbloo.com/2009/12/simple-jquery-modal-window-tutorial/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 17:09:36 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Popup]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=315</guid>
		<description><![CDATA[Simple jQuery Modal Window Tutorial

This modal window tutorial uses a rel attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the .click() and .css() methods.
Live Demo
]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><h4 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 50px; padding-top: 5px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; font-size: 13px; font-weight: bold; color: #333333; line-height: 13px;"><a style="color: #006699; text-decoration: none;" href="http://www.queness.com/post/77/simple-jquery-modal-window-tutorial">Simple jQuery Modal Window Tutorial</a></h4>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 50px; line-height: 20px; padding: 0px;"><a style="color: #006699; text-decoration: none;" href="http://www.queness.com/post/77/simple-jquery-modal-window-tutorial"><img style="padding: 4px; border: 1px solid #cccccc;" src="http://images.sixrevisions.com/2009/04/08-02_modal_window.png" alt="Simple jQuery Modal Window Tutorial tutorial screen shot." width="550" height="220" /></a></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 50px; line-height: 20px; padding: 0px;">This modal window tutorial uses a <code style="font-style: normal; font-weight: normal; font: normal normal normal 13px/normal 'Courier New', Courier, monospace; color: #333333;">rel</code> attribute to indicate whether a link opens a modal window using inline content. You’ll witness a few popular jQuery methods in action like the <code style="font-style: normal; font-weight: normal; font: normal normal normal 13px/normal 'Courier New', Courier, monospace; color: #333333;">.click()</code> and <code style="font-style: normal; font-weight: normal; font: normal normal normal 13px/normal 'Courier New', Courier, monospace; color: #333333;">.css()</code> methods.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 50px; line-height: 20px; padding: 0px;"><a style="color: #006699; text-decoration: none;" href="http://www.queness.com/resources/html/modal/jquery-modal-window.html">Live Demo</a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/simple-jquery-modal-window-tutorial/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>How to create a stunning and smooth popup using jQuery</title>
		<link>http://jbloo.com/2009/12/how-to-create-a-stunning-and-smooth-popup-using-jquery/</link>
		<comments>http://jbloo.com/2009/12/how-to-create-a-stunning-and-smooth-popup-using-jquery/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 17:05:22 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Popup]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=312</guid>
		<description><![CDATA[How to create a stunning and smooth popup using jQuery

 
In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form submit input, but you can easily modify it into other HTML elements like &#60;a&#62;). The tutorial will also show [...]]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><h4 style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 50px; padding-top: 5px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; font-size: 13px; font-weight: bold; color: #333333; line-height: 13px;"><a style="color: #006699; text-decoration: none;" href="http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/">How to create a stunning and smooth popup using jQuery</a></h4>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 50px; line-height: 20px; padding: 0px;"><a style="color: #006699; text-decoration: none;" href="http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/"><img style="padding: 4px; border: 1px solid #cccccc;" src="http://images.sixrevisions.com/2009/04/08-01_jquerypopup.png" alt="How to create a stunning and smooth popup using jQuery tutorial screen shot." width="550" height="220" /></a></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 50px; line-height: 20px; padding: 0px;"><span id="more-650"> </span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 50px; line-height: 20px; padding: 0px;">In this jQuery tutorial, you’ll discover a technique for creating a slick modal window that appears when the user clicks on the triggering element (in this case, form <code style="font-style: normal; font-weight: normal; font: normal normal normal 13px/normal 'Courier New', Courier, monospace; color: #333333;">submit input</code>, but you can easily modify it into other HTML elements like <code style="font-style: normal; font-weight: normal; font: normal normal normal 13px/normal 'Courier New', Courier, monospace; color: #333333;">&lt;a&gt;</code>). The tutorial will also show you how you can deal with <code style="font-style: normal; font-weight: normal; font: normal normal normal 13px/normal 'Courier New', Courier, monospace; color: #333333;">keypress</code> events so that you can incorporate keyboard shortcuts into your interface.</p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 50px; line-height: 20px; padding: 0px;"><a style="color: #006699; text-decoration: none;" href="http://yensdesign.com/tutorials/popupjquery/">Live Demo</a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/how-to-create-a-stunning-and-smooth-popup-using-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Create Featured Content Slider Using jQuery UI</title>
		<link>http://jbloo.com/2009/12/create-featured-content-slider-using-jquery-ui/</link>
		<comments>http://jbloo.com/2009/12/create-featured-content-slider-using-jquery-ui/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 17:03:15 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Gallery]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=309</guid>
		<description><![CDATA[Create Featured Content Slider Using jQuery UI

]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" href="http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/">Create Featured Content Slider Using jQuery UI</a></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;" href="http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="2017" src="http://www.tutoriallounge.com/wp-content/uploads/2017.jpg" alt="2017" width="530" height="216" /></a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/create-featured-content-slider-using-jquery-ui/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Cheat Sheet 1.2</title>
		<link>http://jbloo.com/2009/12/jquery-cheat-sheet-1-2/</link>
		<comments>http://jbloo.com/2009/12/jquery-cheat-sheet-1-2/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 17:02:21 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Cheat]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=307</guid>
		<description><![CDATA[jQuery Cheat Sheet 1.2

]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><h3 style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 10px; padding-right: 18px; padding-bottom: 5px; padding-left: 18px; color: #363636; font-size: 14px; font-weight: bold; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f5f4f0; text-align: left; height: 20px; background-position: initial initial; border: 1px solid #dedbd1;"><a style="color: #e8a02c; text-decoration: none; padding: 0px; margin: 0px; border: 0px initial initial;" href="http://www.cheat-sheets.org/saved-copy/Jquery-Cheat-Sheet-1.2.pdf" target="_blank">jQuery Cheat Sheet 1.2</a></h3>
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px !important; text-align: left; font-size: 12px; margin: 0px; border: 0px initial initial;"><a style="color: #e8a02c; text-decoration: underline; padding: 0px; margin: 0px; border: 0px initial initial;" href="http://www.cheat-sheets.org/saved-copy/Jquery-Cheat-Sheet-1.2.pdf"><img style="margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: #f8f8f4; background-position: initial initial; padding: 2px; border: 1px solid #e6e6e6;" title="1621" src="http://www.tutoriallounge.com/wp-content/uploads/1621.jpg" alt="1621" width="530" height="260" /></a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/jquery-cheat-sheet-1-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating a polaroid photo viewer with CSS3 and jQuery</title>
		<link>http://jbloo.com/2009/12/creating-a-polaroid-photo-viewer-with-css3-and-jquery/</link>
		<comments>http://jbloo.com/2009/12/creating-a-polaroid-photo-viewer-with-css3-and-jquery/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 16:57:23 +0000</pubDate>
		<dc:creator>Kunal K</dc:creator>
				<category><![CDATA[Gallery]]></category>

		<guid isPermaLink="false">http://jbloo.com/?p=304</guid>
		<description><![CDATA[Creating a polaroid photo viewer with CSS3 and jQuery
Placing pictures on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect [...]]]></description>
			<content:encoded><![CDATA[<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_start --><p style="margin-bottom: 1.15em;"><a style="color: #3151a2;" href="http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html">Creating a polaroid photo viewer with CSS3 and jQuery</a><br />
Placing pictures on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).</p>
<p style="margin-top: 1.5em; margin-right: 0px; margin-bottom: 1.15em; margin-left: 2.5em;"><a style="color: #cc0000;" href="http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html"><img style="margin-top: 6px; margin-right: 0px; margin-bottom: 6px; margin-left: 0px; display: inline; padding: 0px; border: 0px initial initial;" src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/jquery-plugins-techniques/15.jpg" alt="15 in 50 Useful New jQuery Techniques and Tutorials" width="480" height="300" /></a></p>
<!-- Advanced AdSense by Jim Gaudet --><!-- google_ad_section_end -->]]></content:encoded>
			<wfw:commentRss>http://jbloo.com/2009/12/creating-a-polaroid-photo-viewer-with-css3-and-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
