Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree2Likes
  • 1 Post By Ronald Roe
  • 1 Post By RDesignista

Thread: How to constantly recalculate height?

  1. #1
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times

    How to constantly recalculate height?

    I have this function I made that will help vertically center content.

    It's something like:



    $(document).ready(function() {

    var height = window.height();

    $("#container").height( height );

    });

    Then of course, I use css on the objects to make them vertically centered.

    #container { position: realtive }
    #content { height: 150px; top: 50%; margin-top: -75px }

    Now, this calculation happens on document ready. That's fine. But say, I were using it on a tablet and then I were to rotate the screen, the page would be messed up because the window height changed.

    My question is this: how can I make it so that the height will recalculate continuously or at least whenver there is a change to the viewport/window dimensions?

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There's a number of ways to do this.

    The vanilla JS way: https://developer.mozilla.org/en-US/...indow.onresize
    Alternate vanilla JS way: https://developer.mozilla.org/en-US/.../Events/resize
    The jQuery way: .resize() | jQuery API Documentation
    RDesignista likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Thanks.

    For reference, I ended up with this lil code:

    I'm not sure if it's the best way, but I had to do it twice. Once to enable the resizing. Second to resize on document load.

    Code:
    //sticky footer - make content height at least fit screen
    jQuery(window).resize(function() {
    		var windowHeight = jQuery(window).outerHeight();
    		var headerHeight = jQuery('#header2').outerHeight();
    		var footerHeight = jQuery('#footer').outerHeight();
    		var contentHeight = windowHeight - headerHeight - footerHeight;
    	
    		jQuery(".content").css({ "min-height": contentHeight + "px" });
    	
    });
    
    
    jQuery(document).ready(function() {
    		var windowHeight = jQuery(window).outerHeight();
    		var headerHeight = jQuery('#header2').outerHeight();
    		var footerHeight = jQuery('#footer').outerHeight();
    		var contentHeight = windowHeight - headerHeight - footerHeight;
    	
    		jQuery(".content").css({ "min-height": contentHeight + "px" });
    	
    });

  5. #4
    Member DerrickE's Avatar
    Join Date
    Jul 2007
    Location
    Houston, TX
    Posts
    58
    Member #
    15580
    Liked
    10 times
    Looks good, except I'd put the actual resizing calculations into a function then call it. Re-usability is awesome. That way you only have to modify one function instead of multiple places.

    Then do:
    .ready(function () { resize_function(); }
    .resize(function () { resize_function(); }

  6. #5
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Quote Originally Posted by DerrickE View Post
    Looks good, except I'd put the actual resizing calculations into a function then call it. Re-usability is awesome. That way you only have to modify one function instead of multiple places.

    Then do:
    .ready(function () { resize_function(); }
    .resize(function () { resize_function(); }
    Thanks Derrick, that's exactly what I needed -- efficiency. I took the jquery and javascript courses at Codeacademy at the beginning of this year... I learned about functions, but almost never use them... I'm a very inefficient programmer in general. Can you believe I'm trying to learn Java now? Haha....
    Last edited by RDesignista; Aug 22nd, 2014 at 02:47 PM.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com