CODEWITHSUNDEEP
jquerytabsslidermouseoversliding
ofer dofer
ofer dofer

Reputation: 621

Tabbed Slider on Mouseover

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.

Upvotes: 0

Views: 728

Answers (1)

MassivePenguin
MassivePenguin

Reputation: 3711

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...

Upvotes: 2

Related Questions