alwayslearning alwayslearning - 3 months ago 16
jQuery Question

Sliding content script

I have wrote this script to slide the content over on clicking the span.

I need to give the top menu a different background color then the body so need to contain it with the divs

"bblock1"
"container"
"bodymainMAX"
. on do so the script no longer can refer to the next div to slide as its 3 div's away.

works fine if i leave the
"tabbed_content"
and
"slide_content"
together.

Is there any function that i can use to resolve this? Thank you.

WORKING:

<div class="bblock1" style="height:100%;">
<div class="container">
<div class="bodymainMax">
<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg'>&nbsp;</div>
<span class='tab_item'>features</span>
<span class='tab_item'>Addons</span>
<span class='tab_item'>Pricing</span>
<span class='tab_item'>FAQ's</span>
</div>
<div class='slide_content'>
<ul class='tabslider'>
<li>aaaaajjjjmmmmmmmmmmmma</li>
<li>Bbbbbbbbbbbbb</li>
<li>Ccccccccccccc</li>
<li>Ddddddddddddd</li>
</ul>
</div>
</div>
</div>
</div>
</div>


DOESNT WORK:

<div class="bblock1" style="height:100%;">
<div class="container">
<div class="bodymainMax">
<div class='tabbed_content'>
<div class='tabs'>
<div class='moving_bg'>&nbsp;</div>
<span class='tab_item'>features</span>
<span class='tab_item'>Addons</span>
<span class='tab_item'>Pricing</span>
<span class='tab_item'>FAQ's</span>
</div>
</div>
</div>
</div>
<div class="bblock3" style="height:100%;">
<div class="container">
<div class="bodymainMax">
<div class='slide_content'>
<ul class='tabslider'>
<li>aaaaajjjjmmmmmmmmmmmma</li>
<li>Bbbbbbbbbbbbb</li>
<li>Ccccccccccccc</li>
<li>Ddddddddddddd</li>
</ul>
</div>
</div>
</div>
</div>
</div>


SCRIPT:

$(".tab_item").mouseover(function() {
var $this = $(this);
$this.parent().find(".moving_bg").stop().animate({
left: $this.position()['left']
}, { duration: 300 });
});
var TabbedContent = {
current: {i:null, obj:null},
init: function() {
$(".tab_item").click(function() {
var $this = $(this);
TabbedContent.slideContent($this);
});
TabbedContent.current.i = 0;
TabbedContent.current.obj = $(".tabslider li").eq(0);
},
slideContent: function($obj) {
var $container = $obj.cloest(".tabbed_content");
var $tabslider = $container.find(".tabslider");
var i = $obj.index() - 1;
var $lis = $tabslider.find("li");
$new = $lis.eq(i);
if(i === TabbedContent.current.i) {
return;
}
$lis.hide().filter($new.add(TabbedContent.current.obj)).show();
var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
$tabslider.stop().css({
marginLeft: margin_1 + "px"
}).animate({
marginLeft: margin_2 + "px"
}, 1200);
TabbedContent.current.i = i;
TabbedContent.current.obj = $new;
}
}
TabbedContent.init();


JSFIDDLE:

https://jsfiddle.net/r73b14y5/

Answer

I guess this is because you unwrap your tabs content from tabbed_content container. Here is updated slideContent function:

slideContent: function($obj) {
    var $container = $obj.closest(".tabbed_content"),        
        $contentContainer = $('.bodymainMax'),
          $tabslider = $contentContainer.find(".tabslider");
    var i = $obj.index() - 1;
    var $lis = $tabslider.find("li");
    $new = $lis.eq(i);
    if(i === TabbedContent.current.i) {
        return;
    }
    $lis.hide().filter($new.add(TabbedContent.current.obj)).show();
    var margin_1 = (i > TabbedContent.current.i) ? 0 : -$new.width();
    var margin_2 = (i < TabbedContent.current.i) ? 0 : -$new.width();
    $tabslider.stop().css({
        marginLeft: margin_1 + "px"
    }).animate({
        marginLeft: margin_2 + "px"
    }, 1200);
    TabbedContent.current.i = i;
    TabbedContent.current.obj = $new;
}

And working fiddle

Comments