I'm trying to write a function for featured slider.
Basically, on one page I want the rotate speed to be 10000 and on another page I want the speed to be 3000.
I have the two functions separately - which works - but i know there would be a cleaner/better way of doing it without repeating all the code...
Can anyone help?
$(function(){
$("body.homePage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);
$("body.homePage #featured").hover(
function() {
$("body.homePage #featured").tabs("rotate",0,true);
},
function() {
$("body.homePage #featured").tabs("rotate",10000,true);
}
);
});
$(function(){
$("body.boatDetailsPage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);
$("body.boatDetailsPage #featured").hover(
function() {
$("body.boatDetailsPage #featured").tabs("rotate",0,true);
},
function() {
$("body.boatDetailsPage #featured").tabs("rotate",3000,true);
}
);
});
Something like
if ($('body').hasClass('homePage')) {
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",10000,true);
}
);
} else {
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",3000,true);
}
);
}
Try this:
$(function(){
// if body has class X speed will be 10000, else 3000
var rotateSpeed = $("body").hasClass('X') ? 10000 : 3000;
$("body.boatDetailsPage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", rotateSpeed, true);
$("body.boatDetailsPage #featured").hover(
function() {
$("body.boatDetailsPage #featured").tabs("rotate",0,true);},
function() {
$("body.boatDetailsPage #featured").tabs("rotate",rotateSpeed,true);
});
});