Listen to browser width / height changes with jQuery

Question

I have some divs that are set with position absolute (CSS) when the page is ready, and are positioned relative to another fixed div, which works fine. However, before the page is loaded and everything is set, if the page is resized, those absolute divs don't follow the changes, moving to other places, which I think they are given values relative to top and left of the screen.

The position of the relative div I use as starting point to position the absolute ones may change position as well, relative to the ones above it.

Is there any way to listen the changes in the browser's width / height in order to make those divs stay placed in the right position?

Answer 1

First you want to start with binding the window resize event to a function of your choosing.

$(window).on("resize", methodToFixLayout);

Now you can determine the new heights and widths and make adjustments to the page from there.

function methodToFixLayout( e ) {
    var winHeight = $(window).height();
    var winWidth = $(window).width();
    //adjust elements css etc.....
    //$("#someDiv").css('someProperty',someValue based on winHeight and winWidth);
}

Without more specifics on your layout it's hard to tell what changes you'll need exactly but this should get you going in the right direction.