jQuery :: Comparing page height and window height

**eruna** · Dec 26, 2012 16:56

I'm trying to get a footer to stick to the bottom with jQuery but only if the document is shorter than the window.
I realize this is possible with some convoluted css, but I thought I'd give it a try with jQuery.

The code below works on Webkit and Firefox but not IE.

How can this be modified to work cross platform?

http://nuttyste.nextmp.net

Code:

<script type='text/javascript'>
	$j(document).ready(function(){
		d=$j(document).height();
		h=$j('html').height();
		
		if(d>h){
			$j('#footer').css({'position':'absolute', 'bottom':0,'width':'100%'});
		}
		
	});
</script>

Thank you E

**chris.upjohn** · Dec 26, 2012 20:06

The keyword document referrers to the <html> element in the DOM so your code above would never work the way you intend it to, simply change

Code JavaScript:

d=$j(document).height();
h=$j('html').height();
 
if(d>h)

to

Code JavaScript:

var w = $(window).height(),
    d = $(document).height();
 
if (w > d)

**eruna** · Dec 27, 2012 08:13

Thank you. I couldn't get reliable results using the window height either, but I found that adding up the height of the other elements (#banner, #content, etc..) worked.

**Stomme poes** · Dec 30, 2012 16:37

IE's clientHeight/Width apparently still needs looking after even in jQuery

User Tag List

Thread: jQuery :: Comparing page height and window height

Thread Tools

Display

jQuery :: Comparing page height and window height

Bookmarks

Bookmarks

Posting Permissions