Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts

    page breaks when I resize - jQuery body height

    I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already.

    In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass.

    The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them.

    It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks.

    This is my script:
    Code:
    <script type="text/javascript">
    
    $(document).ready( function() {
    	
    	stretch_portal_content();
    	$(window).resize( stretch_portal_content );
    });
    
    function stretch_portal_content() {
    	// if the body isn't at least as big as the user's window - force it to be
    	if( $(window).height() > $('body').height() ) {
    		$( '#wrapper' ).height(
    			$(window).height() - ( $('body').height() - $('#wrapper').height() )
    		);
    	}
    	
    	// if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom
    	if( $(window).height() < $('#wrapper').height() ) {
    		$( '#wrapper' ).css("padding-bottom", '130px');
    	}
    
    }
    
    </script>
    I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it!

  • #2
    New Coder
    Join Date
    Dec 2010
    Posts
    30
    Thanks
    4
    Thanked 0 Times in 0 Posts
    correction:

    I had to take off the padding thing because it was adding it to pages that didn't need it...
    the new code is below and still has the same problem of breaking when resized:
    Code:
    <script type="text/javascript">
    
    $(document).ready( function() {
    	
    	stretch_portal_content();
    	$(window).resize( stretch_portal_content );
    });
    
    function stretch_portal_content() {
    	// if the body isn't at least as big as the user's window - force it to be
    	if( $(window).height() > $('body').height() ) {
    		$( '#wrapper' ).height(
    			$(window).height() - ( $('body').height() - $('#wrapper').height() )
    		);
    	}
    
    }
    </script>


  •  

    Posting Permissions

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