SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jQuery :: Comparing page height and window height

    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
    Last edited by eruna; Dec 26, 2012 at 16:59. Reason: Forgot to say thank you

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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)

  3. #3
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    IE's clientHeight/Width apparently still needs looking after even in jQuery


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •