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 !

score 0 · Answer 1 · edited May 23 '17 at 11:50

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.

thanks Abaines, I did some corrections in my code already, I need to check for $(window).height() and $(document).height(). thanks for your help, I'll let you know — mmdwc, Oct 16 '13 at 11:10

javascript image resize window

1 Answers1