Page 1 of 1
Jquery event resize for window.
Posted: Mon Apr 02, 2007 3:20 pm
by JellyFish
Code: Select all
$(window).resize(function () {
$("#bodyContainer").height(window.innerHeight - 30);
});
When I resize my window in firefox it goes as planned. But when I resize my window in IE7(probably IE6 too, I don't have IE6 anymore) I get this error:
Microsucks IE7 wrote:Line: 13
Char: 6
Error: Invalid argument
Code: 0
URL:
http://localhost
Basically height()'s argument is invalid. Why is it invalid???
Posted: Mon Apr 02, 2007 4:00 pm
by Buddha443556
If I'm not mistaken IE doesn't support window.innerHeight. Check out document.body.clientHeight or document.documentElement.clientHeight instead for IE.
Posted: Mon Apr 02, 2007 4:29 pm
by JellyFish
I tried switching it over from window.innerHeight to document.body.clientHeight and IE doesn't react and firefox keeps shrinking 30px every time I resize, apparently.
Any other suggestions?
Posted: Mon Apr 02, 2007 4:56 pm
by Buddha443556
You got one more to try, "document.documentElement.clientHeight". You will have to do some browser sniffing for IE. I think just about every other browser is happy with "window.innerHeight" in this case IE is just the oddball.
Edit: Check out
http://www.howtocreate.co.uk/tutorials/ ... wserwindow
Posted: Mon Apr 02, 2007 5:01 pm
by Luke
I think you're going about it wrong. jQuery generally abstracts about 99% of all of that browser garbage. Have you tried:
Code: Select all
$(window).resize(function () {
var bodyheight = $("body").height() - 30;
$("#bodyContainer").height(bodyheight);
});
Wait until Kieran sees this... I bet he'll say "DO THIS AND THIS" and you'll be like "Whoa!".
Posted: Mon Apr 02, 2007 5:09 pm
by Buddha443556
The Ninja Space Goat wrote:I think you're going about it wrong. jQuery generally abstracts about 99% of all of that browser garbage. Have you tried:
Code: Select all
$(window).resize(function () {
var bodyheight = $("body").height() - 30;
$("#bodyContainer").height(bodyheight);
});
Wait until Kieran sees this... I bet he'll say "DO THIS AND THIS" and you'll be like "Whoa!".
I'm already like Whoa! Didn't even know there was a height function in the CSS API.
Posted: Tue Apr 03, 2007 1:10 am
by Kieran Huggins
My solution is going to be a little disappointing... the "document" resizes depending on your content (not the window), and browsers disagree about the viewport's size properties.
document.documentElement.clientHeight seems to be the most reliable property cross browser these days:
Code: Select all
$(window).resize(function () {
$("#bodyContainer").height(document.documentElement.clientHeight - 30);
});
There's a nice comparison of all the properties here:
http://www.howtocreate.co.uk/tutorials/ ... wserwindow
Posted: Tue Apr 03, 2007 2:56 am
by Luke
Posted: Tue Apr 03, 2007 12:30 pm
by JellyFish
Keiran's solution does work. Although, I think it may not work in safari.
Code: Select all
$(window).resize(function () {
$("#bodyContainer").height(document.documentElement.clientHeight - 30);
});
Works in Firefox, Opera and IE7. These are the only browsers I have to test on this computer.
I used BrowserCamp to see what it looked like in safari and it doesn't appear to work.
What property would I use for safari?
Posted: Tue Apr 03, 2007 10:46 pm
by Kieran Huggins
Code: Select all
$(window).resize(function () {
if(window.innerHeight){
wh = window.innerHeight;
}elseif(document.documentElement.clientHeight>0){
wh = document.documentElement.clientHeight;
}else{
wh = document.body.clientHeight;
}
$("#bodyContainer").height(wh - 30);
});

Posted: Sat Apr 07, 2007 2:25 pm
by JellyFish
Thanks kieran. But one more problem:
Code: Select all
$(window).resize(function () {
if(window.innerHeight){
wh = window.innerHeight;
}else if(document.documentElement.clientHeight>0){
wh = document.documentElement.clientHeight;
}else{
wh = document.body.clientHeight;
}
$("#bodyContainer").height(wh - 30);
});
$("#bodyContainer").height(wh - 30);
Even though I placed {$("#bodyContainer").height(wh - 30);} outside of the resize callback the element doesn't change height. It's only when I resize the window does this work.
Why? It shouldn't be a variable scope thing because of the "var" keyword isn't being use, should it?
Posted: Sat Apr 07, 2007 2:31 pm
by nickvd
OMG
Code: Select all
//<...>
if(window.innerHeight){
wh = window.innerHeight;
}elseif(document.documentElement.clientHeight>0){
wh = document.documentElement.clientHeight;
}else{
wh = document.body.clientHeight;
}
//<...>

Why is this so bloody difficult for browsers to implement equally?
<edit>
...
also, why didn't jQuery abstract all that away? isn't that what it does best?
Posted: Sat Apr 07, 2007 2:36 pm
by JellyFish
Maybe they should...
Anyways when I try:
Code: Select all
if(window.innerHeight)
{
wh = window.innerHeight;
}
else if (document.documentElement.clientHeight>0)
{
wh = document.documentElement.clientHeight;
}
else
{
wh = document.body.clientHeight;
}
$(window).resize(function () {
$("#bodyContainer").height(wh - 30);
});
$("#bodyContainer").height(wh - 30);
It works on start up but not on resize. Why doesn't the resize callback know of "wh"?
Posted: Sat Apr 07, 2007 2:42 pm
by nickvd
You will need to recalculate the height every time the window resizes. I only see said calculation once.
a bit smaller
Posted: Sat Apr 14, 2007 5:44 pm
by thmvmnt
feyd | Please use Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Here it is a bit smaller
[syntax="javascript"]
$(window).resize(function () {
if(window.innerHeight) wh = window.innerHeight;
else wh = (document.documentElement.clientHeight>0) ? document.documentElement.clientHeight : document.body.clientHeight;
$("#viewFrame").height(wh - 50);
});
feyd | Please use[/syntax]Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]