[Plugin: WordPress Post Tabs] Tab widths fill entire available space (code provided)

  • Todd

    (@track23)


    12 years, 1 month ago

    Hi, all. Just wanted to share a useful bit of code (to me anyway) for setting tab widths as a percentage of available tab space based on how many tabs are present. It cleans the tabs up quite a bit to have them span the entire width and not be shoved over to the left with all the empty space on the right. The code uses jQuery, but it could be done with regular JavaScript as well. It even works with multiple tab sets on a page.

    You will need to modify your CSS for the tab links slightly (I’ve left out the impertinent CSS, but don’t delete it):
    .ui-tabs .ui-tabs-nav li a { padding-left: 0 !important; padding-right: 0 !important; width:100%; text-align:center;}
    Explanation: set left and right padding to 0, set width to 100% (of parent element), and center the text.

    Next, insert the following jQuery code into your page:

    <script type="text/javascript">
// <![CDATA[
(function($) {
	$(document).ready( function() {
		// calculate tab widths as percentage of available tab space based on how many tabs are present - works with multiple tab sets on a page
		$(".ui-tabs .ui-tabs-nav").each(function(index) {
			var tabs = $(this).children("li");
			var width = 100/tabs.length;
			tabs.each(function(index) {
				$(this).css('width',width+"%");
			});
		});
	});
})(jQuery);
// ]]>
</script>

    http://wordpress.org/extend/plugins/wordpress-post-tabs/

Viewing 1 replies (of 1 total)
  • alaasema

    (@alaasema)

    12 years ago

    Nice code, you can also do it simply using CSS only, without need to any JS code.
    The trick here is treating the list as a table

    .ui-tabs .ui-tabs-nav{
	display: table;
}
.ui-tabs .ui-tabs-nav li{
	display: table-cell;
	position: static;
	float:none;
}

    That’s it, it works with any list or div menu.

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: WordPress Post Tabs] Tab widths fill entire available space (code provided)’ is closed to new replies.