Skip to content

Instantly share code, notes, and snippets.

@emperorcezar
Created June 15, 2011 16:07
Show Gist options
  • Save emperorcezar/1027424 to your computer and use it in GitHub Desktop.
Save emperorcezar/1027424 to your computer and use it in GitHub Desktop.
Small plugin that justifies a menu using jquery
/*
Tested with http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
in FF Mac, Safari Mac, Chrome Mac, Opera Mac, FF PC, IE 7 and 8, IE 6 works with css hack on LIs _width:3px;
Requirements: Menu structure has to be <ul><li><a...
<ul> must have a class or id
*/
/* PAD LIs EVENLY */
(function($){
$.fn.limenupadding = function(options) {
return this.each(function(){
var $this = $(this);
var opts = $.extend({
exclude: 0 // exclude from calculation for end caps: positive interger
},options);
var exclude = opts.exclude;
var lisTotalWidth = 0;
var ulWidth = ($this.width() - exclude); /* exclude is adjustment amount. Used here to subtract end caps */
// Remove the first and last item.
ulWidth = ulWidth - $this.children(':first-child').width();
ulWidth = ulWidth - $this.children(':last-child').width();
var liCount = $this.children().size() - 1;
$this.children().not(':last-child').not(':first-child').each(function() {
lisTotalWidth += $(this).width();
});
var difference = ulWidth - lisTotalWidth;
if (difference < 0 ) {
alert ("Total width of menu items in '" + $this.attr('class') + "' exceeds available space. Use fewer menu items, use shorter labels, or make menu wider.");
}
var paddingLRraw = (difference/liCount)/2;
var paddingLRfloor = Math.floor(paddingLRraw); /* round down to be safe, if too much pad li may wrap */
/* distribute computed padding across all LIs */
$this.children().not(':last-child').not(':first-child').children().css({'padding-left': paddingLRfloor, 'padding-right': paddingLRfloor});
$this.children(':last-child').children().css({'padding-left': paddingLRfloor});
$this.children(':first-child').children().css({'padding-right': paddingLRfloor});
/* if lis don't space perfectly, how much filler do we need to even them out? */
var paddingRemainder = paddingLRfloor * (liCount * 2);
var filler = difference - paddingRemainder;
/* distribute 1px of filler across several LIs, Mozilla has a bug that can cause a wrap in some cases. 1px breathing room seems to correct it. */
if ($.browser.mozilla) {
filler = filler -1;
}
var filler1 = filler/2;
var filler2 = filler1;
filler1 = Math.floor(filler1);
filler2 = Math.ceil(filler2);
for ( var i=0; i < filler1; i++) {
$this.children().not(':last-child').not(':first-child').children(':eq(' + i + ')').css({'padding-left': (paddingLRfloor + 1)});
}
for ( var i=0; i < filler2; i++) {
$this.children().not(':last-child').not(':first-child').children(':eq(' + i + ')').css({'padding-right': (paddingLRfloor + 1)});
}
$this.children(':first-child').children().css({'padding-left': 0});
$this.children(':last-child').children().css({'padding-right': 0});
/*
alert ("Menu id: " + $(this).attr('id') + "\nMenu class: " + $(this).attr('class') + "\nMenu width: " + (this).width() + "px\nPixels to exclude: " + exclude + "px\nSum of <li> widths: " + lisTotalWidth + "px\nDifference: " + difference + "px\n<li> count: " + liCount + "\nComputed pad amount raw: " + paddingLRraw + "\nComputed pad amount rounded down: " + paddingLRfloor + "\nSum of <li>s with computed padding: " + paddingRemainder + "px\nFiller needed: " + filler + " (" + difference + "px - " + paddingRemainder + "px)\n(1px applied as LEFT pad on " + filler1 + " <li>)\n(1px applied as RIGHT pad on " + filler2 + " <li>)");
*/
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment