Last active
August 29, 2015 13:56
-
-
Save scamartist26/9273076 to your computer and use it in GitHub Desktop.
Twitter Bootstrap Tab navigation width and height justification plugin.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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