...

View Full Version : jQuery IE problems - need expert input



sethwb
10-01-2009, 06:14 PM
Problem:

My colleague has added a jQuery script that causes images to fade out and new ones fade in when a user chooses a different color. HOWEVER, the fading effects cause IE to bug out, the images flicker but never swap and it destroys the IE PNG hack in IE6.

What I need:
-to get the jQuery fadeTo (or suitable alternative) working in all versions of IE
-to work with the PNG hack for IE6
-work with all major browsers
-work with dynamic SRC/pathnames (from Fatwire Content Server)

...




function colorSelectedUpdater() {

var whatever = $("#color-chooser ul li a");

whatever.live("click", function(){

var className = $(this).attr("class");

//var imgSrc = $(this).attr("href");

var currentColor = $(this).text();

$("#color-selected").text(currentColor);

$("#scope-stage").fadeTo("fast", .90);

$("#scope-stage").removeAttr("class").addClass(className);

$("#scope-image").fadeTo("fast", .90);

$("#scope-image").attr("src", $(this).attr("href"));

$("#scope-image").fadeTo("fast", 1);

$("#scope-stage").fadeTo("fast", 1);



return false;

}

)

}



...


<div id="scope-stage">
<img src="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" alt="" id="scope-image" />
<div id="lifestyle"><img src="/3MContentRetrievalAPI/BlobServlet?assetId=1180618133428&assetType=MMM_Image&blobAttribute=ImageFile" alt="" /></div>
</div>
</div>
<div style="visibility: hidden;clear: both;">.</div>
<div id="color-chooser">
<span id="color-name">Choose a Color ></span>
<ul>
<li class="black"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="black">Black</a></li>
<li class="burgundy"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="burgundy">Burgundy</a></li>
<li class="navy-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="navy-blue">Navy Blue</a></li>
<li class="hunter-green"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="hunter-green">Hunter Green</a></li>
<li class="gray"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="gray">Gray</a></li>
<li class="pine-green"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="pine-green">Pine Green</a></li>
<li class="ceil-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="ceil-blue">Ceil Blue</a></li>
<li class="raspberry"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="raspberry">Raspberry</a></li>
<li class="caribbean-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="caribbean-blue">Caribbean Blue</a></li>
<li class="orange"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="orange">Orange</a></li>
<li class="seafoam-green"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="seafoam-green">Seafoam Green</a></li>
<li class="ocean-blue"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="ocean-blue">Ocean Blue</a></li>
<li class="peach"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="peach">Peach</a></li>
<li class="black-edition"><a href="/3MContentRetrievalAPI/BlobServlet?assetId=1180619052969&assetType=MMM_Image&blobAttribute=ImageFile" class="black-edition">Black Edition</a></li>
</ul>
<span id="color-selected">Black</span>
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum