469,909 Members | 1,799 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,909 developers. It's quick & easy.

problem with Firefox 2.0 behavior with this script

Can somebody please help me, i tried playing around with IE6 and Firefox 2.0 browser for setting zIndexes and hide & show of divs. It seems to work to both. I tried repeatedly clicking on different divs on IE and no problem, but on firefox if I do the same, some divs just got hidden without notice. try clicking variably on different divs and it will happen...

How do I make this stable?

-----------------------------
[HTML]
<HTML>
<HEAD>
<TITLE>LAYER TEST</TITLE>
<script type="text/javascript">
<!--
var lastfocus;


function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
var obj = document.layers ? document.layers[szDivID] :
document.getElementById ? document.getElementById(szDivID).style :
document.all[szDivID].style;
obj.visibility = document.layers ? (iState ? "show" : "hide") :
(iState ? "visible" : "hidden");
}
function doDelete(obj)
{
var deletePoint = document.getElementById(obj);
if (deletePoint.hasChildNodes())
deletePoint.removeChild(deletePoint.lastChild);

}

function deleteNode(obj)
{
var deleteSpot = document.getElementById(obj);
if (deleteSpot.hasChildNodes())
{
var toDelete = deleteSpot.lastChild;
deleteSpot.removeChild(toDelete);
}
}

// -->
</script>
</HEAD>
<BODY>

<div id="first" onClick="
if(lastfocus==null)
{
lastfocus=this.id;
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
}
else {
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
getElementById(lastfocus).style.zIndex=getElementB yId(this.id).style.zIndex-1;
lastfocus=this.id ;
}
" style="background-color:silver;width:300;height:100;left:100;positio n:absolute; top:300;">
<a onClick=";toggleBox('btnfirst',1);toggleBox('first ',0);">[x]</a>
FIRST LAYER
</div>

<div id="second" onClick="
if(lastfocus==null)
{
lastfocus=this.id;
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
}
else {
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
getElementById(lastfocus).style.zIndex=getElementB yId(this.id).style.zIndex-1;
lastfocus=this.id ;
}
" style="background-color:yellow;width:300;height:100;left:130;positio n:absolute; top:220;">

<a onClick="toggleBox('btnsecond',1);toggleBox('secon d',0);">[x]</a>
SECOND LAYER
</div>
<div id="third" onClick="
if(lastfocus==null)
{
lastfocus=this.id;
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
}
else {
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
getElementById(lastfocus).style.zIndex=getElementB yId(this.id).style.zIndex-1;
lastfocus=this.id ;
}
" style="background-color:skyblue;width:300;height:100;left:160;positi on:absolute; top:250;">
<a onClick="toggleBox('btnthird',1);toggleBox('third' ,0);">[x]</a>
THIRD LAYER
</div>

<div id="fourth" onClick="
if(lastfocus==null)
{
lastfocus=this.id;
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
}
else {
getElementById(this.id).style.zIndex=getElementByI d(lastfocus).style.zIndex+1;
getElementById(lastfocus).style.zIndex=getElementB yId(this.id).style.zIndex-1;
lastfocus=this.id ;
}
" style="background-color:green;width:300;height:100;left:190;position :absolute; top:170;">
<a onClick="toggleBox('btnfourth',1);toggleBox('fourt h',0);">[x]</a>
FOURTH LAYER
</div>


<script type="text/javascript">
<!--
var theElement=document.getElementById('first');
-->
</script>

<!-- To Hide The DIV -->
<input style="visibility:hidden" id="btnfirst" type="button" onClick="toggleBox('btnfirst',0);toggleBox('first' ,1)" value="First" />
<input style="visibility:hidden" id="btnsecond" type="button" onClick="toggleBox('btnsecond',0);toggleBox('secon d',1)" value="Second" />
<input style="visibility:hidden" id="btnthird" type="button" onClick="toggleBox('btnthird',0); toggleBox('third',1)" value="Third" />
<input style="visibility:hidden" id="btnfourth" type="button" onClick="toggleBox('btnfourth',0); toggleBox('fourth',1)" value="Fourth" />


</HTML>

[/HTML]
Nov 23 '06 #1
2 4391
sreine
1
Forgive me if this reply appears twice. There seemed to be an error when I hit submit the first time and I never saw the reply show up in the forum so and resending it.

I think I understand what is going wrong with your script as I am seeing the same thing with mine when I try to do getElementById().style.zIndex = getElementById().style.zIndex+1. I used firebug (great tool) to debug and the following is happening. If I happen to have a zindex of 14 and increment by 1, the result is 141, not 15. The addition being done is character based, not numeric. I have tried several workarounds, none solve the problem. I have researched the issue on the web (finally found this post) and the only other info I have found is a few people saying that the element on which the zindex is being referenced must have one of the position attributes set. Unfortunately, I already have position attributes set on all the div elements I am trying to operate on.

Maybe with this info, you can work a solution and share it with me,

thanks, Steve
Jan 30 '07 #2
acoder
16,027 Expert Mod 8TB
Hi Steve, welcome to The Scripts.

Try using parseInt on the zindex.
Jan 31 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by R. Rajesh Jeba Anbiah | last post: by
3 posts views Thread by shreddie | last post: by
10 posts views Thread by Danny | last post: by
12 posts views Thread by Joel Byrd | last post: by
1 post views Thread by KPS | last post: by
18 posts views Thread by len.hartley | last post: by
8 posts views Thread by Chris Cap | last post: by
1 post views Thread by Waqarahmed | last post: by
reply views Thread by Salome Sato | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.