asked on

cascading menu alignment

I'm converting a menu built in Flash to Javascript and having it have rollover capabilities rather than onclick events. The menu consists of a js, css, and the page. I'm trying to adjust a horizontal menu to a vertical menu with 2 columns and I can not get the alignment of the child menus correct. (Flash menu here:
http://www.coders4hire.com/beta/b2b/menu.swf) I know the alignment code is in the js - I just don't know the functions to correct it!

CascadeMenu.css
---------------
BODY { }
.menuBar { POSITION: relative; BACKGROUND-COLOR: transparent; text-align: Left }
.Bar { width: 100px; cursor: hand; text-indent: 10px; position: relative;
background-color: #9B9B9B; text-align: Left; font-family:
Microsoft Sans Serif; font-size: 8pt; color: #FFFFFF;
font-weight: bold }
.menu { visibility: hidden; width: 150px; position: absolute;
background-color: #9B9B9B; font-family: Microsoft Sans Serif;
font-size: 8pt; color: #FFFFFF; font-weight: bold }
.menuItem { PADDING-LEFT: 10px; WIDTH: 100%; CURSOR: hand;}
.ItemMouseOver { cursor: hand; color: #000080;
background-color: #9B9B9B; font-family: Microsoft Sans Serif;
font-size: 8pt; font-weight: bold; padding-left: 10px }
.ItemMouseOut { }
.Arrow { FLOAT: right; FONT-FAMILY: Webdings; POSITION: absolute; TEXT-ALIGN: left }
.barOver { float: left; width: 100px; cursor: hand; text-indent: 10px; position: relative;
background-color: #9B9B9B; text-align: Left; font-family:
Microsoft Sans Serif; font-size: 8pt; color: #000080;
font-weight: bold }

CascadeMenu.js
--------------
function InitMenu()
{
var bar = menuBar.children

for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hidden"
bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)

if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)

if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + 150 + Bdy.scrollLeft
}

function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}

function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)

}

function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children

for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}

if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)

childMenu.style.visibility = "hidden"
}
}

}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}

Page
----
<html>
<head>
<title>ConNext by IDT Marketing</title>
<base target="main1">
<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>
</head>
<body topmargin="0" leftmargin="0" OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgcolor="#9B9B9B">
<div align="left">
<DIV Id="menuBar" class="menuBar" >
<DIV Id="Bar1" class="Bar" menu="menu1">·Home</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">·Administration</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">·Reports</DIV>
<DIV Id="Bar4" class="Bar" menu="menu4">·Prospect</DIV>
<DIV Id="Bar5" class="Bar" menu="menu5">·Support</DIV>
<DIV Id="Bar6" class="Bar" menu="menu6" cmd="about/frame.htm">·About ConNext</DIV>
</DIV>

<div Id="menu1" class="menu" >
<div Id="menuItem1_1" class="menuItem" title="Login" cmd="login.htm">·Login</div>
</div>
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem" cmd="login.htm">·Upload File</div>
<div Id="menuItem2_2" class="menuItem" cmd="login.htm">·Manage Records</div>
<div Id="menuItem2_3" class="menuItem" cmd="login.htm">·Manage Territories</div>
</div>
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem" cmd="login.htm">·Territory</div>
<div Id="menuItem3_2" class="menuItem" cmd="login.htm">·Category</div>
</div>
<div Id="menu4" class="menu">
<div Id="menuItem4_1" class="menuItem" cmd="login.htm">·Retrieve Saved Selection</div>
<div Id="menuItem4_2" class="menuItem" cmd="login.htm">·Simple Selection</div>
<div Id="menuItem4_3" class="menuItem" cmd="login.htm">·Advanced Selection</div>
</div>
<div id="menu5" class="menu">
<div Id="menuItem5_1" class="menuItem">·Help</div>
<div Id="menuItem5_2" class="menuItem">·Email Support</div>
</div>
<div id="menu6" class="menu">
</div>
</div>
</body>
</html>

vijayneema

Hi,

If you want, I have a good tree menu, but that was created using XML & XSL and require IE5 and above.

Reply me if you want that code.
vijayneema

sluggo050499

ASKER

It wouldn't answer this question, however I am interested. We're utilizing IE only for this application. Are you looking for points or just a really helpful person?

;)

sluggo050499

ASKER

I figured it out, it was my width settings in the css file.

vijayneema

sluggo050499

ASKER

vijayneema,

?

Moondancer

I posted a "workaround" for you on the intermittent "NO TEXT" problem here:
https://www.experts-exchange.com/questions/Q.20303875.html

Let me know if you still have problems adding information here.

Thanks,
Moondancer - EE Moderator

vijayneema

Hi,sluggo

You are going wrong sluggo, Actually my code is having some limitations and totally not related to Javscript. It is a tree menu same as explorer view in windows, using XML & XSL and will work only on IE5.5 and above.

Well, about points, we all are here first for getting help from experts and for getting points from others.

I have posted my comments with code, but due to some error on experts-exchange, it was not shown. see the comment of moondancer.

Here is my tree menu code.

******
removed
******

best of luck
vijayneema

vijayneema

menu.html
*******************
<html>
<head>
<script language="javascript">

</script>
</head>
<body class="cssMenuBody">
<XML id="oXML" src="menu.xml"></XML>
<XML id="oXSLT">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<xsl:apply-templates select="root/*" />
</xsl:template>
<xsl:template match="*">
<div class="item">
<a>
<xsl:choose>
<xsl:when test="*">
<xsl:attribute name="href">javascript:void(0)</xsl:attribute>
<xsl:attribute name="onclick">return toggleMenu(this);</xsl:attribute>
</xsl:when>
<xsl:otherwise />
</xsl:choose>
<img hspace="4" border="0">
<xsl:attribute name="src">
<xsl:choose>
<xsl:when test="*">images/expand.gif</xsl:when>
<xsl:otherwise>images/spacer.gif</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</img></a>
<a>
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="@url"><xsl:value-of select="@url" /></xsl:when>
<xsl:otherwise>javascript:void(0)</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:attribute name="title">
<xsl:value-of select="@title" />
</xsl:attribute>
<xsl:value-of select="@caption" />
</a>
<xsl:if test="*">
<div class="container" style="display:none;">
<xsl:apply-templates select="*" />
</div>
</xsl:if>
</div>
</xsl:template>
</xsl:stylesheet>
</XML>
<table border=0 cellspacing=0 cellpadding=0 width=100% height=54 class=cssPageHeadingTable>
<tr>
<td align=center style="vertical-align: middle;" width=100% class=cssPageHeading>Option Care Inc.</td>
</tr>
</table>
<table border=0 width=100%>
<tr><td><textarea id=ta name=ta style="display: none;"></textarea></td></tr>
</table>
<div id=divmenu name=divmenu style="height=250;">
</div>
<script language="javascript">
ta.value = oXML.XMLDocument.transformNode(oXSLT.XMLDocument);
divmenu.innerHTML = oXML.XMLDocument.transformNode(oXSLT.XMLDocument);
toggleMenu(document.links[0]);
</script>
</body>
</html>

menu.xml
*******************
<?xml version="1.0" encoding="utf-8"?>
<root>
<menu caption="Main Menu" title="Main Menu" url="main.html">
<menu caption="menu1">
<menu caption="submenu11" url="submenu11.html"/>
</menu>
<menu caption="menu2">
<menu caption="submenu21">
<menu caption="submenu211" url="submenu211.html" />
<menu caption="submenu212" url="submenu212.html" />
</menu>
</menu>
</menu>
</root>

Moondancer

I'm happy to see that the "no text" problem has been addressed by submitting the input in smaller increments. Sorry for the inconvenience you experienced. This problem should be resolved when the rewrite is completed.

Moondancer - EE Moderator

sluggo050499

ASKER

vijayneema,

I appreciate you trying ... many of us post code for points but do not get any when a better option or better code comes along. In this case, I was interested in seeing your code but it in no way answered the posted question. I am very generous with points and always appreciate the help. I hope you don't think I 'cheated' you in some way.

Sluggo

vijayneema

Hi sluggo,

I think i was wrong in understanding your problem. Please clear me your requirement in detail once again. and again I am sorry for wasting your time.

best luck
vijayneema

sluggo050499

ASKER

It's never a waste of time to see some alternatives! I appreciate you trying to help out on this, vijayneema. I actually corrected the problem myself, at issue was the offset settings in the js as well as some of the css settings. The menu is working fine now.

I'll be sure to throw some additional points your way when we meet again, here!

Thanks!

ASKER CERTIFIED SOLUTION

Moondancer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial