Tabbed Slider on Mouseover

Question

Here is the fiddle I'm working with: http://jsfiddle.net/V6Vmh/5/

$(document).ready(function () {

    $('.lava').css({left:$('span.item:first').position()['left']});

    $('.item').mouseover(function () {
        $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});

        $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
    });

});

I could not add one more tab and change the size of it, there are many width values in the CSS code which confuses me. When I attempt to change something everything is ruined. Can you show me some quick tip on this fiddle as to how I add more tabs and what css property I should change after adding the tabs.

Answer 1

Looking through your code, there's some invalid markup (you have ULs - list containers - with no LIs - list items). I've created an updated Fiddle that corrects the code (to some degree) and shows an extra content item:

http://jsfiddle.net/V6Vmh/6/

You should be able to add more, but there are five widths you'll need to change (line numbers refer to the CSS panel on the Fiddle):

1. 'all the child elements are refering to this width' (line 17): this is the width of the container.
2. 'width = half size of #moving_tab' (line 47): this is the width of each tab - should be the width of the container divided by number of tabs (in this case: 300/3 = 100)
3. 'width = half size of #moving_tab' (line 64): this should be the same as the above (it's the moving blue box behind the tabs
4. 'width is width of #moving_tab times 2' (line 87): this is the width of the list that holds the content items. It should be the width of the container times the number of tabs (in this case, 300x3 = 900)
5. 'width is the same with #moving_tab' (line 96): this is the width for each content element. Should be the width of the container, minus the left and right pading (in this case: 300 - 10 -10 = 280)

Hope this helps...