Grow your CSS skills. Land your dream job.

Duplicate Tabbed Navigation JS

  • Rai
    # January 23, 2013 at 4:25 pm

    Hi guys,
    I want to use tabbed content in two parts of my site but I don´t know how to point two selectors in the JS.

    Please someone can tell me how should I add more than one class on the JS?, here is the code with single class point it.

    //tab effects

    var TabbedContent = {
    init: function() {
    $(“.tab_item-trespasos”).mouseover(function() {

    var background = $(this).parent().find(“.moving_bg-trespasos”);

    $(background).stop().animate({
    left: $(this).position()
    }, {
    duration: 300
    });

    TabbedContent.slideContent($(this));

    });
    },

    slideContent: function(obj) {

    var margin = $(obj).parent().parent().find(“.slide_content-trespasos”).width();
    margin = margin * ($(obj).prevAll().size() – 1);
    margin = margin * -1;

    $(obj).parent().parent().find(“.tabslider-trespasos”).stop().animate({
    marginLeft: margin + “px”
    }, {
    duration: 300
    });
    }
    }

    $(document).ready(function() {
    TabbedContent.init();
    });

    Rai
    # January 23, 2013 at 4:29 pm

    What I Need is to add more then one .find( selector here ) or how can I duplicate it to achieve the same effect in two places on the site.

    Rai
    # January 23, 2013 at 4:33 pm

    For example, I try this: //tab effects

    var TabbedContent = {
    init: function() {
    $(“.tab_item-trespasos”).mouseover(function() {

    var background = $(this).parent().find(“.moving_bg-trespasos”);

    $(background).stop().animate({
    left: $(this).position()
    }, {
    duration: 300
    });

    TabbedContent.slideContent($(this));

    });
    },

    slideContent: function(obj) {

    var margin = $(obj).parent().parent().find(“.slide_content-trespasos”).width();
    margin = margin * ($(obj).prevAll().size() – 1);
    margin = margin * -1;

    $(obj).parent().parent().find(“.tabslider-trespasos”).stop().animate({
    marginLeft: margin + “px”
    }, {
    duration: 300
    });
    }
    }

    $(document).ready(function() {
    TabbedContent.init();
    });

    But does not work.

    Rai
    # January 23, 2013 at 4:47 pm

    Done.
    The way is to duplicate the file and put other name as this:
    And in the header you need to call it twice, each file has a different name off course.

    File one:

    //tab effects

    var AnotherName = {
    init: function() {
    $(“.tab_item-trespasos”).mouseover(function() {

    var background = $(this).parent().find(“.moving_bg-trespasos”);

    $(background).stop().animate({
    left: $(this).position()
    }, {
    duration: 300
    });

    AnotherName.slideContent($(this));

    });
    },

    slideContent: function(obj) {

    var margin = $(obj).parent().parent().find(“.slide_content-trespasos”).width();
    margin = margin * ($(obj).prevAll().size() – 1);
    margin = margin * -1;

    $(obj).parent().parent().find(“.tabslider-trespasos”).stop().animate({
    marginLeft: margin + “px”
    }, {
    duration: 300
    });
    }
    }

    $(document).ready(function() {
    AnotherName.init();
    });

    //tab effects div,span,p.myClass

    var TabbedContent = {
    init: function() {
    $(“.tab_item”).mouseover(function() {

    var background = $(this).parent().find(“.moving_bg”);

    $(background).stop().animate({
    left: $(this).position()
    }, {
    duration: 300
    });

    TabbedContent.slideContent($(this));

    });
    },

    slideContent: function(obj) {

    var margin = $(obj).parent().parent().find(“.slide_content”).width();
    margin = margin * ($(obj).prevAll().size() – 1);
    margin = margin * -1;

    $(obj).parent().parent().find(“.tabslider”).stop().animate({
    marginLeft: margin + “px”
    }, {
    duration: 300
    });
    }
    }

    $(document).ready(function() {
    TabbedContent.init();
    });

    # January 23, 2013 at 5:07 pm

    I’m not entirely sure what you’re trying to do here, but I think you could have used a comma inside the selector. Like this: `”.moving_bg-trespasos, .moving_bg”`.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".