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(szDiv ID, iState) // 1 visible, 0 hidden
{
var obj = document.layers ? document.layers[szDivID] :
document.getEle mentById ? document.getEle mentById(szDivI D).style :
document.all[szDivID].style;
obj.visibility = document.layers ? (iState ? "show" : "hide") :
(iState ? "visible" : "hidden");
}
function doDelete(obj)
{
var deletePoint = document.getEle mentById(obj);
if (deletePoint.ha sChildNodes())
deletePoint.rem oveChild(delete Point.lastChild );
}
function deleteNode(obj)
{
var deleteSpot = document.getEle mentById(obj);
if (deleteSpot.has ChildNodes())
{
var toDelete = deleteSpot.last Child;
deleteSpot.remo veChild(toDelet e);
}
}
// -->
</script>
</HEAD>
<BODY>
<div id="first" onClick="
if(lastfocus==n ull)
{
lastfocus=this. id;
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
}
else {
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
getElementById( lastfocus).styl e.zIndex=getEle mentById(this.i d).style.zIndex-1;
lastfocus=this. id ;
}
" style="backgrou nd-color:silver;wi dth:300;height: 100;left:100;po sition:absolute ; top:300;">
<a onClick=";toggl eBox('btnfirst' ,1);toggleBox(' first',0);">[x]</a>
FIRST LAYER
</div>
<div id="second" onClick="
if(lastfocus==n ull)
{
lastfocus=this. id;
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
}
else {
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
getElementById( lastfocus).styl e.zIndex=getEle mentById(this.i d).style.zIndex-1;
lastfocus=this. id ;
}
" style="backgrou nd-color:yellow;wi dth:300;height: 100;left:130;po sition:absolute ; top:220;">
<a onClick="toggle Box('btnsecond' ,1);toggleBox(' second',0);">[x]</a>
SECOND LAYER
</div>
<div id="third" onClick="
if(lastfocus==n ull)
{
lastfocus=this. id;
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
}
else {
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
getElementById( lastfocus).styl e.zIndex=getEle mentById(this.i d).style.zIndex-1;
lastfocus=this. id ;
}
" style="backgrou nd-color:skyblue;w idth:300;height :100;left:160;p osition:absolut e; top:250;">
<a onClick="toggle Box('btnthird', 1);toggleBox('t hird',0);">[x]</a>
THIRD LAYER
</div>
<div id="fourth" onClick="
if(lastfocus==n ull)
{
lastfocus=this. id;
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
}
else {
getElementById( this.id).style. zIndex=getEleme ntById(lastfocu s).style.zIndex +1;
getElementById( lastfocus).styl e.zIndex=getEle mentById(this.i d).style.zIndex-1;
lastfocus=this. id ;
}
" style="backgrou nd-color:green;wid th:300;height:1 00;left:190;pos ition:absolute; top:170;">
<a onClick="toggle Box('btnfourth' ,1);toggleBox(' fourth',0);">[x]</a>
FOURTH LAYER
</div>
<script type="text/javascript">
<!--
var theElement=docu ment.getElement ById('first');
-->
</script>
<!-- To Hide The DIV -->
<input style="visibili ty:hidden" id="btnfirst" type="button" onClick="toggle Box('btnfirst', 0);toggleBox('f irst',1)" value="First" />
<input style="visibili ty:hidden" id="btnsecond" type="button" onClick="toggle Box('btnsecond' ,0);toggleBox(' second',1)" value="Second" />
<input style="visibili ty:hidden" id="btnthird" type="button" onClick="toggle Box('btnthird', 0); toggleBox('thir d',1)" value="Third" />
<input style="visibili ty:hidden" id="btnfourth" type="button" onClick="toggle Box('btnfourth' ,0); toggleBox('four th',1)" value="Fourth" />
</HTML>
[/HTML]
