Equal height for widget column and container column?

Home Forums Using Thematic Child Themes Build Your Own Custom Child Themes Equal height for widget column and container column?

This topic is: resolved

This topic contains 3 replies, has 1 voice, and was last updated by  dominornovus 2 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1998

    dominornovus
    Participant

    Using this forum’s live demo as an example (http://demo.thematictheme.com/), do any of you have tips on achieving equal height for #primary and #container?

    In my case, I’m using a left aligned two column Thematic layout and require the left column containing the widget areas to display a background image that reaches as low as the exact end of #container. It currently stops at the end of #primary’s automatic height.

    I’m researching jQuery solutions though I’m open to tips from anyone who might know how to achieve this with Thematic.

    #1999

    dominornovus
    Participant

    I’ve managed to adapt a jQuery solution and apply it to Thematic via the functions.php file:


    // Equal height for #primary and #container.
    // jQuery code from: http://web.enavu.com/tutorials/equal-column-height-with-jquery/
    // Modified for Thematic by http://www.dominornovus.com

    function equal_height_primary_and_container() {

    //Use WordPress conditional tags to apply to specific blog pages only:
    if(is_home() || is_single() || is_archive() || is_search() ){

    ?>

    // biggestHeight){
    //update the biggestHeight with the
    //height of the current elements
    biggestHeight = jQuery(this).height();
    }
    });
    //when checking for biggestHeight is done set that
    //height to all the elements
    jQuery(‘.equal_height’).height(biggestHeight);
    });
    // ]]>

     

    #2000

    dominornovus
    Participant

    Great. My edits timed/counted out on the previous post.

    Here’s the correct code:


    // Equal height for #primary and #container.
    // jQuery code from: http://web.enavu.com/tutorials/equal-column-height-with-jquery/
    // Modified for Thematic by http://www.dominornovus.com

    function equal_height_primary_and_container() {

    // Use WordPress conditional tags to target specific blog pages onyly...
    if(is_home() || is_single() || is_archive() || is_search() ){

    ?>

    jQuery(document).ready(function(){
    //#container and primary need to have the same class. Add class to each:
    jQuery("#container, #primary").addClass("equal_height");
    //set the starting bigestHeight variable
    var biggestHeight = 0;
    //check each of them
    jQuery('.equal_height').each(function(){
    //if the height of the current element is
    //bigger then the current biggestHeight value
    if(jQuery(this).height() > biggestHeight){
    //update the biggestHeight with the
    //height of the current elements
    biggestHeight = jQuery(this).height();
    }
    });
    //when checking for biggestHeight is done set that
    //height to all the elements
    jQuery('.equal_height').height(biggestHeight);
    });

    <?php

    } // end if is_home

    }

    add_action('wp_head', 'equal_height_primary_and_container');

    #2002

    dominornovus
    Participant

    I’ve just noticed that in Chrome, the heights of the columns are equalized before the page content loads which can result in a column height that is lesser than required which in turn results in vertically chopped page content.

    Find this line: $(document).ready(function(){ and replace with: $(window).load(function(){

    Problem solved.

    Explanation: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Equal height for widget column and container column?’ is closed to new replies.