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, wich 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, wich 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.

Thanks in advance!

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.

Answer 2

It may not be necessary to use JavaScript if you only need to position your element(s) relative to another element instead of the overall document. You can use "position:relative":

<div id="myContainer" style="position:relative">

    <div id="myElement" style="position:absolute;left:100px;"></div>

</div>

Because myContainer has position:relative, myElement will be positioned absolutely but relative to myContainer instead of relative to the overall document. Armed with this, you can construct quite elaborate, but robust positions that will be browser-size-agnostic.

Answer 3

There is also this plugin from jqui website.

http://www.jqui.net/jquery-projects/jquery-mutate-official/

here is demo: http://www.jqui.net/demo/mutate/

hope it helps.