/    Sign up×
Community /Pin to ProfileBookmark

Retrieving window’s width and height

Copy linkTweet thisAlerts:
May 01.2007

i’m having a bit of trouble with this code:

function WindowSizeListener(){
var wWidth;
var wHeight;
wWidth = window.innerWidth;
wHeight = window.innerHeight;
window.addEventListener(“onchange”, ChangeSearchHeight(wHeight), false);
}

the error message i get from the firefox console says that it “can’t convert the JavaScript argument”. basically what i’m trying to do is retrieve the height of the window so i can pass it to a function that will change the height of an element based on the height of the window. any help is appreciated, thanks in advance.

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisMay 01.2007 — There is no "onchange" event assigned for the "window" object. Did you mean something like "onresize" or "onload"?
Copy linkTweet thisAlerts:
@mrhooMay 01.2007 — addEventListener, unlike attachEvent, does not prefix 'on' to the event type.

I think you are going to have trouble passing the argument in the handler-

the scope of the event is not the function you define it in, but the window, which doesn't have a reference to the local variable.

Use window.addEventListener("resize", ChangeSearchHeight, false);

and get the window dimensions in the handler-

Or pass an anonymous function as the second argument.
Copy linkTweet thisAlerts:
@snowrhythmauthorMay 01.2007 — thanks! onresize totally worked...but now i have another problem: it doesn't work in internet explorer. any ideas on this?
Copy linkTweet thisAlerts:
@snowrhythmauthorMay 01.2007 — ah, i'll try just resize...and i'll grab the size in the handler function. thanks alot.
Copy linkTweet thisAlerts:
@snowrhythmauthorMay 01.2007 — ok, it works like a charm in firefox but still doesn't work in IE. does IE have some crazy ways of handling javascript that i could get around?

here the updated code:

[javascript]

function WindowSizeListener(){

window.addEventListener('resize', ChangeSearchHeight(), false);

}

function ChangeSearchHeight(){

var newHeight;

var getFrameId;

var newFrameSize;

var getId;

var heightNo;

var widthNo;

heightNo = window.innerHeight;

widthNo = window.innerWidth;

getId = document.getElementById('retrieved');

getFrameId = document.getElementById('bodydiv');

newHeight = getId.setAttribute('style', '{height:' + (heightNo - 175) + ';}');

newFrameSize = getFrameId.setAttribute('style', '{width:' + (widthNo - 250) + '; height:' + (heightNo - 175) + ';}');

}

[/javascript]
Copy linkTweet thisAlerts:
@gil_davisMay 01.2007 — IE does not support window.innerHeight or window.innerWidth.

For IE, you could use document.body.clientHeight/Width or document.body.offsetHeight/Width.
Copy linkTweet thisAlerts:
@snowrhythmauthorMay 02.2007 — Alright, this is what i have, and it still isn't working in IE:

<i>
</i>
function WindowSizeListener(){

<i> </i>if(window.addEventListener){
<i> </i> window.addEventListener('resize', ChangeSearchHeight(), false);
<i> </i>} else { // use the code below for explorer
<i> </i> document.attachEvent('onResize', ChangeSearchHeight(), false);
<i> </i>}

}

function ChangeSearchHeight(){
var newHeight;
var getFrameId;
var newFrameSize;
var getId;
var heightNo;
var widthNo;
if(window.innerHeight){
heightNo = window.innerHeight;
widthNo = window.innerWidth;
getId = document.getElementById('retrieved');
getFrameId = document.getElementById('bodydiv');
newHeight = getId.setAttribute('style', '{height:' + (heightNo - 175) + ';}');
newFrameSize = getFrameId.setAttribute('style', '{width:' + (widthNo - 250) + '; height:' + (heightNo - 175) + ';}');
} else { // use the code below for explorer
heightNo = document.body.clientHeight;
widthNo = document.body.clientWidth;
getId = document.getElementById('retrieved');
getFrameId = document.getElementById('bodydiv');
newHeight = getId.setAttribute('style', '{height:' + (heightNo - 175) + ';}');
newFrameSize = getFrameId.setAttribute('style', '{width:' + (widthNo - 250) + '; height:' + (heightNo - 175) + ';}');
}
}

Copy linkTweet thisAlerts:
@gil_davisMay 02.2007 — document.attachEvent('onResize', ChangeSearchHeight(), false);[/quote]Change to:window.attachEvent('onresize', ChangeSearchHeight);The case of the event is ImPoRtAnT, and no parentheses on the function. ?
Copy linkTweet thisAlerts:
@snowrhythmauthorMay 02.2007 — ok, took care of that and still doesn't shape up (rebellious browser if you ask me) .... is everything ok with my handler?
Copy linkTweet thisAlerts:
@gil_davisMay 02.2007 — Instead of:newHeight = getId.setAttribute('style', '{height:' + (heightNo - 175) + ';}');

newFrameSize = getFrameId.setAttribute('style', '{width:' + (widthNo - 250) + '; height:' + (heightNo - 175) + ';}');[/quote]
Maybe this would work:getId.style.height = (heightNo - 175) + "px";
getFrameId.style.width = (widthNo - 250) + "px";
getFrameId.style.height = (heightNo - 175) + "px";Actually that code should work for both browsers and save yourself some code.
Copy linkTweet thisAlerts:
@snowrhythmauthorMay 04.2007 — yeah i like that, alot cleaner. i went on vacation so i can't test that out yet to see if it works, but i'll check as soon as i get back. thanks!
×

Success!

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