Dynamic sidebar height and responsive themes

1 Comment

In another post, I listed the javascript to be used in a WordPress text widget to ensure that a sidebar had the same height as a page’s content. This is a nice feature if the sidebar has a background color. When the theme is responsive, the sidebar drops to the bottom, below the main content, so it should be sized to fit its own content, not that of the main content area. All it takes is a bit of javascript that checks the current page width.

Note: This snippet uses element names based on the TwentyTwelve theme layout. If you’re using different theme, you may need to pick different elements.

<!-- this must be the last widget. It dynamically sizes the sidebar -->
<script type="text/javascript">
var divh = document.getElementById('primary').clientHeight;
var sb1 = document.getElementById('secondary').clientHeight;
document.write(" ");
if ((sb1 < divh) && (document.getElementById('page').clientWidth > 600)) {

Responsive Theme, New Design

The time came to bite the bullet, to ford the stream, to jump the shark, to mangle the metaphor.  The time came to make my website look like something you’d expect from a professionally designed website.  I’d been puttting that off for a long time, but now it’s done.

The site’s theme is based on a free, fully responsive Drupal theme, Professional Theme.  The base theme was very close to my target. I made a few changes to the typography, substituting Open Sans for Droid Sans, modified some of the colors, and not much more.   This is an example of the efficiency that comes from leveraging the Drupal community.

What do you think? Seriously, I’d like to know.  Is the message clear? Is ithe site easy to read and navigate?  Do you sense any call to action?  Please use the comments feature to give me the good and bad.