Home › Forums › JavaScript › Duplicate Tabbed Navigation JS
- This topic is empty.
-
AuthorPosts
-
January 23, 2013 at 4:25 pm #42197
Rai
MemberHi 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();
});January 23, 2013 at 4:29 pm #122056Rai
MemberWhat 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.
January 23, 2013 at 4:33 pm #122057Rai
MemberFor 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.
January 23, 2013 at 4:47 pm #122058Rai
MemberDone.
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 #122060rosspenman
ParticipantI’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”`.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.