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

Reply via email to