Resize javascript window

Question

How would I apply a resize event to this code, so it gets the new height of window if its changed

$(document).ready(function() {
    $("#page").height($(window).height()); 
});

Duplicate of [Javascript window resize event](http://stackoverflow.com/questions/641857/javascript-window-resize-event)? — Nightfirecat, Sep 02 '11 at 07:23
@Nightfirecat: not really. The other one is more about the event per se... this one is just related to it. — Robert Koritnik, Sep 02 '11 at 08:24

score 4 · Accepted Answer · answered Sep 02 '11 at 07:23

4

$(function() {

    $(window).resize(function(){
        $("#page").height($(this).height());
    }).resize();

});

As you may see I've also shortened the $(document).ready(function(){}) by simply doing the $(function(){}).

answered Sep 02 '11 at 07:23

Robert Koritnik

97,460
50
267
388

2

Thanks champ, this was the most elegant solution. – Uriah Sep 02 '11 at 07:32

score 0 · Answer 2 · answered Sep 02 '11 at 07:23

0

$(window).resize(function() { 
  $(document).ready(function() {
        $("#page").height($(window).height()); 
  });
});

Should work fine.

OR [better formatting]

function resizePage()
{
      $(function() {
            $("#page").height($(window).height()); 
      });
}

$(window).resize(function() { resizePage(); });

answered Sep 02 '11 at 07:23

Marc Uberstein

12,143
3
41
68

Yes, to make sure the code will only run on dom ready. incase user resizes window while loading. [is this problematic?] – Marc Uberstein Sep 02 '11 at 07:34
1

Why not contain it within the DOM Ready event handler then? So it will always run when DOM is already ready? It's not problematic, but it seems strange, unreadable and checks DOM ready every time a window resize fires instead of binding the event on DOM ready and just executing the resize afterwards on every resize (without any additional checks). – Robert Koritnik Sep 02 '11 at 08:22
Thanks bro, will implement it like you said in future coding. :) – Marc Uberstein Sep 02 '11 at 08:33

score 0 · Answer 3 · edited Sep 02 '11 at 11:19

0

$("#page").click(function () {  
  showHeight("window", $(window).height());  
});

http://api.jquery.com/height/

Make sure its at the bottom of the page.

edited Sep 02 '11 at 11:19

genesis

48,512
18
91
118

answered Sep 02 '11 at 07:24

Wilkins

179
1
4
13

Resize javascript window

3 Answers3