PDA

Click to See Complete Forum and Search --> : hiding dropdown menus when using z-index

MissD2U
01-06-2003, 01:22 PM
Can anyone please help me or give me suggestion on how to fix this problem. When I click on the different tabs, the elements from both forms show up instead of just one at a time. Here is the code behind it.....ANY suggestions or fixes will be welcomed!! :)


<BODY>
<script>
<!-- Begin
// ############## SIMPLE BROWSER SNIFFER

if (document.layers) {
navigator.family = "nn4"
}

if (document.all) {
navigator.family = "ie4"
}

if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {
navigator.family = "gecko"
}

if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {
navigator.family = 'opera';
}

toplevel = "4";

function riseup (box) {

toplevel++;

if (navigator.family == "ie4"){
document.all[box].style.zIndex = toplevel;
}

if (navigator.family == "opera" || navigator.family == "gecko"){
document.getElementById(box).style.zIndex = toplevel;
}
}
//-->
</script>

<!--First Tab Data-->
<div id="box1" style="position:absolute; background-color:#d3d3d3; padding:5; visibility:show; left:10px; top:80px; width:350; height:300; z-index:4">
<form name="FormInsert" method="post" action="test.asp?SID=<%=SID%>&OID=<%=OID%>&ACT=INSERT">
<BR><BR>
<h3>Duty Position Web Application Admin</h3>

<b>Step 1:</b>&nbsp;<select id="selFunctArea" name="selFunctArea" language=javascript onchange="UpdateSelect('selDtyPos','FormInsert',this.options[this.selectedIndex].value,oDty); UpdateSelect('selDtyApps','FormInsert',this.options[this.selectedIndex].value,oApp);">
<option>[Select Functional Area]</OPTION>

</select>
<BR>
<b>Step 2:</b>&nbsp;<select id="selDtyPos" name="selDtyPos" language=javascript onchange="document.FormInsert.txtDtyID.value = this.options[this.selectedIndex].value;">
<option>[Select Duty Position]</option>
<option></option>
</select>
<BR>
<b>Step 3:</b>&nbsp;<select id="selDtyApps" name="selDtyApps" language=javascript onchange="UpdateSelect('selDtyMods','FormInsert',this.options[this.selectedIndex].value,oMod);">
<option>[Select Application]</option>
</select>
<BR>
<b>Step 4:</b>&nbsp;<select id="selDtyMods" name="selDtyMods" language=javascript onchange="UpdateSelect('selDtyProcs','FormInsert',this.options[this.selectedIndex].value,oProc);">
<option>[Select Module]</option>
</select>
<BR>
<b>Step 5:</b>&nbsp;<select id="selDtyProcs" name="selDtyProcs">
<option>[Select Process]</option>
</select>
<BR><BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT type="submit" value="Submit" id=submit1 name=submit1 onClick="return validateForm();">
<INPUT type="hidden" id="txtDtyID" name="txtDtyID">
</form>
</div>

<!--Second Tab Data-->
<div id="box2" style="position:absolute; background-color:#d3d3d3; padding:5; visibility:show; left:10px; top:80px; width:350; height:300; z-index:3">
<form name="FormCurrDtyApps" method="post" action="test.asp?SID=<%=SID%>&OID=<%=OID%>&ACT=SHOWCURAPPS">
<BR><BR>
<h3>Duty Position Web Application Admin</h3>

<SELECT id="selDtyPos_2" name="selDtyPos_2">
<OPTION>[Select Duty Position]</OPTION>
</SELECT>
&nbsp;&nbsp;
<INPUT type="submit" value="Submit" id=submit3 name=submit3></td>

</form>
</div>


<div id="tab1" onclick="javascript:riseup('box1');" style="cursor:hand; position:absolute; background-color:#d3d3d3; visibility:show; left:10px; top:60px; width:65; height:20; z-index:3">
<b>Add Apps</b>
</div>

<div id="tab2" onclick="javascript:riseup('box2');" style="cursor:hand; position:absolute; background-color:#d3d3d3; visibility:show; left:75px; top:60px; width:65; height:20; z-index:3">
<b>Delete Apps</b>
</div>

<!-- THIS TABLE IS USED TO BLOCK THE AREA WHERE THE TABULAR NAV IS PLACED -->
<table width=400 height=300 align=left>
<tr>
<td> </td>
</tr>
</table>


<script>
// ################# THIS FIXES GECKO DIV PLACEMENT
<!--Begin
if (navigator.family == "gecko"){
for (x=1;x<6;x++) {
document.getElementById("tab"+x).style.left = 120;
}
}
// End -->
</script>

</BODY>
jdavia
01-06-2003, 01:59 PM
You had left:10px. It wasn't enough to move the second form from over the first form.
I changed it to 380px. Make your own adlustment and see if this does it.

<!--First Tab Data-->
<div id="box1" style="position:absolute; background-color:#d3d3d3; padding:5; visibility:show;
left:380px; top:80px; width:350; height:300; z-index:4">
MissD2U
01-06-2003, 02:35 PM
Sorry, I don't think I explained the problem correctly. Both <DIV> tags are supposed to overlap because it is supposed to act like a Tab Scroll Menu. So, when you click on "Add Apps", only the data from that corresponding <DIV> tag should show and vice versa, but both are showing up simultaneously. Here is the original example of code that works correctly. And it does so b/c there are no forms in the code. My code does contain forms and I think this is where the problem lies. Can you shed any further light on this??

Thanks a million!!


****Original, Correct Code Example****
<BODY>



<script>

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Original: Patrick Lewis (gtrwiz@aol.com) -->

<!-- Web Site: http://www.patricklewis.net -->

<!-- Begin



// ############## SIMPLE BROWSER SNIFFER

if (document.layers) {navigator.family = "nn4"}

if (document.all) {navigator.family = "ie4"}

if (window.navigator.userAgent.toLowerCase().match(/gecko/)) {navigator.family = "gecko"}

if (window.navigator.userAgent.toLowerCase().indexOf('opera') != -1) {navigator.family = 'opera';}

toplevel="4";



function riseup (box) {

toplevel++;

if (navigator.family == "ie4")

{document.all[box].style.zIndex = toplevel;}

if (navigator.family == "opera" || navigator.family == "gecko")

{document.getElementById(box).style.zIndex = toplevel;}

}

</script>

<div id="box1" style="position:absolute; background-color:#FF0000; padding:5; visibility:show; left:10px; top:10px; width:100; height:150; z-index:4">

Howdy, this could be a neat little Tab style nav feature.

</div>



<div id="box2" style="position:absolute; background-color:#FF5555; padding:5; visibility:show; left:10px; top:10px; width:100; height:150; z-index:3">

<a href="http://javascript.internet.com">JSS</a><br>

<a href="http://www.javascripts.com">JavaScripts</a><br>

<a href="http://www.javascript.com">JavaScript</a><br>

<a href="http://webdevelopersjournal.com">WDJ</a><br>

<a href="http://www.jars.com">Jars(Java)</a><br>

</div>



<div id="box3" style="position:absolute; background-color:#FF9999; padding:5; visibility:show; left:10px; top:10px; width:100; height:150; z-index:2">

<a href=#><img src=apple_logo.gif border=0></a><br>

Third palette now with an image link. <b>This might</b> be cool.

</div>



<div id="box4" style="position:absolute; background-color:#FFBBBB; padding:5; visibility:show; left:10px; top:10px; width:100; height:150; z-index:1">

Forth palette blah blah blah yada yada yada adfadf adf adf.

</div>



<div id="box5" style="position:absolute; background-color:#FFDDDD; padding:5; visibility:show; left:10px; top:10px; width:100; height:150; z-index:1">

Fifth palette, how many can you have? <br><br> unlimited.

</div>



<div id="tab1" onclick="javascript:riseup('box1');" style="cursor:hand; position:absolute; background-color:#FF0000; visibility:show; left:110px; top:10px; width:40; height:20; z-index:3">

<b> tab1</b>

</div>

<div id="tab2" onclick="javascript:riseup('box2');" style="cursor:hand; position:absolute; background-color:#FF5555; visibility:show; left:110px; top:35px; width:40; height:20; z-index:3">

<b> tab2</b>

</div>

<div id="tab3" onclick="javascript:riseup('box3');" style="cursor:hand; position:absolute; background-color:#FF9999; visibility:show; left:110px; top:60px; width:40; height:20; z-index:3">

<b> tab3</b>

</div>

<div id="tab4" onclick="javascript:riseup('box4');" style="cursor:hand; position:absolute; background-color:#FFBBBB; visibility:show; left:110px; top:85px; width:40; height:20; z-index:3">

<b> tab4</b>

</div>

<div id="tab5" onclick="javascript:riseup('box5');" style="cursor:hand; position:absolute; background-color:#FFDDDD; visibility:show; left:110px; top:110px;width:40; height:20; z-index:3">

<b> tab5</b>

</div>



<!-- THIS TABLE IS USED TO BLOCK THE AREA WHERE THE TABULAR NAV IS PLACED -->

<table width=160 height=150 align=left><tr><td> </td></tr></table>



<script>

// ################# THIS FIXES GECKO DIV PLACEMENT

if (navigator.family == "gecko"){

for (x=1;x<6;x++)

{document.getElementById("tab"+x).style.left = 120; }

}

// End -->

</script>