Question

Recently I asked a question on stackoverflow about multiline tabs. Below is the link

multi-line tabs

I was just wondering if its possible to make them like windows styled tabs, that is if a tab in first line is selected, I want to push it to the second line. The problem I have is I am creating dynamic tabs. Is it possible using Javascript/jquery, to calculate the widths of each tab and determine at which point a second line of tabs would be started?

Thanks

Answer 1

UPDATED added Tab Auto-Resize.

Tested on Chrome / FF

• DEMO & SOURCE: http://ask.altervista.org/demo/microsoft-styled-tabs/

    $(function() {
        setLines();
        $('#windows-properties li a').click(function(e) {
        e.preventDefault();   
        var $li = $(this).parent(); 
            $(this.hash).show().siblings('.property-content').hide();
            var liTp =  parseInt($li.position().top);
            if (liTp < lastLiPos) {
                $('li.line-' + liTp).wrapAll('<div id="move-lis"></div>');
                $('#move-lis').insertAfter('#windows-properties li:last');
                $('li.line-' + liTp).unwrap();
                setLines();
            }
            $li.addClass('selected').siblings('li').removeClass('selected');
        });
        var $lstLi = $('#windows-properties li:last');
        var lastLiPos =  parseInt($lstLi.addClass('selected').position().top);
        $('.property-content:last').show();
    });
//.... other part of code in the demo source ...