setTimeout() & setInterval() for DOM slideshow

[Noh Way]

I have a stack of DOM elements and I have stored their IDs in an array. I
want to press a button - this code is from that button's event's function-
and have a slideshow as each element is brought to the top, in turn. All
this, with a user definable delay (currently fixed in the code at 5 secs). I
cannot get the loop to stop while the interval timer is counting the time.

Help please ?

Greg

===code below====

var delayed = 5000;
var numberOfSteps = picDescPairArray.length; //this array contains element
IDs for items in a z-order stack
//if there is more than one item in the array, make the z-index 3 for all
of them
if (numberOfSteps > 1){
//change the z-index of all the items to 3
for (i=0; i <= (picDescPairArray.length-1); i++){
document.getElementById(picDescPairArray).style.zIndex = 3;
}

//change the z-index of each item to 5 in turn,
//(changing the previous item's z-index back to 3, providing it isn't the
first one)
for (j=0; j <= (picDescPairArray.length-1); j++){
if (j >= 1){document.getElementById(picDescPairArray[j-1]).style.zIndex =
3;}//the previous item goes down the stack

//a test line without the timer code - seems to work?
//document.getElementById(picDescPairArray[j]).style.zIndex = 5;
alert('next?');

//the next item comes up to the top after a delay of 5 secs - well, it
should???
a=setInterval("document.getElementById(picDescPairArray[j]).style.zIndex
= 5;",delayed);
// I tried - setTimeout('expr',delayed) ...without the clearInterval(a),
obviously ;o)
}
}
clearInterval(a);

 

[Michael Winter]

I have a stack of DOM elements and I have stored their IDs in an
array. I want to press a button - this code is from that button's
event's function - and have a slideshow as each element is brought
to the top, in turn. All this, with a user definable delay
(currently fixed in the code at 5 secs). I cannot get the loop to
stop while the interval timer is counting the time.

Your code requires some restructuring, which I've attempted below.
Unfortunately, without the containing page, I can't test it so I'll have
to leave it to you.

If there are any further problems, please post a URL, or a sample of the
HTML, for this. I, and others, can then check any solutions before posting
them.

var delayed = 5000;
var numberOfSteps = picDescPairArray.length;
var timerID = null;

if ( numberOfSteps > 1 ) {
var j = 0;

setZIndex( getObjRef( picDescPairArray[ 0 ]), 5 );
for ( var i = 1; i < numberOfSteps; ++i ) {
setZIndex( getObjRef( picDescPairArray[ i ]), 3 );
}

timerID = setInterval( function() {
setZIndex( getObjRef( picDescPairArray[ j++ ]), 3 );
setZIndex( getObjRef( picDescPairArray[ j ]), 5 );
if( j == numberOfSteps - 1 ) clearInterval( timerID );
}, delayed );
}

function getObjRef( id ) {
if ( document.getElementById ) {
return document.getElementById( id );
} else if ( document.all ) {
return document.all[ id ];
}
return null;
}

function setZIndex( obj, index ) {
if( obj && obj.style && 'undefined' != typeof obj.style.zIndex )
obj.style.zIndex = index;
}

Hope that helps,
Mike