Geek asks and answers

Dynamic element size with jquery window size

I looked through a lot of questions on this subject and cannot understand 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 am trying to resize #element to the same height and width as the window if the window is resized.

+5
source share
5 answers

Oh .innerWidth(), the docs :

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

There is also a note for .innerHeight().

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

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

try the following:

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

CSS:

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

Javascript :

    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';
+1

jsFiddle

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

both work for me

update

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

More articles:


All Articles