1
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]
