Skip to content

Instantly share code, notes, and snippets.

@scamartist26
Last active August 29, 2015 13:56
Show Gist options
  • Save scamartist26/9273076 to your computer and use it in GitHub Desktop.
Save scamartist26/9273076 to your computer and use it in GitHub Desktop.
Twitter Bootstrap Tab navigation width and height justification plugin.
var $ = jQuery.noConflict();
function justifyTabs(){
var count = $('.nav-tabs > li > a').length, // set how many tabs
allHeights = []; // create array holder for the heights of our tabs
$('.nav-tabs > li').each(function () {
$(this).css('width', 100 / count + '%'); // set WIDTH based on how many tabs we have
var itemHeight = $(this).outerHeight(); // get HEIGHT of this item
allHeights.push(itemHeight); // add item HEIGHT to array
});
var tallestTab = Math.max.apply(null, allHeights); // get the tallest item HEIGHT
$('.nav-tabs > li > a').each(function () {
var pad = parseInt($(this).css('padding-top')), // get our default padding (from top, bottom should be same)
itemHeight = $(this).closest('li').outerHeight(), // get HEIGHT of this item
newPad = ((tallestTab - itemHeight) / 2) + pad; // set calculated padding to variable
$(this).css({ 'padding-top' : newPad, 'padding-bottom' : newPad }); // give item appropiated padding
});
}
// better to wait for everything
$(window).load(function () {
justifyTabs();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment