Dynamically resize element with window size jquery

Question

I've looked at many questions regarding this subject and can not seem to find out what is wrong with my code. Any help would be greatly appreciated!

$(window).resize(function(){
   var newwidth = $(window).innerWidth();
   var newheight = $(window).innerHeight();      
   $("#element").height(newheight).width(newwidth);
       });

I'm trying to resize #element to the same height and width as the window if the window is resized.

Help me, http://stackoverflow.com/questions/33360273/window-disptachevent-resizing-issue — Phoenix Haroz, Oct 27 '15 at 06:24

Engineer · Accepted Answer · 2012-07-06T17:50:19.600

13

About .innerWidth(), from docs:

This method is not applicable to window and document objects; for these, use .width() instead.

There is same note for .innerHeight() also.

So you need to use .width() and .height():

$(window).resize(function(){
    var newwidth = $(window).width();
    var newheight = $(window).height();      
    $("#element").height(newheight).width(newwidth);
});

edited Jul 06 '12 at 17:50

answered Jul 06 '12 at 17:41

Engineer

47,849
12
88
91

thanks for the response. It's interesting because if I alert(newwidth) i do get the correct width. – d-_-b Jul 06 '12 at 17:41
@Tyrsius Maybe there is a cross-browser compatibility problem. – Engineer Jul 06 '12 at 17:45
@Engineer that's possible. I am using Chrome. – Kyeotic Jul 06 '12 at 17:46
1

@MinaGabriel If `inner(Width|Height)` works on Chrome, it does not mean,it will work on all browsers. – Engineer Jul 06 '12 at 17:57

score 1 · Answer 2 · answered Jul 06 '12 at 17:41

1

try this:

$(window).resize(function(){
   var newwidth = $(window).width();
   var newheight = $(window).height();      
   $("#element").css({"height": newheight, "width": newwidth });
});

answered Jul 06 '12 at 17:41

Ram

143,282
16
168
197

score 1 · Answer 3 · answered Jul 06 '12 at 17:44

In plain Javascript you can do this:

    var viewportwidth;
    var viewportheight;

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
    {
         viewportwidth = document.documentElement.clientWidth,
         viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else
    {
         viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
         viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
    var mydiv = document.getElementById("element");
    mydiv.style.height=viewportheight'px';
    mydiv.style.width=viewportwidth+'px';

score 1 · Answer 4 · answered Jul 06 '12 at 17:47

jsFiddle

 $(window).resize(function(){
var newwidth = $(window).width();
var newheight = $(window).height();      
$("#element").height(newheight).width(newwidth);
  });

both works for me

update

 $(window).resize(function(){
var newwidth = $(window).innerWidth();
var newheight = $(window).innerHeight();      
$("#element").height(newheight).width(newwidth);
  });

score 0 · Answer 5 · edited Nov 19 '12 at 09:06

0

You can always just use CSS:

#element {width:100%; height:100%; position:fixed; }

edited Nov 19 '12 at 09:06

Alexis Pigeon

7,423
11
39
44

answered Jul 06 '12 at 17:43

Control Freak

12,965
30
94
145

downvote? this does the same thing the Op has in their code, except without the jQuery. – Control Freak Jul 06 '12 at 17:46

Dynamically resize element with window size jquery

5 Answers5

Linked