CODEWITHSUNDEEP
javascriptjquery
alwayslearning
alwayslearning

Reputation: 411

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/

Upvotes: 0

Views: 33

Answers (1)

Den Kison
Den Kison

Reputation: 1084

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

Upvotes: 1

Related Questions