/    Sign up×
Community /Pin to ProfileBookmark

reading window size

Copy linkTweet thisAlerts:
Jan 17.2003

I have been trying to explore how to read the width and height for a window. I see there is an object innerWidth and innerHeight for window. I tried to print window.innerWidth and I get undefined printed instead of the window value.

Ultimately, I have a cascasing menu that has an image button. Depending on the window size, the button moves from where I want it. I need to be able to control it if I can determine the size of the window. I hope.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesJan 17.2003 — [font=georgia][font=monospace]Window.innerHeight[/font] and [font=monospace]Window.innerWidth[/font] are Netscape specific.[/font]
Copy linkTweet thisAlerts:
@mawoodJan 17.2003 — I don't know how well this works in Netscrape:

<script language="JavaScript">

<!--

var width = 800, height = 600; // defaults

width = document.body.clientWidth;
height = document.body.clientHeight;


alert("width is " + width + " and height is " + height);

//-->

</script>
Copy linkTweet thisAlerts:
@gil_davisJan 17.2003 — Those are Netscape properties. Are you using Netscape?

IE does not expose very many window properties. You have to use document.body.offsetWidth and document.body.offsetHeight.
Copy linkTweet thisAlerts:
@swonJan 17.2003 — For IE and NS

<script language="JavaScript">

<!--

//for IE

width = document.body.clientWidth;

height = document.body.clientHeight;

// NS

//width = window.innerWidth;

//height= window.innerHeight;

alert(width +"x"+height);

//-->

</script>
Copy linkTweet thisAlerts:
@mawoodJan 17.2003 — or...

<script language="JavaScript"><!--

var width = 640, height = 480;

if (document.layers) {

width = window.innerWidth;

height = window.innerHeight;

}

else if (document.all) {

width = document.body.clientWidth;

height = document.body.clientHeight;

}

alert("wide = " + width + "high = " + height);

//--></script>



I hope this helps and Charles approves.
Copy linkTweet thisAlerts:
@ikearndtauthorJan 17.2003 — Wow... This was the first time i posted a question. You were all great. Thank You.

Now I need to figure out how to use this information.


My web site is www.wvcn.org
Copy linkTweet thisAlerts:
@ikearndtauthorJan 17.2003 — I was all excited until I put it into practice. I need to have the information in the header area of my code. I need to generate the window width there before i create my menus.

Any help there?
Copy linkTweet thisAlerts:
@mawoodJan 17.2003 — <script language="JavaScript"><!--

function booyaa(){

var width = 640, height = 480;

if (document.layers) {

width = window.innerWidth;

height = window.innerHeight;

}

else if (document.all) {

width = document.body.clientWidth;

height = document.body.clientHeight;

}

alert("wide = " + width + "high = " + height);

}

//--></script>


<body onload="booyaa();">
Copy linkTweet thisAlerts:
@ikearndtauthorJan 18.2003 — I was able to make that work. Sad I wasn't able to think that up myself. ha-ha?
×

Success!

Help @ikearndt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...