Give help. Get help.
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();
});
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.
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();
});
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”`.
You must be logged in to reply to this topic.