Thursday, October 2, 2008

[jQuery] Re: There must be a better way to write this

You could try something like this without the timers. It's a script I
wrote for a sidebar, but it handles the fade no matter which direction
you travel (was meant for an automated fade->to->next sidebar).
I will have to check the nth-child to see if it would fit my own
scenario if you feel it operates quicker.

/*
** Written by Steven K. Melendez.
** If any bugs are exhibited, please email:
** melendez.stevenk@gmail.com.
*/
var nHeadArray = new Array() //Headline of informative side article.
Size of nHeadArray must match nBodyArray
nHeadArray[0] = "xxx";
nHeadArray[1] = "xxx";

var nBodyArray = new Array() //Body of informative side article. Size
of nBodyArray must match nHeadArray
nBodyArray[0] = "xxx";
nBodyArray[1] = "xxx"

var q = nBodyArray.length
var x = 0

var prev = (q-1)
var next = (x+1)
var dTime = 15000 //Delay between array change in milliseconds
var fTime = 250 //Fade in/out time in milliseconds

var prevTime = setTimeout('nextFadeOut(' + next + ')', dTime)
var nextTime = setTimeout('nextFadeOut(' + next + ')', dTime)

$(document).ready(function(){ // Initial function after the page is
loaded and ready to go.
document.getElementById('sb_cHead').innerHTML = nHeadArray[x]
document.getElementById('sb_cBody').innerHTML = nBodyArray[x]

document.getElementById('prev').href = "Javascript:previous(" +
prev + ")"
document.getElementById('next').href = "Javascript:nextious(" +
next + ")"

$('#sideBar_content').fadeIn(fTime);
});

function previous(mynum){
clearTimeout(nextTime)
clearTimeout(prevTime)

document.getElementById('sb_cHead').innerHTML = nHeadArray[mynum];
document.getElementById('sb_cBody').innerHTML = nBodyArray[mynum];

$('#sideBar_content').fadeIn(fTime);

if (mynum == 0){
prev = (q-1)
document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
}
else{
prev = (mynum-1)
document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
}

if (next == 0){
next = (q-1)
document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
}
else{
next = (next-1)
document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
}

prevTime = setTimeout('prevFadeOut(' + prev + ')', dTime)

}

function nextious(mynum){
clearTimeout(nextTime)
clearTimeout(prevTime)

document.getElementById('sb_cHead').innerHTML = nHeadArray[mynum];
document.getElementById('sb_cBody').innerHTML = nBodyArray[mynum];

$('#sideBar_content').fadeIn(fTime);

if (next == (q-1)){
next = x
document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
}
else{
next++
document.getElementById('next').href =
"Javascript:nextFadeOut(" + next + ")"
}

if (mynum == 0){
prev = (q-1)
document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
}
else{
prev = (mynum-1)
document.getElementById('prev').href =
"Javascript:prevFadeOut(" + prev + ")"
}

nextTime = setTimeout('nextFadeOut(' + next + ')', dTime)

}

function nextFadeOut(mynum){
clearTimeout(nextTime)
clearTimeout(prevTime)
$('#sideBar_content').fadeOut(fTime);
nextTime = setTimeout('nextious(' + mynum + ')', fTime)
}

function prevFadeOut(mynum){
clearTimeout(nextTime)
clearTimeout(prevTime)
$('#sideBar_content').fadeOut(fTime);
prevTime = setTimeout('previous(' + mynum + ')', fTime)
}

function pauseSideBar(){
clearTimeout(nextTime)
clearTimeout(prevTime)
}

No comments: