CODEWITHSUNDEEP
javascriptjquery
user589533
user589533

Reputation: 41

$(window).width() and $(window).height() return NULL -JQuery

I want to get the size of browser window using $(window).width() and $(window).height() functions. However this two return null. the $(window) is not null, it's returning "object". I have tried also using $(document).width() and $(document).height(), this two do not return null, they are returning specific values, but they are bigger than the window size. Any idea why the $window 2 values are null?

$(window).load(function () {

            var view = $("#view");
            var image = $("#image");
            var hiResImage = $("#hi-res-image"); 
            var zoom = $("<a id='zoom'><span><br /></span></a>");
            log("ERROR 1 = " + $(window).width());
            log("ERROR 1 = " + $(window).height());
            log("ERROR 1 = " + $(window));
            image.width($(window).width());
            image.height($(window).height());

.....

Should I initialize somw how the $(window) variable?

Upvotes: 3

Views: 15657

Answers (2)

tobias86
tobias86

Reputation: 5029

I played around on the console in Google Chrome and the following works for me:

$(window).attr('screen').height

and 

$(window).attr('screen').width

EDIT: See jon_darkstar's answer. The $(window) function is a jQuery selector which returns a DOM element. In order to access the properties of the object you need to use the .attr() method. I tend to agree with jon_darkstar, Occam's Razor dictates that vanilla JS is most probably the best way to go, and thus gets my vote. But if you really want to use jQuery, the above will work.

Upvotes: 2

jon_darkstar
jon_darkstar

Reputation: 16768

Just like commenters, I'm not sure why that doesn't work, but this can be done in vanilla JS and the window object without jQuery so you might have better luck with that. Could circumvent some issues with jQuery versions, browser compatability, etc 

window.innerWidth   //just the actual document window
window.innerHeight
window.outerWidth   //includes brother toolbars, status bar, etc
window.outerHeight

I'd still recommend you investigate why what you oroginally tried isnt working, bc whatever the root problem is it will probably manifest itself again elsewhere.

Upvotes: 6

Related Questions