Hi, I just started learning jQuery and wrote this script to make an image enlarge when you click on it and return to normal when clicked on again.
However, to make it return gracefully to its original position, I need to record of its top and left properties. The script works fine in Firefox, but IE sets the top and left to auto, as soon as I set the css position to absolute, so I can't use those values. I can I get a workaround for this? Here is the code: [code] $(document).ready(function(){ var w; var h; var t; var l; var open = false; var oldsrc; $("img").toggle( function() { if (!open) { open = true; oldsrc = $(this).attr('src'); var newsrc = oldsrc.replace(".jpg","")+"_large.jpg"; $(this).attr({'src':newsrc,'title':'Click to close'}); $(this).css('position', 'absolute'); t = $(this).css('top'); l = $(this).css('left'); w = $(this).width(); h = $(this).height(); var newH = h / w * 800; $(this).animate({width: "800",height: newH, top:"20",left:"20"}, 750, function() { $(this).css({border:"2px yellow solid"}); }); } },function() { var src = $(this).attr('src'); if (src.indexOf("_large") != -1) { $(this).animate({width: w,height: h,top:t,left:l},750,function(){ $(this).css('position','static'); $(this).css({border:"1px black solid"}); $(this).attr({'src':oldsrc, 'title':'Click to enlarge'}); }); open = false; } } ); }); [/code] Thanks