javascript image resize window

Question

I have a problem with a JavaScript I'm developing for my website. I have images which opens on hovering over them.

First my script calculates if the image should be displayed on the right or on the left of my window:

$("html,body").live("mousemove", function (e) {
    //console.log("mousemove: "+e.pageX)  
    var width_window = $(window).width();
    var center = width_window / 2;
    if (e.pageX < center) {
        side = 'left';
    } else {
        side = 'right';
    }
});

Then, once we know on which side of the window the image will be displayed, I have another script to resize the image, depending of the height & width of my window, including the margins:

this.resizeImg = function (img, offset) {
    var d = new Date();
    //console.log(d, side);

    var window_height = $(window).height();
    var img_height = $(img).height();
    var img_top = $(img).offset().top;

    var window_width = $(window).width();
    var img_width = $(img).width();
    var img_left;
    side == 'left' ? img_left = offset.left : img_left = window_width - offset.left;

    console.log(window_width, img_left)
    var image_resize_height = window_height - img_top - 20;
    var image_resize_width = window_width - img_left - 20;

    if (img_height + img_top > window_height && img_width + img_left > window_width) {
        console.log("h w")

        if (image_resize_width > image_resize_height) {
            $(img).css('height', image_resize_height + 'px').css("width", "auto");
        } else {
            $(img).css('width', image_resize_width + 'px').css("height", "auto");
        }

    } else if (img_height + img_top > window_height) {
        //console.log("h")
        $(img).css('height', image_resize_height + 'px').css("width", "auto");
    } else if (img_width + img_left > window_width) {
        //console.log("w")
        $(img).css('width', image_resize_width + 'px').css("height", "auto");
    } else {
        //console.log("non")
    }
};

It almost works, but sometimes my images exceed the window width or height. I can't find the solution...

Here is my CSS:

.vignette {
        max-height: 800px;
        max-width : 800px;
        z-index : 2;
        top : 25px;
}

.info{
    position : relative;
}

.info img {
    position : absolute;
    display : none;
    cursor : pointer;
}

My full script in jsFiddle: http://jsfiddle.net/CrnNZ/

Here is the link to my website : http://olivierlellouche.com/

Thanks a lot for your help !

Answer 1

Are you taking care of the fact that you are moving the image down 25px in:

.vignette {
    top : 25px;
}

The only height adjustment I see is 20px :

var image_resize_height = window_height - img_top - 20;

You may just need to subtract few more pixels to your calculations?

Or better yet:

var img_top = $(img).offset().top;

May be top of the offset area and not the raw top of the image . In which case, you still need to subtract 25px for that.

(From your website) The other thing that may be useful is to always enable, or always disable the vertical scroll-bar on the right. Or re-size the text area to be smaller than the available area when their isn't a scroll-bar. (Unfortunately, I could not get your jsfiddle to work at all and the only error from their I could view was vertical calculation errors. I could not see any horizontal errors.)

Does the problem continue if you subtract a few more pixels off the height?

I can't tell from your code but, does it place the image then re-size it? It may be better idea to calculate the size available before trying to place the image, that way it never changes sizes once it is placed.

EDIT:

After looking at your webpage with much smaller sized window I thought of something else. $(window).height() is not the same as $(document).height() . See: $(window).height() vs $(document).height You may need to calculate the remaining page differently if they are not the same.