G
Greg
The following code works fine on Mozilla but generates an error* on IE,
when the button calling the function is pressed and the slideshow is
either on the first slide or last slide. * I can't remember the exact
error and I'm on Linux/Mozilla at the moment, but I think it had a problem
with the object model?!?
The slideshow has a stack of div tags and the buttons are used to change
the z-order. Each div contains two other divs: one with a picture and one
with a description.
All this is generated on the fly in php, from a mySQL database, hence the
DOM parsing to find the appropriate div to bring to the front.
Thanks,
Greg
======================
//The code that calls this function is an image in a table: <img
id='ex2-stepForward' name='stepForward'
src='./images/site/stepForward.gif'
width='24'
height='24'
border='0'
onmouseover="changeImages(this.id, './images/site/stepForward-over.gif');
return true; "
onmouseout="changeImages(this.id, './images/site/stepForward.gif');
return true; "
onmousedown="changeImages(this.id, './images/site/stepForward-down.gif');
return true; "
onmouseup="changeImages(this.id, './images/site/stepForward-over.gif');
stepOne(event, this, 'forward'); return true; ">
============================
//Steps back and forward in the stack of image/description containers
//for the group associated with the control pressed function stepOne(evt,
thisExercise, direction){
var nodeStep = thisExercise;
//parse UP the tree by parent
while (nodeStep.className != 'maskGroup'){
nodeStep = nodeStep.parentNode;
}
//parse DOWN the tree by sibling
while (nodeStep.className != 'picDescPair'){
nodeStep = nodeStep.nextSibling;
}
//this is the first PicDescPair node
var firstPicDescPairNode = nodeStep;
//this is the last sibling (We'll parse from firstPicDescPairNode to the
last sibling looking for other PicDescPairs) var lastSiblingNode =
firstPicDescPairNode.parentNode.lastChild; //use an array to store all
the PicDescPairs found var arrayIdx = 0;
var picDescPairArray = new Array(0);
//store the ID of the first one
picDescPairArray[arrayIdx] = firstPicDescPairNode.id; arrayIdx ++;
// loop until the last sibling, looking for more. A DO/WHILE loop might
be preferable? Check limiting case of single nodeStep while (nodeStep !=
lastSiblingNode){
nodeStep = nodeStep.nextSibling;
if ((nodeStep.className == 'picDescPair') && (nodeStep.nodeName ==
'DIV')){
picDescPairArray[arrayIdx] = nodeStep.id; //store the ID of each one
arrayIdx ++;
}
}
// The above loop omits the last sibling, so add it to the array after
the loop completes if ((nodeStep.className == 'picDescPair') &&
(nodeStep.nodeName == 'DIV')){
picDescPairArray[arrayIdx] = nodeStep.id; //store the ID
}
}
/*Look in the array for the div with the highest z-index or use the last
div, if the z-indexes are all the same. Record it.
Set all the div.z-indexes to a low number (3) Then using the div
preceding the recorded div increase the z-index to a higher number (5).
If it is the first, ignore the instruction. */
var arrayIndexOfHighestZIndexObj = 0; var lengthOfArray =
picDescPairArray.length; //last entry is on top (subtract 1 as it's a '0'
based array) var currentlyHighestZIndexObjId =
picDescPairArray[lengthOfArray-1]; var currentlyHighestZIndex =
document.getElementById(currentlyHighestZIndexObjId).style.zIndex;
//checking to see if anything is higher than the last item var sameSoFar
= true;
for (var i=0; i <= picDescPairArray.length-1; i++){
if (document.getElementById(picDescPairArray).style.zIndex >
currentlyHighestZIndex){
sameSoFar = false;
currentlyHighestZIndex =
document.getElementById(picDescPairArray).style.zIndex;
currentlyHighestZIndexObjId = picDescPairArray;
arrayIndexOfHighestZIndexObj = i;
}else if (sameSoFar){ //the last one through - just in case they're all
}the same level
arrayIndexOfHighestZIndexObj = i;
}
}
//Set parameters to step in correct direction if (direction == 'back'){
var deltaStep = 1;
var limitingCase = picDescPairArray.length-1;
} else if (direction == 'forward'){
var deltaStep = -1;
var limitingCase = 0;
}
//if this is not the limiting extent (first or last) item in the array,
change the z-index of all the items to 3 if (arrayIndexOfHighestZIndexObj
!= limitingCase){
for (i=0; i <= picDescPairArray.length-1; i++){
document.getElementById(picDescPairArray).style.zIndex = 3;
}
}
var newHighest = arrayIndexOfHighestZIndexObj + deltaStep;
document.getElementById(picDescPairArray[newHighest]).style.zIndex = 5;
//------------------
// Stop click event propagation in parent div hierarchy if (document.all)
{
// Code for IE browsers
window.event.cancelBubble=true;
} else if (!document.all && document.getElementById) {
// Code for Mozilla browsers
evt.stopPropagation();
}
}
}
when the button calling the function is pressed and the slideshow is
either on the first slide or last slide. * I can't remember the exact
error and I'm on Linux/Mozilla at the moment, but I think it had a problem
with the object model?!?
The slideshow has a stack of div tags and the buttons are used to change
the z-order. Each div contains two other divs: one with a picture and one
with a description.
All this is generated on the fly in php, from a mySQL database, hence the
DOM parsing to find the appropriate div to bring to the front.
Thanks,
Greg
======================
//The code that calls this function is an image in a table: <img
id='ex2-stepForward' name='stepForward'
src='./images/site/stepForward.gif'
width='24'
height='24'
border='0'
onmouseover="changeImages(this.id, './images/site/stepForward-over.gif');
return true; "
onmouseout="changeImages(this.id, './images/site/stepForward.gif');
return true; "
onmousedown="changeImages(this.id, './images/site/stepForward-down.gif');
return true; "
onmouseup="changeImages(this.id, './images/site/stepForward-over.gif');
stepOne(event, this, 'forward'); return true; ">
============================
//Steps back and forward in the stack of image/description containers
//for the group associated with the control pressed function stepOne(evt,
thisExercise, direction){
var nodeStep = thisExercise;
//parse UP the tree by parent
while (nodeStep.className != 'maskGroup'){
nodeStep = nodeStep.parentNode;
}
//parse DOWN the tree by sibling
while (nodeStep.className != 'picDescPair'){
nodeStep = nodeStep.nextSibling;
}
//this is the first PicDescPair node
var firstPicDescPairNode = nodeStep;
//this is the last sibling (We'll parse from firstPicDescPairNode to the
last sibling looking for other PicDescPairs) var lastSiblingNode =
firstPicDescPairNode.parentNode.lastChild; //use an array to store all
the PicDescPairs found var arrayIdx = 0;
var picDescPairArray = new Array(0);
//store the ID of the first one
picDescPairArray[arrayIdx] = firstPicDescPairNode.id; arrayIdx ++;
// loop until the last sibling, looking for more. A DO/WHILE loop might
be preferable? Check limiting case of single nodeStep while (nodeStep !=
lastSiblingNode){
nodeStep = nodeStep.nextSibling;
if ((nodeStep.className == 'picDescPair') && (nodeStep.nodeName ==
'DIV')){
picDescPairArray[arrayIdx] = nodeStep.id; //store the ID of each one
arrayIdx ++;
}
}
// The above loop omits the last sibling, so add it to the array after
the loop completes if ((nodeStep.className == 'picDescPair') &&
(nodeStep.nodeName == 'DIV')){
picDescPairArray[arrayIdx] = nodeStep.id; //store the ID
}
}
/*Look in the array for the div with the highest z-index or use the last
div, if the z-indexes are all the same. Record it.
Set all the div.z-indexes to a low number (3) Then using the div
preceding the recorded div increase the z-index to a higher number (5).
If it is the first, ignore the instruction. */
var arrayIndexOfHighestZIndexObj = 0; var lengthOfArray =
picDescPairArray.length; //last entry is on top (subtract 1 as it's a '0'
based array) var currentlyHighestZIndexObjId =
picDescPairArray[lengthOfArray-1]; var currentlyHighestZIndex =
document.getElementById(currentlyHighestZIndexObjId).style.zIndex;
//checking to see if anything is higher than the last item var sameSoFar
= true;
for (var i=0; i <= picDescPairArray.length-1; i++){
if (document.getElementById(picDescPairArray).style.zIndex >
currentlyHighestZIndex){
sameSoFar = false;
currentlyHighestZIndex =
document.getElementById(picDescPairArray).style.zIndex;
currentlyHighestZIndexObjId = picDescPairArray;
arrayIndexOfHighestZIndexObj = i;
}else if (sameSoFar){ //the last one through - just in case they're all
}the same level
arrayIndexOfHighestZIndexObj = i;
}
}
//Set parameters to step in correct direction if (direction == 'back'){
var deltaStep = 1;
var limitingCase = picDescPairArray.length-1;
} else if (direction == 'forward'){
var deltaStep = -1;
var limitingCase = 0;
}
//if this is not the limiting extent (first or last) item in the array,
change the z-index of all the items to 3 if (arrayIndexOfHighestZIndexObj
!= limitingCase){
for (i=0; i <= picDescPairArray.length-1; i++){
document.getElementById(picDescPairArray).style.zIndex = 3;
}
}
var newHighest = arrayIndexOfHighestZIndexObj + deltaStep;
document.getElementById(picDescPairArray[newHighest]).style.zIndex = 5;
//------------------
// Stop click event propagation in parent div hierarchy if (document.all)
{
// Code for IE browsers
window.event.cancelBubble=true;
} else if (!document.all && document.getElementById) {
// Code for Mozilla browsers
evt.stopPropagation();
}
}
}
) (o: