/    Sign up×
Community /Pin to ProfileBookmark

my first javascript code

Copy linkTweet thisAlerts:
Apr 07.2005

Hello, iv’e been experimenting with javascript to create quite a simple little applet on a web page.

What i want is a little script that will run on Internet explorer that will find out the dimensions of the browser window. I need this to refresh or update when i resize the window. That’s it!

So far iv’e been instructed that i can use these variables to get the dimensions:
[B]Netscape:[/B]
window.innerWidth, window.innerHeight

[B]IE:[/B]
document.body.clientWidth, document.body.clientHeight

Playing about with these i could get the Netscape commands to display the dimensions in firefox but they would not update when i resized the window. This is the code i used:

[I]<script>[/I]
[I]var x = window.innerWidth[/I]
[I]var y = window.innerHeight[/I]
[I]document.write( x+ “, “+ y);[/I]
[I]</script>[/I]

trying the IE commands, it just gave me a blank page.

If someone can provide any help i’d greatly appreciate it. The purpose of this code is for testing purposes. It will be used to help me resize thousands of pop-up windows on an e-commerce site.

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarApr 07.2005 — [code=php]<span id="spn1"></span>
<script type="text/javascript">
if(document.all){//ie
var x = window.availWidth;
var y = window.availWidth;
}else
if(document.layers || window.opera){//netscape and opera/
var x = window.innerWidth
var y = window.innerHeight
}else{//unknown.
var x = window.width
var y = window.height
};
spn1.innerHTML = x + " X " + y;
window.onresize = function(){
if(document.all){//ie
var x = window.availWidth;
var y = window.availWidth;
}else
if(document.layers || window.opera){//netscape and opera/
var x = window.innerWidth
var y = window.innerHeight
}else{//unknown.
var x = window.width
var y = window.height
};
spn1.innerHTML = x + " X " + y;
};
</script>[/code]
Copy linkTweet thisAlerts:
@KorApr 07.2005 — [code=php]
<script language="JavaScript" type="text/JavaScript">
function showDim(){
var w; var h
if(window.innerWidth){
w = window.innerWidth;
h = window.innerHeight;
}
else if(document.getElementsByTagName('body')[0].clientWidth){
w = document.getElementsByTagName('body')[0].clientWidth;
h = document.getElementsByTagName('body')[0].clientHeight;
}
else{return false}
alert (w+'|'+h)
}
onresize=showDim;
[/code]
Copy linkTweet thisAlerts:
@achisholmauthorApr 07.2005 — thanks for the replies. I tried both by pasting between <html> tags but it gave me a blank page. Where am i going wrong?
Copy linkTweet thisAlerts:
@FangApr 07.2005 — [I]window.availWidth[/I] is incorrect. [I]availWidth[/I] is the property of [I]screen[/I]. [I]screen.availWidth[/I] and gives the width of the screen not the window.

Also read http://www.quirksmode.org/js/doctypes.html regarding cross-browser 'window' sizes

[B]Kor[/B] [I]language="JavaScript"[/I] ?
Copy linkTweet thisAlerts:
@achisholmauthorApr 07.2005 — Im actually not concerned with cross-browser issues as it is simply for testing on a machine that only has IE5 installed.

KOR and SCRAGAR, would you be able to tell me how to implement your code on an html page as i had difficulty getting it to work.

Please can you show me how to write this code for IE only, thanx
Copy linkTweet thisAlerts:
@KorApr 07.2005 — 
language="JavaScript"
[/quote]
Sorry, I still use and old "template" for HEAD pages. Anyway, it should do no harm... I'll remove the language typed, I promise
×

Success!

Help @achisholm 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.18,
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,
)...