Possible to implement Holy Grail or other equal-height column layout?

Yes I'd find it very usefull too. Did you manage to make it work finally ?

Update : equalize the column heights with jQuery (tested with Zen 5.x-1.1 on FF3 & IE6)

I've been working on a layout.css file that will implement a hybrid liquid-fixed (i.e. fully liquid within the min-max settings) 3-column Holy Grail layout in ems following Matthew James Taylor's methods. I've had some success, but have not yet incorporated the code that would be required to automatically convert from 3-col to 2-col to 1-col depending on whether or not different sidebars are present. Mine currently has a custom 2-col front page and then all other pages are 3-col.

The current implementation requires changes to ie.css, a few modifications to zen.css [actually "theme-name".css] and a couple very small changes to page.tpl, But I expect with some cleanup it could work with changes only to zen.css and ie.css.

We will be launching the site in 1-2 months, but if you can't wait till then, then you can contact me via email for some potential pointers.

Phil.

I think adding your "pointers" to the documentation or providing a sample sub-theme of the implementation would be excellent ideas.

It would make my “Separate layout.css file to allow for changing the type of column layout (holy grail, jello mold, etc)” claim less hypothetical and more of a “okay, here’s how you do it”. :-)

Actually, the jello mold layout method is already implemented in Zen Classic so you could use that as an example of how to override Zen's default layout method.

1. Use a completely different layout.css from Zen's provided layout-fixed.css or layout-liquid.css
2. If you need to change the html in the page template, copy Zen's page.tpl.php to your sub-theme and then modify as necessary.

And, yes, I always use A List Apart's "faux columns" technique; it works great for fixed-width sidebars (even when the content div is liquid.)

I'll try to put something together that offers some suggestions on how to go about rewriting the layout.css file generally in order to use another layout method.

And I'll see if I can't create a pared down layout.css file for the specific holy grail method that I'm employing that could more or less be dropped in to a blank zen install the same way one uses layout-fixed.css or layout-liquid.css and then renames them. But as I'm under pressure to get our site up and running right now, I can't guarantee a timeline.

Phil.

@spidersilk & pkiff

Are you looking forward to contribute that anytime soon? :)
I'm having the same issues over here...

I'm still 2-4 weeks away from posting a write-up, and we are about 1-2 weeks away from launching our site using the Holy Grail layout. Coincidentally, there was a Drupal Theming Workshop in Toronto in November where spidersilk (Lynna) led a workshop on Zen and the Holy Grail:
http://themeworkshop.avatarinteractive.ca/node/7

Lynna and I had a chance to meet briefly and compare notes a bit at the workshop. It seemed like we had both run in to similar issues in getting the Holy Grail layout to work with Zen, though I think our strategies for resolving the issues may have been different. Lynna has I think already launched a couple sites using the Holy Grail layout method, whereas this is the first one for me.

When working on the layout, I started to use bare HTML pages totally disconnected from Drupal except for the div names, because I found it difficult to work on the layout from within a real live Drupal page. I've posted a couple of these bare-bones page templates to demonstrate where my layout is currently at, and one or more of these may be of use to some folks until I am able to post a fuller write-up:
http://www.cawd.ca/zen/

Note that these layouts are not fully documented yet. But I definitely have to take my hat off to Matthew James Tayor for developing this particular CSS layout technique and for updating it to make it even better over the past couple months:
http://matthewjamestaylor.com/

Here are a couple other quick, but important, layout notes. I moved the navbar div out of the main page area in all the layouts so that it now appears in sequence after the header div and before the main and main-inner divs. This means you lose the content-first code order; or at any rate, visitors have to jump over your primary nav to get to your content. I will explain why I did that some other time. Also, all the pages require that you insert a fairly large number of new divs to create additional wrappers in and around various items. These layouts all follow the model of the latest version of Matthew James Taylor's Holy Grail layout. They use an em-based measurement system (where the left- and right columns are measured in ems, instead of pixels or percentages, and so they will expand in width to accomodate text resizing, including using View -> Text Size -> Increase functions in IE6), and they work with IE6 in "no quirks" mode:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

To understand what is going on in Matthew James Taylor's layout method, I would strongly recommend reviewing the lucid explanation he posted to his blog in October. I didn't really understand exactly how this method worked until I read this posting, and if you are trying to modify the layout to work with Zen, then it really helps to understand exactly what all those negative margins and wonky widths are doing:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-cs...

There are a variety of constraints that I've been working with in this layout, but the biggest headache has turned out to be that I wanted not just a 3-column layout, but also one that had a visible (i.e. different colour) gap in between each of the columns. This has proven more challenging than I expected. The default Holy Grail layout will provide 3 columns with different backgrounds, but no easy way to create a border/margin/padding of a different colour in between each of the columns. I am still working through some of the final details of a solution for this, but I'm hopeful that my current solution will work.

I am now using the 3-column layout structure to create just 2 columns: left-sidebar and "content" (middle) with a gap between them and the "gap" is styled as though it were the 3rd column. Then, I am embedding a new set of 3 columns within the "content"/middle area and placing the main content column and the right-sidebar within that embedded set, and those two columns are then separated by a gap that is again laid out as though it were an additional column. So, in essence, I have 5 columns: sidebar-left, gap-left, content area, gap-right, sidebar-right. And I am using two embedded 3-column layouts on the same page in order to set up these 5 columns. The inner 3-column layout defines the content area, gap-right, and sidebar-right. The outer 3-column layout defines the sidebar-left, gap-left, and the inner 3 columns taken as a single group. This seems convoluted to me (and presumably to anyone trying to read this explanation!), and I am not convinced that it is the best method of laying the page out. I also don't know whether this will work if you want to have a collapsible sidebar-left: in our site design the left sidebar is always present so this was not an issue. However, this method does make it relatively easy to allow the layout to expand or contract based on whether the right sidebar is present or not, and I think it makes possible a couple other layout elements that we were looking for on the site. The barebones version of this layout is here:
http://www.cawd.ca/zen/zen-holy-grail-template-3-columns-with-gaps.htm

[Later edit: It turns out that the method described above is not only convoluted, but will not achieve my goals, either. While this set of embedded layouts may work in some cases, it will not work if the sidebar-left is the longest column. The inner 3-column wrap that contains the content area, gap-right, and sidebar-right will only have backgrounds that extend as far down as the longest of those columns. If neither the content area nor the sidebar-right are the longest on the whole page, then those backgrounds will end before the bottom of the page height. Continue reading this thread for alternate solutions.]

This layout is almost 100% compatible with IE6, I think. At the moment, I've just got one little IE6-specific hack. When I implement it in Zen, I will of course move that over to the appropriate ie.css file, but in the code above, I've just inserted directly into the styles in the head using a preceding underline to keep other browsers from reading it.

Note also that Taylor supplies several different kinds of layouts: percentage-based, em-based, and px-based. Each kind has its own quirks, and the codes are not transferable directly from one to another: i.e. you should choose which measurement system you want before you start working on transferring the code over to you Zen subtheme.

Phil.

The site I've been working on has launched here:
http://www.iwh.on.ca/

I have been reticent to post the link as there are still some issues we are working on resolving, including in particular some issues with the holy grail layout compatibility with IE6. [Later: these issues have been resolved since March 2009]. But the site does nevertheless implement the holy grail as a subtheme of zen, and it works very well in all modern browsers. I decided to post a link to this now in case others are interested, as it may be a number of additional weeks yet before I have a chance to clean up the remaining layout issues and document them properly.

Phil.

I've implemented equal column heights into my Drupal environment in a few easy steps.

First - it's important that you understand my page is set up as mini panel pages, nested inside floated panel pages, nested inside one large 100% width panel page. I'm new to Drupal but this works for me, and applies to the solution below.

1. Check out the "Equal Height Columns with Jquery" article here: http://www.cssnewbie.com/equal-height-columns-with-jquery/
2. In your theme (I am heavily modifying Garland) add the following script (taken from the article example) to page.tpl.php before your closing head tag:
   

   <script>
   function equalHeight(group) {
   	tallest = 0;
   	group.each(function() {
   		thisHeight = $(this).height();
   		if(thisHeight > tallest) {
   			tallest = thisHeight;
   		}
   	});
   	group.height(tallest);
   }
   $(document).ready(function() {
   	equalHeight($(".eqpanel"));
   });
   </script>
   

3. Note the reference to ".eqpanel" in the script above, as you will need to add a class of eqpanel (or another appropriate class name in your case) to each nested panel page in Home > Administer > Panels > Panel pages > Settings > Content. The Jquery library is included in newer releases of Drupal so your 'print $scripts' in page.tpl.php takes care of your main jquery.js file.
4. Presto, once the eqpanel class is applied, each of your panel pages will be the same height. I highly recommend adding your OWN class name as noted above, rather than searching for an existing class on your panel pages, because trying to use a generic .panel-page class really screwed things up for me.

Refer to the images for an example of the layout and solution here:
http://www.urbanbricks.com/drupal-equal-height-coumns

Ping me if I can be of assistance!

Looks like a great JavaScript solution to the equal-height problem that takes advantage of Drupal's inclusion of jQuery.

One suggestion: I think that the preferred method of including JS in Zen under Drupal 6, is to either put it in a script.js [replaced: the filename "user.js", which is wrong, as guix points out below] file in the theme folder (which causes the file to be automatically loaded), or to call it from the template.php file using code similar to
drupal_add_js('sites/all/scripts/customequalheight.js');
I'm not familiar with mini panels, and maybe there is still another preferred method that I'm not aware of, but I think the general goal of the various methods is to avoid the need to edit the page.tpl.php page or to insert raw code there instead of including it from elsewhere. And the purpose of doing that is to keep the page.tpl.php lean and mean and to avoid the necessity of editing it again every time there is a zen upgrade.

Then again, I'm no JavaScript/Zen wizard, so I could be wrong.

Phil.

I like this method: http://www.positioniseverything.net/articles/onetruelayout/equalheight

Note that it isn't appropriate in all circumstances (see http://www.positioniseverything.net/articles/onetruelayout/appendix/equa... )

I, personally, would avoid using jQuery/javascript to make your columns equal length.

pkiff: great work there, it may save me my job! Thank you!

Would really love this as a drupal theme in itself: that a barebones holy grail theme is not shipped with core Drupal seems a bit crazy, to me.

Hrm, yeah - just using the CSS to make a Zen template didn't work. No job saving here...
Drupal REALLY needs a liquid 3-col holy grail.

Dewi,

The default Drupal 6 Garland theme is a semi-liquid 3-column layout. And the Zen "liquid" layout is what lots of people would call a 3-column liquid layout as well. The "Holy Grail" layout is something that means slightly different things to different people, and some people would say that these other layouts (Garland and Zen liquid) can already do everything the holy grail layout does, but they just don't do it as elegantly. Indeed, the original "holy grail" layout from A List Apart actually has fixed sidebars: what made it the "holy grail" was that it was clean code (i.e. it didn't use JavaScript or any extra divs), not that it was fully liquid across all 3 columns (it wasn't) or that it had equal height backgrounds (it didn't).

I think that most people don't actually want or need a fully liquid 3-column layout with CSS-only equal height columns: most designers are rather seeking a layout with a liquid centre, but fixed sides. Or, they are looking for a layout that can use percentages, which you can also do with the Zen liquid layout.

Are you sure that you can't achieve what you need using the default Zen liquid layout CSS and just customize it to your specifications?

If you really do need a fully liquid, em-based layout, with equal height columns, then you should be able to use a modified version of the layout that I'm using. I've made further progress since my post above, and I'll post another bare-bones Zen version when I have a chance this week.

But if you don't need those things, then sticking with a modified version of Zen's liquid layout will provide a more robust and easier to maintain CSS structure.

Phil.

Hello,

For a zen subtheme there's script.js in which javascript can be added.

Off-topic, but I just had to say that :

The "Holy Grail" layout is something that means slightly different things to different people

It's very well named ;-)

Has anyone found a non java script tweak for the zen theme which allows for equal height columns in a fixed width scenario?

I wasn't able to get this trick
http://www.positioniseverything.net/articles/onetruelayout/equalheight
to work, possibly because I'm using a rounded corners technique for my blocks found here:
http://drupaleasy.com/blogs/ultimike/2009/04/adding-rounded-block-border...

@walden: http://www.alistapart.com/articles/fauxcolumns/

I believe have come up with a Javascript method of equalizing a left and right column in relation to a center column, for nearly any theme.

The method actually involves creating a bottom block in the right and left columns of a(any) three column layout, and dynamically resizing them in relation to the center column.

The script has 3 parts -- one piece is a function you can place in the header or somewhere on the top of the code of the page that can identify the heights of div.classes, and a piece that goes in the content area of each of the dynamic left and right blocks you'll create. Both of the dynamic blocks resize (unfortunately, a little inacurrately for some browsers). The blocks actually take the height of the central content area and any extra center-column blocks, then subtract each of the heights of the blocks in the left column to make the height of the left "dynamic-height" block... and the same is done for the right side "dynamic-height" block.

In my code, the Dynamic-Height blocks are made to disappear completely if the right and left columns are within 70px or so of the center column's height.

You need the Block Class module to make it work, so you can add classes to all your blocks. The left blocks should all have the same class added, and the right blocks should all have another class added, and the center should also have its own unique class. I used these:

BLOCK CLASSES
Left Blocks, not including the Left Dynamic Block: spacertrackerleft
Right Blocks, not including the Right Dynamic Block: spacertrackerright
Center Content Column: centerthree
Left Dynamic Block: leftsidedynamicblock
Right Dynamic Block: rightsidedynamicblock

This is the header-area script:

<script type="text/javascript">
<!--
function getElementsByAClass(node,searchClass,tag) {
var classElements = new Array(); var els = node.getElementsByTagName(tag);
var elsLen = els.length; var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; }
}
return classElements;
}
//-->
</script>

The left dynamic block needs a div like so, in the content area:

<div class="dynablockcontentleft">
You could put some left block content here!
</div>

The right dynamic block needs to do all the computations, because it loads later in the html stream, letting the center column develop enough that the code can gather its height. It should contain code something like this:

<script type="text/javascript">
<!--

var centerthreeht = document.getElementById('centerthree').offsetHeight;
if (document.getElementById('comments')) { centerthreeht = (centerthreeht +60); }

function dynamaheighterR() {
var totalheightR = 0;
var rightblock = getElementsByAClass(document,'spacertrackerright','div');
if (rightblock.length > 0) {
for (i = 0; i < rightblock.length; i++) { if ( rightblock[i].offsetHeight ) { totalheightR = totalheightR + rightblock[i].offsetHeight + 12; }}
var dynablockR = ( centerthreeht - totalheightR ) - 130;
} else { var dynablockR = centerthreeht + "px"; }
if ( dynablockR >= 70) {
document.write('<div class="dynablockcontentright" style="height:' + dynablockR + 'px">');
document.write('</div>');
} else { document.write('<style type="text/css"> .rightsidedynamicblock { display: none !important; } </style>'); return true; }
}

function dynamaheighterL() {
var totalheightL = 0;
var leftblock = getElementsByAClass(document,'spacertrackerleft','div');
if (leftblock.length > 0) {
for (i = 0; i < leftblock.length; i++) { if ( leftblock[i].offsetHeight ) { totalheightL = totalheightL + leftblock[i].offsetHeight + 12; }}
var dynablockL = ( centerthreeht - totalheightL ) - 130;
} else { var dynablockL = centerthreeht + "px"; }
if ( dynablockL >= 70) {
document.write('<style type="text/css"> .dynablockcontentleft { height:' + dynablockL + 'px !important; } </style>');
} else { document.write('<style type="text/css"> .leftsidedynamicblock { display: none !important; } </style>'); return true; }
}

dynamaheighterL();
dynamaheighterR();
//-->
</script>

I have a working prototype of this functioning at my website, but it is under development and cannot be revealed yet. If you need to see it, please contact me and I'll give you a login/pass to access it if needed. I had to add a couple custom things that won't probably apply to others, like the fudge of "totalheight" to fix the problem with jQuery menu block in my left column that reads its height incorrectly by 115px, and the comments section of the center column as well.
The beauty of this method is you can use any number of blocks with it, and the adjustment doesn't happen to a column, which may not even be visible... it happens with a final block in each column that makes up the differences in size.

There are a few bugs, and I know the code is clunky, but maybe someone can perfect this and contribute this as a module or something for the benefit of the Drupal community. Let me know if you are someone that decides to do this.

Here is an example: http://kpbj.net/images/site/dynamicblockexample001.jpg

I've tried javascripts to equalize columns some years ago, and stop using that since I found troubles when we add more design elements. Instead I use a fake equal height column as you can see here=> http://dforum.gausarts.com. It's developed for my employer. It serves our need at least.

Then I read this thread by the end of April and found matthewjamestaylor.com link here which I have been familiar with before. I decided to give holy grail technique a test, only prefer blog style, and fixed width.

I did it somehow. Since I thought it would be easier to contribute if developed as a subtheme to Zen, so I proposed to Zen maintainers. You may find the link to a series of themes based on holy grail in my original proposal, here http://drupal.org/node/444934

Perhaps you'd like to give them a whirl in this early development.

Thanks

Ok, I made a few modifications.

Now, all you need is the classes set up in the columns as described, and a dynamic-block class setup in each of the dynamic-height blocks. This will support matching column heights with any number of columns as well, and also allow you to use custom blocks as the dynamic-height blocks. You could put any content you wish between divs in any custom block, or you could add a div to any Views-generated block.

Instead of putting the computational code in the right block, just put another div... in this case:

<div class="dynablockcontentright" style="display: block;">

And instead of putting a header block of code, just put this in an unstyled (hidden) block in the footer:

<script type="text/javascript">
<!--

function getElementsByAClass(node,searchClass,tag) {
var classElements = new Array();
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; }
}
return classElements;
}

var centerthreeht = document.getElementById('centerthree').offsetHeight;
if (document.getElementById('comments')) { centerthreeht = (centerthreeht +60); }

function dynamaheighterR() {
var totalheightR = 0;
var rightblock = getElementsByAClass(document,'spacertrackerright','div');
if (rightblock.length > 0) {
for (i = 0; i < rightblock.length; i++) { if ( rightblock[i].offsetHeight ) { totalheightR = totalheightR + rightblock[i].offsetHeight + 12; }}
var dynablockR = ( centerthreeht - totalheightR ) - 130;
} else { var dynablockR = centerthreeht + "px"; }
if ( dynablockR >= 70) {
document.write('<style type="text/css"> .dynablockcontentright { height:' + dynablockR + 'px !important; } </style>');
} else { document.write('<style type="text/css"> .rightsidedynamicblock { display: none !important; } </style>'); return true; }
}

function dynamaheighterL() {
var totalheightL = 0;
var leftblock = getElementsByAClass(document,'spacertrackerleft','div');
if (leftblock.length > 0) {
for (i = 0; i < leftblock.length; i++) { if ( leftblock[i].offsetHeight ) { totalheightL = totalheightL + leftblock[i].offsetHeight + 12; }}
var dynablockL = ( centerthreeht - totalheightL ) - 130;
} else { var dynablockL = centerthreeht + "px"; }
if ( dynablockL >= 70) {
document.write('<style type="text/css"> .dynablockcontentleft { height:' + dynablockL + 'px !important; } </style>');
} else { document.write('<style type="text/css"> .leftsidedynamicblock { display: none !important; } </style>'); return true; }
}

dynamaheighterL();
dynamaheighterR();

//-->
</script>

This makes your columns (close to) even height, no matter how many columns you implement, and it changes automatically to fit no matter how many blocks you add or remove in each column -- on the fly. :-)

Have a look at learning some jquery.
The library is built into Drupal, and is sure to help distill your code down to something a lot tighter.
No more document.getElementByTagName or getElementsByAClass. no more document.write.
It's elegant, once you grok it.

I believe I have a better script now. It has at least some JQuery elements. See www.kpbj.com for a demonstration of how well it works. It even auto corrects on the fly without page reloads, and removes the dynamic blocks completely when it determines that they are of insufficient height to warrant showing. There are a few center-height tweaks at the beginning of it, but here is the script I ended up with:

<script type="text/javascript">
<!--

function getCenterHeight() {
if ($("div#centertwoR").length>0) { centerht = $("div#centertwoR").height(); }
else { centerht = $("div#centerthree").height(); }
return centerht;
}

function getElementsByAClass(node,searchClass,tag) {
var classElements = new Array(); var els = node.getElementsByTagName(tag);
var elsLen = els.length; var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; }}
return classElements;
}

function dynamaheighterL() {
var totalheightL = 0;
var leftblock = getElementsByAClass(document,'spacertrackerleft','div');
if (leftblock.length > 0) {
for (i = 0; i < leftblock.length; i++) { if ( leftblock[i].offsetHeight ) { totalheightL = totalheightL + leftblock[i].offsetHeight + 13; } }
var dynablockL = centerht - totalheightL;
} else { var dynablockL = centerht; }
if ( dynablockL >= 13) { $('div.leftsidedynamicblock').show(); $("div.dynablockcontentleft").css("height", dynablockL); }
else { $('div.leftsidedynamicblock').hide(); }
}

function dynamaheighterR() {
var totalheightR = 0;
var rightblock = getElementsByAClass(document,'spacertrackerright','div');
if (rightblock.length > 0) {
for (i = 0; i < rightblock.length; i++) { if ( rightblock[i].offsetHeight ) { totalheightR = totalheightR + rightblock[i].offsetHeight + 13; } }
var dynablockR = centerht - totalheightR;
} else { var dynablockR = centerht; }
if ( dynablockR >= 13) { $('div.rightsidedynamicblock').show(); $("div.dynablockcontentright").css("height", dynablockR); }
else { $('div.rightsidedynamicblock').hide(); }
}

setInterval(function() { getCenterHeight(); dynamaheighterL(); dynamaheighterR(); }, 1500);

//-->
</script>

gregarios, I would like to use your method on my site, it looks like a good solution to me.
I'm using a three column theme - Four Seasons on Drupal 5.18

I tried your examples but they didn't work - I suppose they are for 6.x only?

Thanks

G

I don't think there are any limitations, actually. As long as Block Class module works for your version, and you have JQuery loaded either from another module or manually. The right side blocks should all have the same class, except for the actual dynamic block, and same with the left.

I'd advise you to look at the complete source for www.kpbj.com to see how it is set up. :-)

The script would take a little modification in order to work in Four Seasons theme. That theme uses different wording for center column IDs.

The script I wrote allows for 3 possible column setups as well, for one, two or three columns. My theme uses column width adjustments based on the number of columns available at any given time, coded in the page.tpl.php file. That is why my script has adjustments for div#centerthree, div#centertwoL and div#centertwoR in it. Your theme would use just one div#middle-content to get the center height.

You could reduce the first script function to the following, if using 3 columns exclusively:

function getCenterHeight() {
centerht = $("div#middle-content").height();
return centerht;
}

To view the full effect, go to the following link, get your window set up to see the bottom of the block-columns, then open and close some of the drop-down lists: http://kpbj.com/links

Thanks gregarios - It works really well!

Is it possible to also solve the minimum height issue with this method? On search or contact pages, for example where there is little content (and no side blocks) the footer block appears up in the middle of the screen. Perhaps some kind of condition set for the center column?

You may need to make sure there is one of these in your page.tpl.php file, just below the 3 columns, but just above the footer area:
<div style="width:100%;clear:both;display:block;height:1px;margin:0px;padding:0px;"></div>

It should make sure your footer stays below everything else. I think that was what you were describing anyway. :-)

For those who come to this thread looking for a zen sub-theme that uses Matthew James Taylor's methods, you might investigate the Plain Grail, Blog Grail, and Dark Grail subthemes by Gaus Surahman (gausarts). These sound like they all use the pixel-based version of Taylor's Ultimate Holy Grail layout. I haven't looked at these myself, but they are mentioned on Matthew James Taylor's blog:
http://matthewjamestaylor.com/blog/drupal-themes-of-my-ultimate-liquid-l...

Here are direct links to the Zen subtheme projects:

Plain Grail:
http://drupal.org/project/plaingrail

Blog Grail:
http://drupal.org/project/bloggrail

Dark Grail:
http://drupal.org/project/darkgrail

Phil.

You may need to make sure there is one of these in your page.tpl.php file, just below the 3 columns, but just above the footer area:

When I say 'footer' I meant a footer block. I already have <div style="clear:both;"></div> above the 'display footer message' area my themes page.tpl.php I thought it might be possible to use some kind of script in a custom footer block to check the height of the page - and if it was below a certain height, repeat a background image or something to make up the height of the page to the desired specified (minimum) height. This would make the footer static - stopping it from riding up and down different pages.

Or maybe I'm overcomplicating things and there is a more obvious solution?

@plan9: Can you show me an example of what you are trying to fix? A div with a clear:both; in it may not be enough, by the way. The div needs to extend all the way across the page or it didn't work in my theme.

gregarios: I mailed you a link to my site. I'm not sure how the div you mention will give pages a minimum height if there's little content in the page. Perhaps if you take a look at the example page I sent my problem will make a bit more sense. :o)

G

I see. Well, this isn't a product of my script. The reason your page height has no minimum is that the particular page you sent me to has no "left" or "right" sidebars to adjust. :-) My script is designed to do nothing but adjust the dynamic block height in a left and right block, in a left and/or right column, if they exist! Since there is no left or right column on these pages, the script does nothing on them.

I believe your solution can be solved by putting more content on the pages in question, which, since they are forum pages, should fill out on their own as soon as there are topics and users' comments.

You may be able to make a modification to my script that would read the center column height, and if it is shorter than a certain amount, adjust it to a preset minimum of your choice, just like it adjusts the right/left blocks.

You may be able to make a modification to my script that would read the center column height, and if it is shorter than a certain amount, adjust it to a preset minimum of your choice, just like it adjusts the right/left blocks.

Yes, this is the approach I am going to attempt ;)

gregarios, I've been using your script with good results on my site, except for on my group pages. og has a few blocks and I've added the correct block classes as described above to each but the columns height just don't match. After disabling one og blocks one at a time I found the one causing the problem - it was the most important one - 'Group details'.

It seems for some reason it will not work with your script. There is a lot of contextual info happening in this particular block. Any ideas how I can get it to work? Perhaps by applying the class somewhere else other than via the Drupal block interface?

Thanks for any advice

G

In the getCenterHeight() function, you can add an elsif that senses an ID that is unique to the page you are describing, and add a certain amount to the center height (or subtract from it) manually to adjust it for that page. Adjusting the center height manually will force the block heights to readjust as well. The ID can come from anywhere on the page, as long as it is only found on the page which is giving you trouble. Here is my entire (newly revised) script with the added code in place:

function getCenterHeight() {
if ($("div#centertwoR").length>0) { centerht = $("div#centertwoR").height(); }
elsif ($("div#aUniqueID").length>0) { centerht = $("div#centerthree").height() + 35; }
else { centerht = $("div#centerthree").height(); }
return centerht;
}

function getElementsByAClass(node,searchClass,tag) {
var classElements = new Array(); var els = node.getElementsByTagName(tag);
var elsLen = els.length; var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0, j = 0; i < elsLen; i++) {if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; }}
return classElements;
}

function dynamaheighterL() {
var totalheightL = 0;
var leftblock = getElementsByAClass(document,'spacertrackerleft','div');
if (leftblock.length > 0) {
for (i = 0; i < leftblock.length; i++) { if ( leftblock[i].offsetHeight ) { totalheightL = totalheightL + leftblock[i].offsetHeight + 13; } }
var dynablockL = centerht - totalheightL;
} else { var dynablockL = centerht; }
if ( dynablockL >= 13) { $('div.leftsidedynamicblock').show(); $("div.dynablockcontentleft").css("height", dynablockL); }
else { $('div.leftsidedynamicblock').hide(); }
}

function dynamaheighterR() {
var totalheightR = 0;
var rightblock = getElementsByAClass(document,'spacertrackerright','div');
if (rightblock.length > 0) {
for (i = 0; i < rightblock.length; i++) { if ( rightblock[i].offsetHeight ) { totalheightR = totalheightR + rightblock[i].offsetHeight + 13; } }
var dynablockR = centerht - totalheightR;
} else { var dynablockR = centerht; }
if ( dynablockR >= 13) { $('div.rightsidedynamicblock').show(); $("div.dynablockcontentright").css("height", dynablockR); }
else { $('div.rightsidedynamicblock').hide(); }
}

setInterval(function() { getCenterHeight(); dynamaheighterL(); dynamaheighterR(); }, 2300);

I've tried your extended getCenterHeight function gregarios, but it breaks the script on my site. My version with the four season theme looks like this:

function getCenterHeight() {
if ($("div#sidebar-right").length>0) { centerht = $("div#sidebar-right").height(); }
elsif ($("div#block-og-0").length>0) { centerht = $("div#middle-content").height() + 35; }
else { centerht = $("div#middle-content").height(); }
return centerht;
}

I've tried removing the elsif line but it still doesn't work. I suppose it must be div#sidebar-right causing the problem. In Four Seasons page.tpl the three columns: sidebar-left, sidebar-right and middle-content are defined as:

<div id="contentwrapper">
    <?php if ($sidebar_left): ?>
      <div id="sidebar-left" class="sidebar">
          <?php print $sidebar_left ?>
      </div>
    <?php endif; ?>

    <div id="middle-content">
      <div class="content-padding">
          <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
          <?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
          <?php if ($tabs): print $tabs .'</div>'; endif; ?>

          <?php if (isset($tabs2)): print $tabs2; endif; ?>

          <?php if ($help): print $help; endif; ?>
          <?php if ($messages): print $messages; endif; ?>
          <?php print $content ?>
          <span class="clear"></span>
          <?php print $feed_icons ?>

          <div style="clear:both;"></div>
      </div>
    </div>

    <?php if ($sidebar_right): ?>
      <div id="sidebar-right" class="sidebar">
        <?php if (!$sidebar_left && $search_box): ?><div class="block block-theme"><?php print $search_box ?></div><?php endif; ?>
        <?php print $sidebar_right ?>
      </div>
    <?php endif; ?>
  </div> 

Do you see any possible incompatibilities with your script?
Thanks

G

@Plan9: My script is designed to work whenever there are 3 columns or 2 columns, but if your theme always has 3 columns, then here is your function:

function getCenterHeight() {
if ($("div#block-og-0").length>0) { centerht = $("div#middle-content").height() + 35; }
else { centerht = $("div#middle-content").height(); }
return centerht;
}

The left and right sidebar heights never come into play. It is the blocks that go in those regions that the script deals with.
The only incompatibility I see as a possibility is that you may have to add a class='spacertrackerright' to your search box div, since it is not a native block and is in the right sidebar.

Thanks for getting back to me gregarios.
unfortunately it still doesn't work for me on the og pages. I do in fact have some pages that only use two columns but your script seems to handle those ok.

@plan9:

Maybe the OG pages have a conflicting ID somewhere called "middle-content" that is interfering? Or maybe JQuery isn't loaded on those pages?

@gregarios - in the end it turned out to be simply that the middle content areas on my OG pages were shorter (due to lack of content) than my left and right blocks. This was making the left and right columns different heights simply because the blocks in them are different heights.

Ensuring that there is enough content height or reducing column height (less blocks) gets around this problem. So it was nothing to do with your script or any incompatibility with OG module.

Thanks, urbanbricks!

This solution worked great for me using Zen 6.x-1.1, and I am not using panels on these pages, just the standard Zen content, sidebar-left, and sidebar-right divs. I have a combination of two and three column pages and it works for both. Works fine in Firefox and Safari. Still have to take a peak and make sure it's looking ok in IE.

Right now I've got the code sitting in the head of page.tpl.php. Will try to figure out how to move it into a javascript file and still have it pulled in.

I'm usually all for a complete CSS solution, but with the Zen divs laid out as they are (very accessibly), and the varying layouts on different pages across the site (two col no left sidebar, two col no right side bar, one col, three col), it seemed like it could get pretty messy to try to adjust the divs on the page.tpl.php to make this work.

ohhh... This does cause a problem on pages where collapsed text / fieldset is expanded. The footer and anything below creep up on the page because they don't recognize that the page length has expanded. This is a problem on a lot of administrative pages. Any thoughts on how to fix?

adding <div style="width:100%;clear:both;display:block;height:1px;margin:0px;padding:0px;> div about footer doesn't seem to help...

--

Update: Changing the code from:

$(document).ready(function() {

to:

$(window).ready(function() {

helped.

The solution is from http://www.tripwiremagazine.com/2010/04/24-irresistible-jquery-tips-to-p...

Most jQuery code examples and tutorials instruct us to bind our jQuery code to the $(document).ready event. In many cases this is OK but since $(document).ready occurs during page render while objects are still downloading it may cause problems for some types of scripts. Functionality such as binding visual effects and animations, drag and drop, pre-fetching hidden images etc. could benefit from being bound to the $(window).load as it will ensure that all dependant elements are ready for use.