<?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>Nashville Interactive &#187; IE workarounds</title>
	<atom:link href="http://www.nashvilleinteractive.com/blog/category/ie-workarounds/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.nashvilleinteractive.com</link>
	<description>Nashville Web Design</description>
	<lastBuildDate>Wed, 18 Jan 2012 15:49:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Internet Explorer and the Get Method.</title>
		<link>http://www.nashvilleinteractive.com/blog/internet-explorer-jquery-and-the-get-method/</link>
		<comments>http://www.nashvilleinteractive.com/blog/internet-explorer-jquery-and-the-get-method/#comments</comments>
		<pubDate>Sat, 18 Apr 2009 22:33:33 +0000</pubDate>
		<dc:creator>Chris Bradshaw</dc:creator>
				<category><![CDATA[IE workarounds]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[fading image transition]]></category>
		<category><![CDATA[Get method]]></category>
		<category><![CDATA[Internet Explorer]]></category>

		<guid isPermaLink="false">http://www.nashvilleinteractive.com/blog/?p=21</guid>
		<description><![CDATA[One issue with IE is that it doesn't return anything when calling the get method. With some insight from a friend and colleague, I was able to work around IE's failure to return anything when using the get method by using hidden divs and the load function to create a simple fade transition for images.]]></description>
			<content:encoded><![CDATA[<p>One thing all web designers and developers have to deal with on a daily basis is the dreaded Internet Explorer and it&#39;s poor handling of web standards. For whatever reason IE has numerous issues that are hard to deal with. One of those issues is that IE doesn&#39;t return anything when calling the get method. Unfortunately I didn&#39;t realize this until I had already built out a nice fade transition for my portfolio only to find that it didn&#39;t work at all in IE 7 or below. (haven&#39;t tried IE 8 yet).</p>
<p>I&#39;ll preface this by stating that I&#39;m not a developer&#8230; With some insight from friend and collegue <a href="http://jacksongabbard.com" target="_blank">Jackson Gabbard</a>, I was able to work around IE&#39;s failure to return anything from Get by using hidden divs and the load function. It goes something like this: 1. Hide a div. 2. add a blank image tag to that div. 3. load an image into that image tag. 4. once that image is done loading, show the hidden div.</p>
<p>Here&#39;s roughly the jQuery I used to get this done:</p>
<blockquote><p>$(document).ready(function(){</p>
<p>function fadeInImg() {<br />
$(&quot;#port_wrapper&quot;).fadeIn(2000);<br />
}<br />
$(&quot;#portfolio img&quot;).click(function(){ // any image  inside the portfolio div calls this function on click (div that holds the thumbnails)</p>
<p>var id = $(this).attr(&quot;id&quot;);  // used to determine which image to get based on the thumbnail image id attribute</p>
<p>$(&quot;#port_wrapper&quot;).fadeOut(2000, loadPortImg);  // fade out current image (if any) from the  and calls the img loading function</p>
<p>function loadPortImg() {<br />
$(&quot;#port_wrapper&quot;).empty();  // clear any imaage currently loaded. (#port_wrapper holds the large images)<br />
$(&quot;#port_wrapper&quot;).append(&quot;<img id="loaded_img" alt="" />&quot;);  // add new empty image tag as loading &quot;shell&quot;</p>
<p>$(&quot;#loaded_img&quot;).load(function() {  // once the loaded_img div is fully loaded call fadeInBg funciton<br />
fadeInImg();</p>
<p>});</p>
<p>$(&quot;#loaded_img&quot;).attr(&quot;src&quot;,&quot;images/&quot; + id + &quot;.jpg&quot;);  // now add the selected img src to the appended img tag (once this loads fully the fadeInBg function is called</p>
<p>} // stop loadPortImg function</p>
<p>});  // stop thumbnail click function</p>
<p>}); //stop jquery</p></blockquote>
<p>Here&#39;s roughly the HTML I used to get this done: NOTE &#8211; the thumbnail image id attribute MUST be the same as the large image filename sans the &quot;.jpg&quot; file extension.</p>
<blockquote><p>&lt;div id=&quot;portfolio&quot;&gt;<br />
&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/thumb.jpg&quot; alt=&quot;Website Design icon&quot; title=&quot;Some Website Design&quot; id=&quot;somePortImgTitle&quot; width=&quot;50&#8243; height=&quot;50&#8243; /&gt;&lt;/a&gt;<br />
&lt;/div&gt; &lt;!&#8211; stop portfolio div &#8211;&gt;</p>
<p>&lt;div id=&quot;port_wrapper&quot;&gt;&lt;/div&gt; &lt;!&#8211; stop content_container &#8211;&gt;</p></blockquote>
<p>Like I said, I&#39;m not a developer so there may be an easier way to get around this IE/get issue but this seems to work pretty well for me. Also excuse any mistyped terminology.<br />
<a href="/examples/IEget.html" target="_blank">click here for a working example</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.nashvilleinteractive.com/blog/internet-explorer-jquery-and-the-get-method/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

