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 pa

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.