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.
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);
});
// ]]>
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');
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/
