<?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>Ian Dunn &#187; JavaScript</title>
	<atom:link href="http://iandunn.name/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://iandunn.name</link>
	<description>Seattle-based web developer blogging about tips and solutions</description>
	<lastBuildDate>Sat, 04 Feb 2012 00:22:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>Faster jQuery Selector Calls with Chaining</title>
		<link>http://iandunn.name/faster-jquery-selector-calls-with-chaining/</link>
		<comments>http://iandunn.name/faster-jquery-selector-calls-with-chaining/#comments</comments>
		<pubDate>Fri, 27 Jan 2012 19:22:20 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Chaining]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Selectors]]></category>

		<guid isPermaLink="false">http://iandunn.name/?p=1103</guid>
		<description><![CDATA[Rob Tarr ran some benchmarks to prove the claim that <a title="JQUERY SELECTOR PERFORMANCE TESTING" href="http://seesparkbox.com/foundry/jquery_selector_performance_testing">chaining jQuery selector methods is faster</a> than placing them all in a single method call.]]></description>
			<content:encoded><![CDATA[<p>Rob Tarr ran some benchmarks to prove the claim that <a title="JQUERY SELECTOR PERFORMANCE TESTING" href="http://seesparkbox.com/foundry/jquery_selector_performance_testing">chaining jQuery selector methods is faster</a> than placing them all in a single method call.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/faster-jquery-selector-calls-with-chaining/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Passing Extra Arguments to a jQuery Event Handler</title>
		<link>http://iandunn.name/passing-extra-arguments-to-a-jquery-event-handler/</link>
		<comments>http://iandunn.name/passing-extra-arguments-to-a-jquery-event-handler/#comments</comments>
		<pubDate>Mon, 02 Jan 2012 21:31:35 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Event Handler]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://iandunn.name/?p=1100</guid>
		<description><![CDATA[<a title="How to pass extra data to a jQuery event handler" href="http://jsfiddle.net/kvHDA/">This Fiddle</a> shows how to pass extra parameters to an event handler function in jQuery.]]></description>
			<content:encoded><![CDATA[<p><a title="How to pass extra data to a jQuery event handler" href="http://jsfiddle.net/kvHDA/">This Fiddle</a> shows how to pass extra parameters to an event handler function in jQuery.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/passing-extra-arguments-to-a-jquery-event-handler/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Why Hash-bang URLs are Bad</title>
		<link>http://iandunn.name/why-hash-bang-urls-are-bad/</link>
		<comments>http://iandunn.name/why-hash-bang-urls-are-bad/#comments</comments>
		<pubDate>Mon, 28 Nov 2011 19:02:52 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Standards and Best Practices]]></category>
		<category><![CDATA[Hashbang URLs]]></category>

		<guid isPermaLink="false">http://iandunn.name/?p=1086</guid>
		<description><![CDATA[WebMonkey has a good article explaining <a title="Gawker Learns the Hard Way Why ‘Hash-Bang’ URLs are Evil" href="http://www.webmonkey.com/2011/02/gawker-learns-the-hard-way-why-hash-bang-urls-are-evil/">why hash-bang URLS are a bad idea</a> .  If you&#8217;re not familiar with them, they have  #! symbols at the beginning of the path, e.g. http://twitter.com/#!/username. They rely entirely on JavaScript to parse and therefore make the site inaccessible to browsers without  JavaScript (or those with it turned off by the user), assistive technologies that people with disabilities use, and... [<a href="http://iandunn.name/why-hash-bang-urls-are-bad/">more</a>]]]></description>
			<content:encoded><![CDATA[<p>WebMonkey has a good article explaining <a title="Gawker Learns the Hard Way Why ‘Hash-Bang’ URLs are Evil" href="http://www.webmonkey.com/2011/02/gawker-learns-the-hard-way-why-hash-bang-urls-are-evil/">why hash-bang URLS are a bad idea</a>.  If you&#8217;re not familiar with them, they have  #! symbols at the beginning of the path, e.g. http://twitter.com/#!/username. They rely entirely on JavaScript to parse and therefore make the site inaccessible to browsers without  JavaScript (or those with it turned off by the user), assistive technologies that people with disabilities use, and search engines that haven&#8217;t been modified to recognize them.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/why-hash-bang-urls-are-bad/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Preventing Sites From Opening New Tabs/Windows</title>
		<link>http://iandunn.name/preventing-sites-from-opening-new-tabswindows/</link>
		<comments>http://iandunn.name/preventing-sites-from-opening-new-tabswindows/#comments</comments>
		<pubDate>Thu, 08 Sep 2011 17:10:43 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[HTML / XHTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Extensions]]></category>
		<category><![CDATA[Link Targets]]></category>
		<category><![CDATA[User Scripts]]></category>

		<guid isPermaLink="false">http://iandunn.name/?p=1033</guid>
		<description><![CDATA[I wrote earlier about why <a title="Don't Force Links to Open in New Windows" href="http://iandunn.name/dont-force-links-to-open-in-new-windows/">it&#8217;s wrong for websites to force links to open in a new tab or window</a> ,  but it&#8217;ll probably be at least a few years before the majority of clients and web developers finally come around. In the mean time it&#8217;d be nice for users to have a way to prevent their browsers from implementing the practice, but surprisingly there aren&#8217;t any Chrome extensions. You... [<a href="http://iandunn.name/preventing-sites-from-opening-new-tabswindows/">more</a>]]]></description>
			<content:encoded><![CDATA[<p>I wrote earlier about why <a title="Don't Force Links to Open in New Windows" href="http://iandunn.name/dont-force-links-to-open-in-new-windows/">it&#8217;s wrong for websites to force links to open in a new tab or window</a>,  but it&#8217;ll probably be at least a few years before the majority of clients and web developers finally come around. In the mean time it&#8217;d be nice for users to have a way to prevent their browsers from implementing the practice, but surprisingly there aren&#8217;t any Chrome extensions. You can <a title="Can you force open links that create a new tab, in the same tab?" href="http://askubuntu.com/questions/16847/can-you-force-open-links-that-create-a-new-tab-in-the-same-tab">create</a> and <a title="Install / Uninstall User Script on Google Chrome" href="http://ooiks.com/blog/mousehunt-autobot/install-uninstall-user-script-on-google-chrome">install</a> a user script, though.</p>
<p>Here&#8217;s my modified version of the script:</p>
<pre class="brush: jscript; title: ; notranslate">
// ==UserScript==
// @name           Open Links in Same Tab/Window
// @description    Prevents websites from forcing links to open in new tabs or windows.
// @version        0.1
// ==/UserScript==

var a = document.getElementsByTagName(&quot;a&quot;);
for( i=0; i &lt; a.length; i++ )
  if( a[i].target == &quot;_blank&quot; )
    a[i].target = &quot;_self&quot;;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/preventing-sites-from-opening-new-tabswindows/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>My First Shot at Adaptive Images</title>
		<link>http://iandunn.name/my-first-shot-at-adaptive-images/</link>
		<comments>http://iandunn.name/my-first-shot-at-adaptive-images/#comments</comments>
		<pubDate>Fri, 02 Sep 2011 01:30:56 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML / XHTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Standards and Best Practices]]></category>
		<category><![CDATA[Cookies]]></category>
		<category><![CDATA[max-width]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Responsive Web Design]]></category>

		<guid isPermaLink="false">http://iandunn.name/?p=1003</guid>
		<description><![CDATA[One of the first problems you run into when trying to build an <a title="Responsive Web Design" href="http://alistapart.com/articles/responsive-web-design/">adaptive layout</a> is that images, unlike blocks of text, have fixed widths. Ideally we want to use small images on small screens and full sized ones on larger screens. The browser can resize the image on the fly, but the two problems with this... [<a href="http://iandunn.name/my-first-shot-at-adaptive-images/">more</a>]]]></description>
			<content:encoded><![CDATA[<p>One of the first problems you run into when trying to build an <a title="Responsive Web Design" href="http://alistapart.com/articles/responsive-web-design/">adaptive layout</a> is that images, unlike blocks of text, have fixed widths. Ideally we want to use small images on small screens and full sized ones on larger screens. The browser can resize the image on the fly, but the two problems with this are: 1) on Windows systems, the  quality degrades when the browser scales the image; and 2) Mobile users shouldn&#8217;t have to download a large image, only to scale it down. That takes much more time and bandwidth than necessary.</p>
<p>There are half a dozen popular solutions to this, but I wasn&#8217;t completely happy with any of them on their own, so I&#8217;m experimenting with using a combination of  <a title="Fluid Images" href="http://unstoppablerobotninja.com/entry/fluid-images/">Ethan Marcotte&#8217;s max-width technique</a> and a modified version of <a title="Responsive images using cookies" href="http://blog.keithclark.co.uk/responsive-images-using-cookies">Keith Clark&#8217;s cookie technique</a>. The cookie technique can be used to determine the size of a user&#8217;s screen before outputting the filename, so you can serve a low-res version to mobile devices and a high-res version to desktops. You can add the max-width technique on top of that to handle any situations where the image still doesn&#8217;t fit right.</p>
<p>My modification to Keith&#8217;s technique is that instead of setting the image&#8217;s src tag to call a PHP file which outputs the respective image&#8217;s contents, I just have the function determine the path of the appropriate image. That avoids the faux URL and any caching issues. The image quality will still degrade when it has to scale, but serving multiple images minimizes the number of times that occurs. The major downside is that the it only takes effect after the first page load. But, given the lack of a proper solution, I think that&#8217;s an acceptable compromise.</p>
<p><strong>Update: </strong>I&#8217;m now also considering adding a third layer to help minimize the cases where the first load would include the large images. The browser doesn&#8217;t send the screen width with the HTTP request, but it does send a user agent string. The code could parse out the agent and default to the small images for known mobile browsers. On it&#8217;s own user agent detection is insufficient, but it may be useful as one of many layers. There could be issues with unreliable (or intentionally false) agent disclosures, and also with different devices using the same agent even though they have different screen capabilities, so it&#8217;ll have to be tested out thoroughly, but I think it&#8217;s worth a shot.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/my-first-shot-at-adaptive-images/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Passing Multi-Dimensional Arrays from WordPress to JavaScript</title>
		<link>http://iandunn.name/passing-multi-dimensional-arrays-from-wordpress-to-javascript/</link>
		<comments>http://iandunn.name/passing-multi-dimensional-arrays-from-wordpress-to-javascript/#comments</comments>
		<pubDate>Sat, 23 Jul 2011 06:32:35 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Multi-Dimensional Arrays]]></category>
		<category><![CDATA[wp_localize_script]]></category>

		<guid isPermaLink="false">http://iandunn.name/?p=924</guid>
		<description><![CDATA[On its own <a href="http://codex.wordpress.org/Function_Reference/wp_localize_script">wp_localize_script()</a> can&#8217;t handle multi-dimensional arrays, but you can get around that by <a title="Passing PHP array to JavaScript using wp_localize_script()" href="http://www.ronakg.com/2011/05/passing-php-array-to-javascript-using-wp_localize_script/">encoding the child arrays in JSON</a> . That doesn&#8217;t handle HTML content very well, though, so another way to do it is to <a title="pass object/JSON to wp_localize_script" href="http://wordpress.stackexchange.com/questions/8655/pass-object-json-to-wp-localize-script">use the l10n_print_after parameter</a> . That&#8217;s kind of ugly, but it seems like the best way available right now. It looks like <a title="WordPress Trac ticket #11520" href="http://core.trac.wordpress.org/ticket/11520">WordPress 3.3 might have a wp_add_js_data() function</a> , which would be much... [<a href="http://iandunn.name/passing-multi-dimensional-arrays-from-wordpress-to-javascript/">more</a>]]]></description>
			<content:encoded><![CDATA[<p>On its own <a href="http://codex.wordpress.org/Function_Reference/wp_localize_script">wp_localize_script()</a> can&#8217;t handle multi-dimensional arrays, but you can get around that by <a title="Passing PHP array to JavaScript using wp_localize_script()" href="http://www.ronakg.com/2011/05/passing-php-array-to-javascript-using-wp_localize_script/">encoding the child arrays in JSON</a>. That doesn&#8217;t handle HTML content very well, though, so another way to do it is to <a title="pass object/JSON to wp_localize_script" href="http://wordpress.stackexchange.com/questions/8655/pass-object-json-to-wp-localize-script">use the l10n_print_after parameter</a>. That&#8217;s kind of ugly, but it seems like the best way available right now. It looks like <a title="WordPress Trac ticket #11520" href="http://core.trac.wordpress.org/ticket/11520">WordPress 3.3 might have a wp_add_js_data() function</a>, which would be much nicer.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/passing-multi-dimensional-arrays-from-wordpress-to-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>admin-ajax.php Response Fails When Called from Domain Alias</title>
		<link>http://iandunn.name/admin-ajax-php-response-fails-when-called-from-domain-alias/</link>
		<comments>http://iandunn.name/admin-ajax-php-response-fails-when-called-from-domain-alias/#comments</comments>
		<pubDate>Wed, 18 May 2011 06:52:14 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Domain Alias]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[Plugin Development]]></category>

		<guid isPermaLink="false">http://iandunn.name/?p=852</guid>
		<description><![CDATA[I&#8217;m writing a WordPress plugin that uses AJAX and I had everything setup and working fine for awhile. I came back to the code a few hours later and all of the sudden I was getting a failed response, even though the code hadn&#8217;t changed. I got the correct JSON response when I loaded the... [<a href="http://iandunn.name/admin-ajax-php-response-fails-when-called-from-domain-alias/">more</a>]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m writing a WordPress plugin that uses AJAX and I had everything setup and working fine for awhile. I came back to the code a few hours later and all of the sudden I was getting a failed response, even though the code hadn&#8217;t changed. I got the correct JSON response when I loaded the URL directly in my browser, but when I made the $.post() call Firebug showed the response as completely empty.</p>
<p>It turned out that I had accidentally loaded the site via one of it&#8217;s domain aliases when I came back to it instead of using the domain that WordPress is configured with. I&#8217;m guessing that triggered the <a href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a> and Firefox blocked the response.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/admin-ajax-php-response-fails-when-called-from-domain-alias/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery document.ready() Fires Twice</title>
		<link>http://iandunn.name/jquery-document-ready-fires-twice/</link>
		<comments>http://iandunn.name/jquery-document-ready-fires-twice/#comments</comments>
		<pubDate>Thu, 24 Feb 2011 22:04:31 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://iandunn.name/workblog/?p=449</guid>
		<description><![CDATA[There&#8217;s a bug in jQuery 1.4.3 that causes <a href="http://bugs.jquery.com/ticket/7273">document.ready() to fire twice</a> if there&#8217;s an unhanded exception. You can avoid it by wrapping the code that is throwing the exception inside a try/catch block.]]></description>
			<content:encoded><![CDATA[<p>There&#8217;s a bug in jQuery 1.4.3 that causes <a href="http://bugs.jquery.com/ticket/7273">document.ready() to fire twice</a> if there&#8217;s an unhanded exception. You can avoid it by wrapping the code that is throwing the exception inside a try/catch block.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/jquery-document-ready-fires-twice/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Associative Arrays in JavaScript</title>
		<link>http://iandunn.name/associative-arrays-in-javascript/</link>
		<comments>http://iandunn.name/associative-arrays-in-javascript/#comments</comments>
		<pubDate>Thu, 23 Dec 2010 17:38:30 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://iandunn.name/workblog/?p=369</guid>
		<description><![CDATA[JavaScript doesn&#8217;t support true associative arrays, but because data types are defined as objects, the common syntax works. <a href="http://andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">This is a bad practice</a> , though. You should just create a new object.]]></description>
			<content:encoded><![CDATA[<p>JavaScript doesn&#8217;t support true associative arrays, but because data types are defined as objects, the common syntax works. <a href="http://andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">This is a bad practice</a>, though. You should just create a new object.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/associative-arrays-in-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE Pixelates Text During Javascript Animations</title>
		<link>http://iandunn.name/ie-pixelates-text-during-javascript-animations/</link>
		<comments>http://iandunn.name/ie-pixelates-text-during-javascript-animations/#comments</comments>
		<pubDate>Tue, 14 Dec 2010 18:35:17 +0000</pubDate>
		<dc:creator>Ian</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Internet Explorer]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://iandunn.name/workblog/?p=363</guid>
		<description><![CDATA[If you&#8217;re performing a JavaScript animation effect on an element (e.g., jQuery&#8217;s fadeIn/fadeOut), you may notice that the <a href="http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/">text briefly pixelates in IE</a> . You can fix that by setting a background color on the element.]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re performing a JavaScript animation effect on an element (e.g., jQuery&#8217;s fadeIn/fadeOut), you may notice that the <a href="http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/">text briefly pixelates in IE</a>. You can fix that by setting a background color on the element.</p>
]]></content:encoded>
			<wfw:commentRss>http://iandunn.name/ie-pixelates-text-during-javascript-animations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

