WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Post Tabs
Tab widths fill entire available space (code provided) (2 posts)

  1. Todd
    Member
    Posted 2 years 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/

  2. alaasema
    Member
    Posted 2 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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic