Jump to content

get browser window innerHeight on load


george
 Share

Recommended Posts

My failed attempt to get the window height

<script type="text/javascript">window.onload = function() {	var availHeight = window.innerHeight;	alert(availHeight);}</script>

This returns 'undefined' in the alert box. Could this be that the document is not fully loaded? Would the jQuery method of running js after the page is loaded be better? Or is this an issue of proper js coding, versus what I did?

Link to comment
Share on other sites

I believe that Explorer versions less than 9 do not support that property. This might help:

function windowSize () {	var myHeight = 0, myWidth = 0;	if (window.innerHeight) {		myHeight = window.innerHeight;		myWidth = window.innerWidth;	}	else if (document.documentElement) {		if (document.documentElement.clientHeight) {			myHeight = document.documentElement.clientHeight;			myWidth = document.documentElement.clientWidth;		}	}	return {w: myWidth, h: myHeight};}

Edited by Deirdre's Dad
Link to comment
Share on other sites

{w: myWidth, h: myHeight} is written in JSON, and represents an associative array, or object (same thing in JavaScript), with two indices, "w", and "h", that are assigned the values myWidth and myHeight respectively. The line is the same as writing:

var dimensions = new Object();dimensions.w = myWidth;dimensions.h = myHeight;return dimensions;

... just much shorter.

Link to comment
Share on other sites

I believe that Explorer versions less than 9 do not support that property. This might help:
function windowSize () {	var myHeight = 0, myWidth = 0;	if (window.innerHeight) {		myHeight = window.innerHeight;		myWidth = window.innerWidth;	}	else if (document.documentElement) {		if (document.documentElement.clientHeight) {			myHeight = document.documentElement.clientHeight;			myWidth = document.documentElement.clientWidth;		}	}	return {w: myWidth, h: myHeight};}

Actually, documentElement.clientHeight does not work either. It returns 0. I have not found a property that will return the window dimensions in IE. Document dimensions I can get using document.body.clientHeight/Width though.EDIT: Turns out it does work....after a refresh. For some reason it does not pull the dimensions onload the first time..... :) Edited by ShadowMage
Link to comment
Share on other sites

Actually, documentElement.clientHeight does not work either. It returns 0. I have not found a property that will return the window dimensions in IE. Document dimensions I can get using document.body.clientHeight/Width though.EDIT: Turns out it does work....after a refresh. For some reason it does not pull the dimensions onload the first time..... :)
weird caching issue? Perhaps the value isn't available onload because the whole document needs to load first. Once the DOM has been created, then you can check for it's dimensions? Perhaps if there was a window.onFinishedLoading, but then you would just be better off probably using document.ready in jQuery.
Link to comment
Share on other sites

I would assume it's triggered onload, but not after everything is in the DOM (onload means start IMO, not loaded). If that was the case, you could have document.getElementById expressions in the head, but we know that doesn't work until the that particular element has been loaded. Hence why often times these "onload" statements are put at the end of the document, or when using jquery, in the document.ready event. As it relates to this situation, the window size is calculated until every element has been added, and then a complete inventory can be made. Since onload happens before all that, a complete inventory is unavailable. however, once you refresh, all the information has been cached, assuming no DOM manipulation has been done through the page (im assuming) and thus the value is avilable. I'm guessing if you added a function that returned the dimensions after the complete page loaded, by adding it to an onlick event to an HTML element, the dimensions would be returned.

Link to comment
Share on other sites

I'm guessing if you added a function that returned the dimensions after the complete page loaded, by adding it to an onlick event to an HTML element, the dimensions would be returned.
That does indeed work. However, I think you are confused as to what window.onload is. When you do something like this:window.onload = function() { alert(document.getElementById("TestElement").innerHTML); }......<div id='TestElement'>This is a test</div>It works because the window.onload event does fire after the DOM has loaded. Though, in IE, the window dimensions seem to not be populated right away. :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...