By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,022 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,022 IT Pros & Developers. It's quick & easy.

Mozilla & IE object model differences?

P: n/a
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(currentlyHighestZIndexObjI d).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[i]).style.zIndex >
currentlyHighestZIndex){
sameSoFar = false;
currentlyHighestZIndex =
document.getElementById(picDescPairArray[i]).style.zIndex;
currentlyHighestZIndexObjId = picDescPairArray[i];
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[i]).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();
}
}
}
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
After all that, it turned out to be a typo in the PHP, that meant that the
one of the button's image tags was not properly terminated with closing
angled brackets.

Sorry to waste your time....
Greg (again)

:o) (o: :o) (o: :o) (o: :o) (o:
On Wed, 21 Jan 2004 01:28:48 +0000, Greg wrote:
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(currentlyHighestZIndexObjI d).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[i]).style.zIndex >
currentlyHighestZIndex){
sameSoFar = false;
currentlyHighestZIndex =
document.getElementById(picDescPairArray[i]).style.zIndex;
currentlyHighestZIndexObjId = picDescPairArray[i];
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[i]).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();
}
}
}

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.