developer | thinker | tinkerer

jQuery - Altering Layout Based On Dimensions

So I'm working on this huge checklist application and I've built the interface with jQuery. It's basically a big accordion, with each category having the ability to expand and show search topics within. It's a search interface so in addition to the categories and topics we need to have some buttons to submit and reset the form.

An initial compliant was having both the top and bottom form buttons displayed (as seen in the screenshot). A few people thought this would confuse users, especially with the form in the short, collapsed state.

jQuery Dimensions

I knew I could hide the bottom element if all the items were collapsed but it got a bit fuzzy when I started checking open/collapsed states and some of the lists were short. You could still see both the top and bottom elements especially if you had a large monitor.

What I needed was a way to determine the height of the list and show or hide the bottom element based on that measurement. Enter the jQuery Dimensions plugin!

The dimensions plugin extends jQuery with dimension centric methods

This plugin will allow you to get document, window and element dimensions (both width and height).

So now in my code - I initially hide the bottom bar:


Next I have a few things which toggle the categories open and close. During each of these actions I simply check the height of the element (in this case it's a div called "wrapper") and turn on or off the bottom element based on the height. After a bit of experimenting I came up with 400px:

if ($('#wrapper').height() > 400) {
} else {

I was very happy with the results but the powers that be then decided (after I coded this) that the two sets of buttons wasn't that confusing and had me remove the dimensions check!!

If you haven't checked out jQuery you are missing out!

WebKinz - How Not To Cater To The Geek Parent Subversion - Just Do It

More like this...