<?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>Gaya Design &#187; jQuery</title>
	<atom:link href="http://www.gayadesign.com/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gayadesign.com</link>
	<description>PHP, CSS, xhtml, javascript / jquery tutorials</description>
	<lastBuildDate>Mon, 06 Feb 2012 11:09:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>QueryLoader2 &#8211; Preload your images with ease</title>
		<link>http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/</link>
		<comments>http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/#comments</comments>
		<pubDate>Wed, 26 Oct 2011 20:10:38 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[load images]]></category>
		<category><![CDATA[preload]]></category>
		<category><![CDATA[preloader]]></category>
		<category><![CDATA[queryLoader]]></category>
		<category><![CDATA[queryLoader2]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=678</guid>
		<description><![CDATA[Gaya Design is back in business and hitting hard with a redo of the 2009 script QueryLoader. I kept getting e-mails and comments about it and thought I had left it just hanging there for way too long. It had become very outdated. So here it is: version 2 of QueryLoader!

<a class="border" href="http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/"><img src="http://www.gayadesign.com/wp-content/uploads/2011/10/ql2header.jpg" alt="" title="ql2header" width="580" height="154" class="aligncenter size-full wp-image-684" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/feed/</wfw:commentRss>
		<slash:comments>135</slash:comments>
		</item>
		<item>
		<title>Text with Moving Backgrounds with jQuery</title>
		<link>http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/</link>
		<comments>http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/#comments</comments>
		<pubDate>Fri, 08 Jan 2010 18:19:25 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[animate]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[moving backgrounds]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[png]]></category>
		<category><![CDATA[transparency]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=632</guid>
		<description><![CDATA[Personally, I am a huge fan of negative space in design. This got me thinking while I was trying to accomplish something different. Normally a textual caption would be positioned above a background, but I wanted to do it the other way around: place the background in the letters.
I also wanted to add some nice dynamic effects to enhance the effect. This was amazingly easy to accomplish in jQuery with the use of a little creativity.

This article will explain what you need to do create an effect like this yourself.

<a href="http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/" class="border"><img src="http://www.gayadesign.com/wp-content/uploads/2010/01/movingbgcover.jpg" alt="Text with Moving Backgrounds with jQuery" title="Text with Moving Backgrounds with jQuery" width="580" height="254" class="aligncenter size-full wp-image-635" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/feed/</wfw:commentRss>
		<slash:comments>95</slash:comments>
		</item>
		<item>
		<title>How to start writing your own sweet jQuery scripts</title>
		<link>http://www.gayadesign.com/articles/how-to-start-writing-your-own-sweet-jquery-scripts/</link>
		<comments>http://www.gayadesign.com/articles/how-to-start-writing-your-own-sweet-jquery-scripts/#comments</comments>
		<pubDate>Mon, 30 Nov 2009 18:15:10 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[begin]]></category>
		<category><![CDATA[beginners]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[how to]]></category>
		<category><![CDATA[howto]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=592</guid>
		<description><![CDATA[Sometimes it can be hard to start writing a Javascript script when you don't know what to do instantaneously. But luckily there is the Internet right?
Just go to Google and type in what you want in a script. Good chance some jQuery or Javascript solution will show in the results, and you are basically done.

The problem is that you still don't know how to do such things.

In this article I'll discuss the viral points of planning out a Javascript / jQuery script with ease.

<a href="http://www.gayadesign.com/articles/how-to-start-writing-your-own-sweet-jquery-scripts/" rel="attachment wp-att-620" class="border"><img src="http://www.gayadesign.com/wp-content/uploads/2009/11/startjquery.jpg" alt="startjquery" title="startjquery" width="580" height="148" class="aligncenter size-full wp-image-620" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/articles/how-to-start-writing-your-own-sweet-jquery-scripts/feed/</wfw:commentRss>
		<slash:comments>38</slash:comments>
		</item>
		<item>
		<title>Presentation Cycle: Cycle with a progressbar</title>
		<link>http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar/</link>
		<comments>http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 16:34:53 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[cycle]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[presentations]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=559</guid>
		<description><![CDATA[<a href="http://www.malsup.com/jquery/cycle/">Cycle</a> is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.

Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

In this article I'll explain how to implement this on your web page and give you some tips on how to adjust the looks of the cycle elements and progress bar.

<a class="border" href="http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar" rel="attachment wp-att-560"><img src="http://www.gayadesign.com/wp-content/uploads/2009/11/presentationCycle.jpg" alt="presentationCycle" title="presentationCycle" width="580" height="253" class="aligncenter size-full wp-image-560" /></a><!-- technorati 82PT68E7893B -->]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/presentation-cycle-cycle-with-a-progressbar/feed/</wfw:commentRss>
		<slash:comments>136</slash:comments>
		</item>
		<item>
		<title>Notifications: the other approach</title>
		<link>http://www.gayadesign.com/articles/notifications-the-other-approach/</link>
		<comments>http://www.gayadesign.com/articles/notifications-the-other-approach/#comments</comments>
		<pubDate>Tue, 20 Oct 2009 11:08:14 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Videos]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[notification]]></category>
		<category><![CDATA[notifications]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=546</guid>
		<description><![CDATA[A normal problem: notifications or updates that have to be displayed on a website, but it's kind of overloading the backend. But as long as the page is open: please update the status dynamically (if necessary) without reloading the page.
 
I can hear you think: AJAX! Yes, I'll use AJAX for sure. But there is a little problem when it comes to how up-to-date you want these notifications to be without overloading the backend of the website.

In this article I'll approach pushing notifications from another perspective, regulating them in the backend rather than the frontend.

<a href="http://www.gayadesign.com/articles/notifications-the-other-approach/" class="border"><img src="http://www.gayadesign.com/wp-content/uploads/2009/10/notifications.jpg" alt="notifications" title="notifications" width="580" height="224" class="aligncenter size-full wp-image-550" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/articles/notifications-the-other-approach/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>QueryLoader &#8211; preload your website in style</title>
		<link>http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/</link>
		<comments>http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/#comments</comments>
		<pubDate>Thu, 01 Oct 2009 11:43:28 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[preload]]></category>
		<category><![CDATA[preloader]]></category>
		<category><![CDATA[queryLoader]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=489</guid>
		<description><![CDATA[There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: "Loading page" or have an animated image that spins. Why can't there be a nice loading bar of some kind?
I've gotten a few request on how to make a preloader, or people asking me how to get all the images of a web page and preload them (even the images in CSS).

This preloader has it all. Loading bar, custom animations and getting all images included in the web page.

<div style="background-color: #fcf8bb; padding: 10px; text-align: center; font-size: 1.5em;">
<a href="http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/"> There is a new version of QueryLoader. Consider this one obselete!</a>
</div>

<a class="border" href="http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/"><img src="http://www.gayadesign.com/wp-content/uploads/2009/09/qloader.jpg" alt="qloader" title="qloader" width="580" height="173" class="aligncenter size-full wp-image-490" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/feed/</wfw:commentRss>
		<slash:comments>600</slash:comments>
		</item>
		<item>
		<title>Circular InterAction menu</title>
		<link>http://www.gayadesign.com/diy/circular-interaction-menu/</link>
		<comments>http://www.gayadesign.com/diy/circular-interaction-menu/#comments</comments>
		<pubDate>Fri, 04 Sep 2009 17:45:20 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[interaction]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[menu]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=475</guid>
		<description><![CDATA[It's time for another jQuery script from Gaya Design. This time I created an interactive menu, which can be used in CMSes, applications or just on your own website.
This post will show you how this script works and how to apply it in your own environment.

<a href="http://www.gayadesign.com/diy/circular-interaction-menu/" class="border"><img src="http://www.gayadesign.com/wp-content/uploads/2009/09/interactionpost.jpg" alt="interactionpost" title="interactionpost" width="580" height="146" class="aligncenter size-full wp-image-476" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/circular-interaction-menu/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>sNotify: Easy notifications in jQuery</title>
		<link>http://www.gayadesign.com/diy/snotify-easy-notifications-in-jquery/</link>
		<comments>http://www.gayadesign.com/diy/snotify-easy-notifications-in-jquery/#comments</comments>
		<pubDate>Wed, 19 Aug 2009 14:58:01 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[notifications]]></category>
		<category><![CDATA[script]]></category>
		<category><![CDATA[snotify]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=453</guid>
		<description><![CDATA[There hasn't been a jQuery tutorial / script on Gaya Design for a while. This is because I've been working on this particular script for a while and have a lot of other scripts in development.

sNotify is a script which is particularly handy for people who are developing web applications. sNotify allows the developer to display notifications in a fast and easy way.

<a class="border" href="http://www.gayadesign.com/diy/snotify-easy-notifications-in-jquery/"><img src="http://www.gayadesign.com/wp-content/uploads/2009/08/snotify.jpg" alt="snotify" title="snotify" width="580" height="159" class="aligncenter size-full wp-image-454" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/snotify-easy-notifications-in-jquery/feed/</wfw:commentRss>
		<slash:comments>41</slash:comments>
		</item>
		<item>
		<title>Puffing Smoke Effect in jQuery</title>
		<link>http://www.gayadesign.com/diy/puffing-smoke-effect-in-jquery/</link>
		<comments>http://www.gayadesign.com/diy/puffing-smoke-effect-in-jquery/#comments</comments>
		<pubDate>Tue, 26 May 2009 15:07:43 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[DIY]]></category>
		<category><![CDATA[gaya design]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[puff]]></category>
		<category><![CDATA[smoke]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=381</guid>
		<description><![CDATA[Since the launch of the new looks, I've been getting some requests on how to make the puffing smoke effect that you can see in the header.

Thinking it might be a funny effect, I'd like to take this opportunity to discuss this effect.

<a rel="attachment wp-att-382" class="border" href="http://www.gayadesign.com/diy/puffing-smoke-effect-in-jquery/"><img class="aligncenter size-full wp-image-382" title="puffingsmoke" src="http://www.gayadesign.com/wp-content/uploads/2009/05/puffingsmoke.jpg" alt="puffingsmoke" width="580" height="198" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/diy/puffing-smoke-effect-in-jquery/feed/</wfw:commentRss>
		<slash:comments>113</slash:comments>
		</item>
		<item>
		<title>Now in The Woods: Simulate Gravity with jQuery</title>
		<link>http://www.gayadesign.com/general/now-in-the-woods-simulate-gravity-with-jquery/</link>
		<comments>http://www.gayadesign.com/general/now-in-the-woods-simulate-gravity-with-jquery/#comments</comments>
		<pubDate>Mon, 04 May 2009 15:24:47 +0000</pubDate>
		<dc:creator>Gaya</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[gravity]]></category>
		<category><![CDATA[in the woods]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[news]]></category>
		<category><![CDATA[themeforest]]></category>

		<guid isPermaLink="false">http://www.gayadesign.com/?p=292</guid>
		<description><![CDATA[I wrote a post a while ago about gravity in jQuery. Thinking it was a rather funny effect, I thought I'd submit this article to a famous weblog to see if they would accept it. And what do you know: it's now on ThemeForest's blog <a href="http://blog.themeforest.net/">In The Woods</a>!

The article will show you how to fake gravity using jQuery, creating real life simulation of objects falling.

Read the post here:
<a href="http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/">http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/</a>

<a rel="attachment wp-att-293" class="border" href="http://www.gayadesign.com/general/now-in-the-woods-simulate-gravity-with-jquery"><img class="aligncenter size-full wp-image-293" title="gravitythemeforest" src="http://www.gayadesign.com/wp-content/uploads/2009/05/gravitythemeforest.jpg" alt="gravitythemeforest" width="532" height="300" /></a>]]></description>
		<wfw:commentRss>http://www.gayadesign.com/general/now-in-the-woods-simulate-gravity-with-jquery/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

