<?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>amuhlou &#187; jQuery</title>
	<atom:link href="http://www.amuhlou.com/category/web-development/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.amuhlou.com</link>
	<description>musings on work, play, and everything in between</description>
	<lastBuildDate>Wed, 25 Jan 2012 16:00:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Indispensable jQuery Resources</title>
		<link>http://www.amuhlou.com/2010/03/11/indispensable-jquery-resources/</link>
		<comments>http://www.amuhlou.com/2010/03/11/indispensable-jquery-resources/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 17:12:05 +0000</pubDate>
		<dc:creator>amuhlou</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://www.amuhlou.com/?p=582</guid>
		<description><![CDATA[If you&#8217;ve visited my blog before, you may be wondering why it lacks posts related to web development given that it&#8217;s my career. Well, I don&#8217;t really have an explanation other than to say I write &#8220;when the spirit moves me&#8221; and lately other things have been moving me to my keyboard. Never fear! I ...]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;ve visited my blog before, you may be wondering why it lacks posts related to web development given that it&#8217;s my career. Well, I don&#8217;t really have an explanation other than to say I write &#8220;when the spirit moves me&#8221; and lately other things have been moving me to my keyboard.</p>
<p>Never fear! I have been using <a href="http://www.evernote.com">Evernote</a> to collect post ideas and there are definitely web ones in the future. In fact, there is one in the <em>very</em> near future, like, say, in the next sentence or so.</p>
<p><span id="more-582"></span></p>
<h2>I love jQuery!</h2>
<p>Ok, not quite what you were expecting, right? Allow me to explain why&#8230;</p>
<ol>
<li>Its <a href="http://jquery.org/license">license</a> means it&#8217;s pretty much free to use for any type of project</li>
<li>jQuery has introduced me to JavaScript and helped me begin learning it. I&#8217;m not an expert by any means, but learning jQuery has helped me learn the vocabulary I need to effectively solve my JavaScript problems</li>
<li>The jQuery <a href="http://forum.jquery.com/">community</a> is thriving and, well, awesome</li>
<li>There&#8217;s a <a href="http://plugins.jquery.com/">plugin</a> for just about everything you can think of</li>
<li>The <a href="http://api.jquery.com/category/selectors/basic-css-selectors/">syntax</a> makes sense for people experienced in CSS</li>
</ol>
<p>So onto the heart of this post, jQuery resources I couldn&#8217;t live without.</p>
<h2 class="instruction">Tips, tutorials, and support</h2>
<ol>
<li><a href="http://forum.jquery.com/">jQuery forum</a>: Formerly hosted on Google Groups, the jQuery forum has a wealth of information and lots of really helpful people. Keep in mind and be appreciative that they&#8217;re helping because they want to, not because they are being paid to</li>
<li><a href="http://api.jquery.com/">the API</a>:  The new API (for version 1.4 and above has been completely rewritten to make it more easy to understand and better organized. If you need to use an older version of jQuery and aren&#8217;t sure what features are specific to version 1.4, the <a href="http://docs.jquery.com/Main_Page">old documentation</a> is still available too</li>
<li><a href="http://jqueryfordesigners.com/">jQuery for Designers</a>: provides tips and tutorials for people who may not have very much programming experience at all, and the content can be filtered by your experience level</li>
<li><a href="http://www.learningjquery.com/">Learning jQuery</a>: Not only was the site created by a <a href="http://twitter.com/kswedberg">fellow Michigander</a>, but it also provides some seriously thorough information and time-saving tips, such as <a href="http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content">1 Way to Avoid the Flash of Unstyled Content</a>.</li>
<li><a href="http://www.filamentgroup.com/lab">The Filament Group Blog</a>: Though not devoted exclusively to jQuery, I have found a number of good jQuery examples, especially ones focusing on Accessibility of jQuery UI elements</li>
</ol>
<h2 class="instruction">Popular and useful plugins</h2>
<h3>jQuery Cycle Plugin</h3>
<p>If you&#8217;re ever in need of an image rotator, <a href="http://www.malsup.com/jquery/cycle/">Cycle</a> is the plugin for you. It has a lot of options and you can pretty much customize it to meet any need.</p>
<p>As far as implementation goes, it couldn&#8217;t get much easier. All you have to do is:</p>
<pre class="brush: jscript;">
$(function(){
//where div id slideshow-container contains 2 or more &lt;img&gt; tags
$('#slideshow-container').cycle();
});
</pre>
<p>and you have yourself a slideshow.  I use the plugin for my <a href="http://www.amuhlou.com/photos/">photos</a> page, where it is set up to load slides with AJAX after the initial page load.  Cycle is by far the jQuery plugin I use most. On top of all the other great things about the plugin, the creator <a href="http://twitter.com/malsup">Mike Alsup</a> is pretty <a href="http://forum.jquery.com/user/malsup">accessible and willing to help</a>. </p>
<h3>jCarousel</h3>
<p><img src="http://www.amuhlou.com/wp-content/uploads/2010/03/jcarousel.jpg" alt="j-carousel" title="jcarousel" width="200" height="75" class="alignright size-full wp-image-782" />Though I haven&#8217;t used it very much, the <a href="http://sorgalla.com/projects/jcarousel/">jCarousel</a> plugin is very popular for creating a slideshow of  multiple items at once, similar to the related products area you see on an Amazon.com product listing.  It comes with a few different skin options, or you can style it on your own with CSS and custom images.  This plugin, like many others, takes existing semantic markup and transforms it with JavaScript.</p>
<h3>jQuery UI Tabs</h3>
<p><img src="http://www.amuhlou.com/wp-content/uploads/2010/03/tabs.gif" alt="jquery tabs example" title="jQuery UI Tabs example" width="250" height="127" class="alignleft size-full wp-image-790" />A great way to organize a lot of content in a small amount of space is to put it into tabs. What makes the<a href="http://jqueryui.com/demos/tabs/"> jQuery UI Tabs widget</a> great is that it&#8217;s fast to implement and has some pre-made CSS themes you can use if you&#8217;re in a hurry. Another bonus is that unlike some other tabs implementations, the jQuery widget utilizes best practices by avoiding misuse of the <code>rel</code> attribute. It also degrades gracefully if JavaScript is turned off.</p>
<p>Tabs is just one of the awesome plugins from jQuery UI, so <a href="http://jqueryui.com/demos/">be sure to check them all out</a>!</p>
<h3>jquery.pngfix</h3>
<p>I don&#8217;t make it a point to spend a lot of time fixing issues in Internet Explorer 6 unless a client specifically requests it. I do, however think the bare minimum of IE6 support  should be to fix broken .png images. With the <a href="http://jquery.andreaseberhard.de/pngFix/">jquery.pngfix.js plugin</a>, I can quickly fix png images for IE6. To avoid forcing &#8220;modern&#8221; browsers to process unnecessary JavaScript, I call this plugin inside of a conditional comment.</p>
<pre class="brush: xml;">
&lt;!--[if IE 6]&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.pngfix.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
//assuming jQuery library is called in head of document
$(function(){
$(document).pngFix();
});
&lt;/script&gt;
&lt;![endif]--&gt;
</pre>
<p>So that&#8217;s my two cents about jQuery. Not exactly an unbiased opinion, but hey, I never promised it would be.  </p>
]]></content:encoded>
			<wfw:commentRss>http://www.amuhlou.com/2010/03/11/indispensable-jquery-resources/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

