equalWidths jQuery Plugin

April 18th, 2010

categories
code collection, javascript
tags
, ,

I wrote a jQuery plugin to force equal widths for a group of elements. I wrote it specifically for horizontal navigation but it may have other uses.

Check out the demo or check it out on github.

I’m no JavaScript expert, so if you are and you see any room for improvement in the code; please let me know.

Comments, Quips & Protestations

  1. 1 April 18, 2010 10:35 pm Darren

    Andy! Feelin this site. Cool that you did work for BoyInk.

  2. 2 April 20, 2010 8:12 pm David Weinraub

    Interesting idea. ;-)

    But can’t equal widths be enforced with CSS alone? Or is the intent here that the parent can have dynamic/unspecified width and you simply want to allocate it equally among the children?

    Cheers!

  3. 3 April 21, 2010 9:33 am Andy Ford

    @David – yes, the intent it to accommodate unknown widths or frequently changed content. In fact, I created the plugin because a client kept changing their main nav but still wanted it horizontally distributed

  4. 4 May 6, 2010 10:37 am Erik Ford

    This is actually a very cool concept. I am already using an equal height jQuery solution when needed and this will come in handy for pesky horizontal navigation systems.

  5. 5 June 29, 2010 4:50 pm Peter Anselmo

    Way Cool! I’ve run into this exact problem before, and I already have a site in mind to try it out with.

  6. 6 March 22, 2011 8:01 am Glaserei Schauer Hamburg

    Hey thanks a lot i have used this in my own weblog. It works perfectly.

    Thank you a lot for your afford

  7. 7 March 23, 2011 1:16 am Berufsmoden MST

    Very nice concept, thanks for this great article

  8. 8 May 12, 2011 2:14 pm Osu

    Hi,

    I can’t seem to get this to work – it’s taking effect, but it looks as though the end list item I’m trying it on is too long (it has more width in pixels than the rest at leasrt). Either that or the list items aren’t being spread out evenly.

    Any idea of what to try?

Post a Comment

Your email address will not be published. Required fields are marked *

*