Bring a layer up on top

[andersoni]

I apologize to all, I inadvertently posted this as a reply to another thread when I wanted it to be a new thread.

I have a left side navigation menu that I am having some issues with in terms of the submenu layers not coming to the top when they are set to visible.

First, here is a link to where I am setting this up.

http://www.carmelchamber.com/ccccindex.asp

I am generating the left menu and submenu from info in a DB. I will include some of the code below which shows my javascript code and the code for the layers. If you want to see how if all comes out you can visit the link and look at the source code.

**************************************************
****
<script language = "JavaScript">
<!--

var timer = null;
//var selected = new Array();
//var hilited = new Array(4);
//hilited[0] = -1;
//hilited[1] = -1;
//hilited[2] = -1;
//hilited[3] = -1;

function changeDiv(the_div, the_change) {
if (document.all) {
div_string = "window.document.all." + the_div + ".style";
// alert(div_string);
} else if (document.layers) {
div_string = "window.document." + the_div;
} else {
alert("sorry, this only works in 4.0 browsers");
return;
}
the_div = eval(div_string);
the_div.visibility = the_change;
the_div.zIndex=31;

cancelClearTime();
}

function closeAll() {
for (var loop=0; loop < div_array.length; loop++) {
changeDiv(div_array[loop], "hidden");
}
}

function cancelClearTime() {
if (timer) clearTimeout(timer);
timer = null;
}

function ClearTime() {
if (timer) clearTimeout(timer);
timer = null;
timer = setTimeout("closeAll()",2000);
}

function MouseOut(cdiv) {
ClearTime();
}

// -->
</script>

<!-- Set Style Information -->
<style type="text/css">
<!--
.on {
color:#FFFFFF;
cursorointer
}

.off {
color:#00808D;
cursor:default;
}

.menu {
WIDTH: 300px; POSITION: absolute; BACKGROUND-COLOR: #00808D
}

.submenu01 {
PADDING-LEFT: 6px; FONT-SIZE: 10px; WIDTH: 196px; COLOR: black; PADDING-TOP: 0px; FONT-FAMILY: arial; LETTER-SPACING: 1px; POSITION: absolute; HEIGHT: 18px; BACKGROUND-COLOR: #999999
}

-->
</style>

<%
' sqlStr = "Select * FROM tblWebSections"
' set rst1 = CCCCDBConn.Execute(sqlStr)

rst1.MoveFirst

topposition = 80
count = 0
subcount = 0
subdiv = 0
While NOT rst1.EOF
topposition = topposition + 19

sqlStr = "SELECT * FROM tblWebSubSections WHERE ParentSection = '" & rst1("SectionName") & "'"

set rst2 = server.Createobject("adodb.recordset")
rst2.cursorlocation = 3 'adUseClient
rst2.Open sqlStr, CCCCDBConn, adOpenDynamic, adLockOptimistic

If rst2.EOF Then
%>
<div id="top<%=count%>" style="position:absolute; top:<%=topposition%>px; left:3px; visibility:visible;">
<table width="104" cellspacing="0" cellpadding="0" bgcolor="#E2F4F5">
<tr>
<a href="<%=rst1("LinkPage")%>">
<td id="topitem<%=count%>" class="off" onmouseover="closeAll();this.className='on';this.style.backgroundColor='#7ECBD1';" onmouseout="this.className='off';this.style.backgroundColor='';" align="left">
<font size="2"> <%=rst1("SectionName")%></font>
</td>
</a>
</tr>
</table>
</div>
<%
Else
%>
<div id="top<%=count%>" style="position:absolute; top:<%=topposition%>px; left:3px; visibility:visible;">
<table width="104" cellspacing="0" cellpadding="0" bgcolor="#E2F4F5">
<tr>
<a href="<%=rst1("LinkPage")%>">
<td id="topitem<%=count%>" class="off" onmouseover="closeAll();this.className='on';this.style.backgroundColor='#7ECBD1';changeDiv('subdiv<%=subdiv%>','visible');" onmouseout="this.className='off';this.style.backgroundColor='';MouseOut(1);" align="left">
<font size="2"> <%=rst1("SectionName")%></font>
</td>
</a>
</tr>
</table>
</div>
<%

counter = 0
counter = rst2.RecordCount
menuheight = (19 * counter) + 4

If NOT rst2.EOF Then
menuwidth = 0
While NOT rst2.EOF
If Len(rst2("SubSectionName")) > menuwidth Then
menuwidth = Len(rst2("SubSectionName"))
End IF
rst2.MoveNext
WEND
rst2.MoveFirst
End IF

menuwidth = menuwidth * 6.7

subtopposition = 2
%>
<div class="menu" id="subdiv<%=subdiv%>" style="LEFT:107px; HEIGHT:<%=menuheight%>; WIDTH:<%=menuwidth%>; TOP:<%=topposition%>px; VISIBILITY:hidden; POSITION:absolute; z-index:<%=20 - subdiv%>;" onMouseOut="MouseOut(1);">
<%
While NOT rst2.EOF
%>
<table width="<%=menuwidth - 4%>" cellspacing="0" cellpadding="0" bgcolor="#E2F4F5" style="position:absolute; top:<%=subtopposition%>px; left:2px;">
<tr>
<a href="<%=rst2("LinkPage")%>">
<td id="subdiv<%=subdiv%>_sdivitem<%=subcount%>" class="off" onMouseOver="this.className='on';this.style.backgroundColor='7ECBD1';changeDiv('subdiv<%=subdiv%>','visible');" onMouseOut="this.className='off';this.style.backgroundColor='';" align="left">
<font size="2"> <%=rst2("SubSectionName")%></font>
</td>
</a>
</tr>
</table>
<%
subtopposition = subtopposition + 19
subcount = subcount + 1
rst2.MoveNext
WEND
rst2.Close
Set rst2 = Nothing
subdiv = subdiv + 1
%>
</div>
<%
End If
count = count + 1
rst1.MoveNext
Wend
rst1.Close
set rst1 = Nothing
topposition = topposition + 40
%>
************************************************

If you load the page and move your mouse down to 'Membership' the right side submenu will become visible. Move your mouse down to 'Silver Member'. You will see that the rollover effects and pointer stop. This is because the menu item 'Events' has a submenu for it and the top is on the same level as 'Silver Member'. For some reason when I bring up the sub menu for 'Membership' it does not come to the front, or on top of the other layers.

O have tried setting the z-index in the <div> element as well as in the javaascript code setting the zindex when a layer is made visible but I am missing something somewhere.

One interesting thing I have found, when you first load the page if you navigate through the left menu from the bottom up then the layers appears to have the order.

If you need more info, let me know. Anyone who can help with layer ordering, I thank you for the assistance.

Ian

[HaganeNoKokoro]

try changing

the_div.zIndex=31;

to

if(the_div.visibility=="visible") the_div.zIndex=31;
else the_div.zIndex=-1;

in the function changeDiv(the_div, the_change)

[andersoni]

You know, sometimes it takes someone else to point it out huh? Your code worked and when it did I needed to see why it worked. Well, if I had only stepped through it a little slower, I would have see that the closeAll() function loops through each layer and as it did it set each z-index to 31. NOw each is set to 1, or aon the bottom, and the only one on top (31) is the visible one.

Thanks. I am glad forums like this are around to help each other.

Ian