Forums

Rai

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()['left']
    }, {
      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

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

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()['left']
    }, {
      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

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()['left']
    }, {
      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()['left']
    }, {
      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(); });

rosspenman

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

treehouse : what would you like to learn today?

Forums

Duplicate Tabbed Navigation JS