<?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>Interactive Volcano &#187; jQuery</title>
	<atom:link href="http://interactivevolcano.com/learn/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://interactivevolcano.com</link>
	<description>All-inclusive interactive + creative website providing tutorials for jQuery, Flash and JavaScript</description>
	<lastBuildDate>Wed, 17 Jun 2009 15:48:41 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery?  You&#8217;ve got to toggle</title>
		<link>http://interactivevolcano.com/jquery-toggling</link>
		<comments>http://interactivevolcano.com/jquery-toggling#comments</comments>
		<pubDate>Wed, 17 Jun 2009 15:48:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[shortcuts]]></category>
		<category><![CDATA[technique]]></category>
		<category><![CDATA[toggle]]></category>

		<guid isPermaLink="false">http://interactivevolcano.com/?p=16</guid>
		<description><![CDATA[

Toggling makes it easy to turn things on and off

Everyone likes writing jQuery for one main reason: it&#8217;s really easy to use.  One feature that makes life a lot easier is toggling.  Let&#8217;s say you have an image that you need to show when a button is clicked and then hide when it [...]]]></description>
		<wfw:commentRss>http://interactivevolcano.com/jquery-toggling/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Appending Grayed-Out Overlays with jQuery and CSS</title>
		<link>http://interactivevolcano.com/grayed-out-overlays-with-jquery-and-css</link>
		<comments>http://interactivevolcano.com/grayed-out-overlays-with-jquery-and-css#comments</comments>
		<pubDate>Sun, 19 Apr 2009 20:45:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[cross-browser]]></category>
		<category><![CDATA[dynamic]]></category>
		<category><![CDATA[interactive]]></category>
		<category><![CDATA[unobtrusive]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[web2.0]]></category>

		<guid isPermaLink="false">http://interactivevolcano.com/grayed-out-overlays-with-jquery-and-css</guid>
		<description><![CDATA[Probably one of the most widely adopted "web 2.0" features is the grayed out overlay.   Rather than always redirecting users to a new page, overlays allow the current page to get "grayed out" with an overlaid panel.  With the wide use of Javascript libraries like jQuery, the prevalence of these grayed-out overlays is understandable: they are very easy to build.  

Let‚Äôs start with the markup and CSS. We‚Äôll need two wrappers, appended at the end of the DOM. Although we will append these later with jQuery, for now just put them right in the HTML (or wait until we append them).

The idea for these wrappers is that the first 'overlay' div will be the grayed-out background and the 'overlay-panel' will be the HTML panel that sits on top of the overlay.

Now let's get started by styling the overlay.  The first problem we'll have to tackle is making the overlay fill the screen and sit on top of all the content:
]]></description>
		<wfw:commentRss>http://interactivevolcano.com/grayed-out-overlays-with-jquery-and-css/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Controlling Animation Timing in jQuery</title>
		<link>http://interactivevolcano.com/jquery-animation-timing</link>
		<comments>http://interactivevolcano.com/jquery-animation-timing#comments</comments>
		<pubDate>Wed, 14 Jan 2009 23:27:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[callback]]></category>
		<category><![CDATA[front end]]></category>
		<category><![CDATA[interval]]></category>
		<category><![CDATA[processing]]></category>
		<category><![CDATA[syntax]]></category>
		<category><![CDATA[timing]]></category>

		<guid isPermaLink="false">http://interactivevolcano.com/jquery-animation-timing</guid>
		<description><![CDATA[Animation and function timing can often seem like an uphill battle in Javascript.  Thankfully jQuery's variety of timing control mechanisms provide excellent alternatives to Javascript's standard order of function processing.

With both callback functions and chainable methods, jQuery allows much greater control over animation timing than Javascript alone.   Callback functions provide the ability to execute a function once an animation has completed.  Chainable methods allow us to stack a series of operations on a single object.  Combining the two, jQuery provides near perfect control over the timing of animations.]]></description>
		<wfw:commentRss>http://interactivevolcano.com/jquery-animation-timing/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Folding Side Nav with jQuery</title>
		<link>http://interactivevolcano.com/folding-side-nav-with-jquery</link>
		<comments>http://interactivevolcano.com/folding-side-nav-with-jquery#comments</comments>
		<pubDate>Sun, 03 Aug 2008 21:27:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[front end]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[selectors]]></category>

		<guid isPermaLink="false">http://interactivevolcano.com/folding-side-nav-with-jquery</guid>
		<description><![CDATA[With jQuery, coding side navigation with drawers that expand and collapse is a piece of cake.
Let&#8217;s start with some best-practices HTML/CSS navigation:
&#60;ul id="side-nav">
    &#60;li class="current">
        &#60;a href="/">Products&#60;/a>
        &#60;ul>
           [...]]]></description>
		<wfw:commentRss>http://interactivevolcano.com/folding-side-nav-with-jquery/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

