Jquery event resize for window.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Jquery event resize for window.

Post 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???
User avatar
Buddha443556
Forum Regular
Posts: 873
Joined: Fri Mar 19, 2004 1:51 pm

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
Buddha443556
Forum Regular
Posts: 873
Joined: Fri Mar 19, 2004 1:51 pm

Post 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
Last edited by Buddha443556 on Mon Apr 02, 2007 5:01 pm, edited 1 time in total.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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!".
User avatar
Buddha443556
Forum Regular
Posts: 873
Joined: Fri Mar 19, 2004 1:51 pm

Post 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.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

Image
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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);
});
:(
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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;
	}
//<...>
:roll:
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?
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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"?
Last edited by JellyFish on Sun Apr 08, 2007 3:34 pm, edited 1 time in total.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

You will need to recalculate the height every time the window resizes. I only see said calculation once.
thmvmnt
Forum Newbie
Posts: 1
Joined: Sat Apr 14, 2007 5:42 pm

a bit smaller

Post by thmvmnt »

feyd | Please use

Code: Select all

,

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

,

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]
Post Reply