Question

I have a page with the following functionality: there is a large image that generates scoll (both horizontally and vertically) and a button in a fixed position (it remains in the top left corner, even with scroll) that, when clicked, fits the image to the client width.

Since position: fixed is not supported in Internet Explorer 8, I used a workaround – this is the function:

function setFixedPosition(jqueryWrapper, pixelsFromTop, pixelsFromLeft) {

    jqueryWrapper.css('position', 'absolute');

    var setOffsets = function() {
        jqueryWrapper.css("top", (($(window).scrollTop() + pixelsFromTop) + "px"));
        jqueryWrapper.css("left", (($(window).scrollLeft() + pixelsFromLeft) + "px"));
    };

    setOffsets();

    $(window).scroll(function() {
        setOffsets();
    });
}

setFixedPosition($('#zoomFitButton'), 15, 15);

This is the button’s action:

$('#zoomFitButton').click(function() {
    $('img.preview').css('width', '100%');
});

The button remains fixed both in Firefox 13 and IE8.

But, under IE8, if I am scrolling somewhere, then I click the button, the button moves to a “strange” position:

• If I scroll vertically, then click, it puts the button in the lower-left corner;
• If I scroll horizontally, then click, it puts the button in the upper-right corner;
• If I scroll both ways, then click, it puts the button somewhere in the center.

In Firefox, the button always remains in the upper-left corner (the place where I expect it to be), even after I click the fit to width button.

Here is a test page.

Is my code OK for this functionality (in principle), or I need to add something to the fit to width action (to fix my button positioning); or there is something wrong with IE (and I need a workaround – if so, any suggestions?)?

Thanks.

Answer 1

I found a solution that works in IE6 also.

I think the problem has something to do with IE not updating the scrollTop and scrollLeft positions after the document is resized.

So, after I resize the picture, I have to scroll to the upper-left corner (scrollTop(0) and scrollLeft(0)).

Unfortunately, if I have a large picture that needs vertical scrolling even when it’s fit to width, the workaround brings me to the top of the page. So I added code to bring me back proportionally to the aproximate position I was before. I wrapped the logic in a more generic function:

function doSomethingThatAffectsScrollPosition(affectingScrollPositionFunction) {

    var oldDocumentWidth = $(document).width();
    var oldScrollFromLeft = $(window).scrollLeft();

    var oldDocumentHeight = $(document).height();
    var oldScrollFromTop = $(window).scrollTop();

    affectingScrollPositionFunction();

    var newDocumentWidth = $(document).width();
    var widthRatio = (newDocumentWidth / oldDocumentWidth);
    var newScrollFromLeft = (oldScrollFromLeft * widthRatio);

    var newDocumentHeight = $(document).height();
    var heightRatio = (newDocumentHeight / oldDocumentHeight);
    var newScrollFromTop = (oldScrollFromTop * heightRatio);

    $(window).scrollLeft(0); // Needed for button repositioning
    $(window).scrollLeft(newScrollFromLeft);

    $(window).scrollTop(0); // Needed for button repositioning
    $(window).scrollTop(newScrollFromTop);
}

And I used the function in the fit to width button’s action:

$('#zoomFitButton').click(function() {
    doSomethingThatAffectsScrollPosition(function() {
        $('img.preview').css('width', '100%');
    });
});

Here is a test page.