Question

I have a page with a bunch of thumbnails. I use DIV with background images for the thumbnails. When I hover, I have a jQuery script that animates the DIV to expand the div to the full width of the images. The expansion is in all direction, it expands from the center with some margin and top/left positioning.

Problem is: if I hover on the image that sits right at the top of the page, the image expands but we only see the bottom half because it expanded outside the viewport.

Do you know of a solution to restrict the expansion to the viewport, or to a containing DIV..?

Here’s the code I have:

$("div.thumbnail").hover(function() {

    $margintop = '-70px';  // half the height of big img minus margins/paddings
    $marginleft = '-115px';  // half the width of big img minus margins/paddings
    $width = '348px';
    $height = '258px';

    $(this).css({'z-index' : '1000'});
    $(this).addClass("hover").stop().animate({
        marginTop: $margintop,
        marginLeft: $marginleft,
        scrollTop: 0,
        width: $width,
        height: $height
    }, 200);

    } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop().animate({
            marginTop: '10px',
            marginLeft: '10px',
            top: '0',
            left: '0',
            width: '100px',
            height: '100px'
        }, 150);
});

Answer 1

I would look at the attributes top, left, right and bottom of the wrapper div of which the images are not to be displayed outside, see if the image max size positions would go past these coordinates and shift the image accordingly to the pixels it exceeds the border with.