jQuery window size

Question

we're busy writing an portfolio kind of plugin.

We need to know how we can let the script know what the size of the screen is everytime the page loads en after the window is getting resized. At the moment when the user is moving the mouse the window-size is calculated over and over. We only want this when the page is loaded for the first time and after it's resized.

What would be the best solution? Thanks!

$(document).on("mousemove", function (event) {
    var mouseposX = event.pageX;
    var mouseposY = event.pageY;
    windowX = $(window).width();
    windowY = $(window).height();
    offsetX = Math.round(-(mouseposX / windowX * (blokjeContainerWidth - windowX)));
    offsetY = Math.round(-(mouseposY / windowY * (blokjeContainerHeight - windowY)));
});

This is the link to the example : portoflio

Zach Saucier · Accepted Answer · 2013-11-07T14:31:50.100

1

Try using the resize function on the window object. Then you can call the function on load using .resize()

$(window).resize(function() { 
    var mouseposX = event.pageX;
    var mouseposY = event.pageY;
    windowX = $(window).width();
    windowY = $(window).height();
    offsetX = Math.round(-(mouseposX / windowX * (blokjeContainerWidth - windowX)));
    offsetY = Math.round(-(mouseposY / windowY * (blokjeContainerHeight - windowY)));
}).resize();

edited Nov 07 '13 at 14:31

answered Nov 07 '13 at 14:25

Zach Saucier

24,871
12
85
147

1

You could call the resize function right after you bind it to simulate an onLoad event, it would save the duplicate code. `$(window).resize (function () { ... }).resize ();`. – TreeTree Nov 07 '13 at 14:29

score 1 · Answer 2 · answered Nov 07 '13 at 14:26

Instead of binding it to the mousemove event, just call the calculation on either $(document).ready() (after DOM ready) or $(window).load() (after resources are loaded).

Then bind your code above to the window resize event instead of mousemove. You may also want to look into throttling / debouncing jQuery plugins as the firing of resize event is not consistent across different browsers.

score 0 · Answer 3 · answered Nov 07 '13 at 14:33

You can get the info pretty easily with jquery

var ww = $(window).width();//initial width
var wh = $(window).height();//initial height 
$(window).on('resize', function() {
    ww = $(this).width();//new width
    wh = $(this).height();//new height
});

So with that, you would just need to change x and y value to this:

windowX = ww;
windowY = wh;

I added reporting to a fiddle, so you can see the values as they update.

http://jsfiddle.net/filever10/CWhzM/

jQuery window size

3 Answers3