Solved

cascading menu alignment

Posted on 2002-05-21
14
332 Views
Last Modified: 2008-03-06
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>
<!--MenuItem Definition -->
<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>
0
Comment
Question by:sluggo050499
  • 6
  • 5
  • 3
14 Comments
 
LVL 1

Expert Comment

by:vijayneema
ID: 7026475
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
0
 

Author Comment

by:sluggo050499
ID: 7027135
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?

;)
0
 

Author Comment

by:sluggo050499
ID: 7028832
I figured it out, it was my width settings in the css file.
0
 
LVL 1

Expert Comment

by:vijayneema
ID: 7029458
0
 

Author Comment

by:sluggo050499
ID: 7029602
vijayneema,

?
0
 
LVL 1

Expert Comment

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

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

Thanks,
Moondancer - EE Moderator
0
 
LVL 1

Expert Comment

by:vijayneema
ID: 7031247
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 1

Expert Comment

by:vijayneema
ID: 7031250
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
0
 
LVL 1

Expert Comment

by:vijayneema
ID: 7031252
menu.html
*******************
<html>
<head>
<script language="javascript">
<!--
var oImgExpand = new Image();
oImgExpand.src = "images/expand.gif";
var oImgContract = new Image();
oImgContract.src = "images/collapse.gif";
function toggleMenu(el) {
     var eImg = el.children[0];
     var ePar = el.parentElement;
     var eLast = ePar.children[ePar.children.length - 1];
     if (eLast.style.display == "none") {
          eLast.style.display = "inline";
          eImg.src = oImgContract.src;
     } else {
          eLast.style.display = "none";
          eImg.src = oImgExpand.src;
     }
     return (el.href.indexOf("#") != -1 ? false : true);
}
// -->
</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>
0
 
LVL 1

Expert Comment

by:Moondancer
ID: 7032124
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
0
 

Author Comment

by:sluggo050499
ID: 7032830
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
0
 
LVL 1

Expert Comment

by:vijayneema
ID: 7034059
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
0
 

Author Comment

by:sluggo050499
ID: 7034083
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!
0
 
LVL 1

Accepted Solution

by:
Moondancer earned 0 total points
ID: 7035713
200 points refunded, sluggo found/posted own solution.  Question closed by moving it to our PAQ at zero points.
Moondancer - EE Moderator
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now