Duplicate Tabbed Navigation JS

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

[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”`.

[Author]

Posts