Cascading menus in Javascript

Discussion in 'Javascript' started by Marci, Jul 18, 2004.

  1. Marci

    Marci Guest

    I found this script for cascading menus, however, I cannot reach the
    author to solve the bug I am having when I add a second menu to it.
    My problem is this:

    If I click on the first link, the menu displays well. If I then click
    on the second link, the first menu from the first link still displays.

    How do I get make the first menu disappear when I click on the second
    and vice versa? Please help...thanks.

    Code is as follows:

    /******************************************************
    * HMenu.js - v. 1.05 000710 *
    * Cascading menu creation system *
    * by Aaron Prenot *
    * Copyright (c) 2000 Aaron Prenot *
    * http://www.redrival.com/aprenot *
    * *
    * Published and Documented at *
    * o www.redrival.com/aprenot *
    * o www.webdevelopersjournal.com *
    * *
    * You may use this code on a public web site only *
    * if this entire copyright notice appears *
    * unchanged. We would also appreciate you *
    * creating a link to *
    * http://www.webdevelopersjournal.com somwhere on *
    * your site. *
    * *
    * *
    * Please send questions and bug reports to: *
    * *
    ******************************************************/

    <br>
    <br>


    <STYLE TYPE="text/css">


    ..menu {position: absolute;
    font-family: MS Sans Serif;
    font-size: 10pt;
    background-color: menu;
    color: menutext;
    border: 2px threedhighlight outset;
    cursor: default;
    visibility: hidden;
    line-height: 140%;}

    ..visibleMenu {position: absolute;

    font-family: MS Sans Serif;
    font-size: 10pt;
    background-color: menu;
    color: menutext;
    border: 2px threedhighlight outset;
    cursor: default;
    visibility: visible;
    line-height: 140%;}



    ..menuItem {color: menutext;
    background-color: menu;
    padding-left: 10px;
    padding-right: 15px;
    text-decoration: none;}

    ..menuItemOver {color: highlighttext;

    background-color: highlight;
    padding-left: 10px;
    padding-right: 15px;
    text-decoration: none;}



    ..menuItemOver A {color: highlighttext;

    background-color: highlight;
    padding-left: 10px;
    padding-right: 15px;
    text-decoration: none;
    cursor: default;}



    ..menuItem A {color: menutext;
    background-color: menu;
    padding-left: 10px;
    padding-right: 15px;
    text-decoration: none;
    cursor: default;}



    ..more {font-family: WebDings;
    text-align: right;
    z-index: 100;
    position:relative;}



    </style>

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    var menus = new Array();
    var activeItem = null;
    var IE4 = ((navigator.appName == "Microsoft Internet Explorer") &&
    (parseInt(navigator.appVersion) >= 4 ) &&
    !(navigator.appVersion.indexOf("5") > -1 ));

    function Menu(){

    this.id = "";
    this.subMenus = new Array();
    this.items = new Array();
    this.hasChildren = false;
    this.isChild = false;
    this.parentMenu = null;
    this.parentItem = null;

    }

    function Item(){

    this.id = "";
    this.hasMenu = false;
    this.menu = null;
    this.parentMenu = null;
    }

    function initMenu(){

    // test for IE4+, it won't work otherwise
    if(!document.all) return false;

    findMenus();
    menuContainer.activeMenu = null;
    menuContainer.closeAll = closeAll;

    attachMenus();

    }

    function findMenus(){

    var cTag = menuContainer.children;
    for(var i=0; i < cTag.length; i++){

    tcTag = cTag;
    if(tcTag.className == "menu"){

    var tMenu = findSubMenus(tcTag);
    menus[menus.length] = tMenu;
    }
    }

    var tHTML = "<div id=\"menuContainer\">";
    for(var i=0; i < menus.length; i++){
    var tcTag = menus
    tHTML += moveHTML(tcTag);
    }

    tHTML += "</div>";
    menuContainer.outerHTML = "";
    document.body.innerHTML += tHTML;

    for(var i=0; i < menus.length; i++){
    var tcTag = menus;
    setupMenu(tcTag);

    }

    }

    function findSubMenus(menu){

    var cMenu = menu.children;
    var tMenu = new Menu();
    tMenu.id = menu.id;
    for(var i=0; i < cMenu.length; i++){
    var tcMenu = new Item();
    tcMenu.id = cMenu.id;
    if(tcMenu.id.indexOf("subMenu") != -1){
    ++i;

    var subMenu = cMenu;
    tMenu.subMenus[tMenu.subMenus.length] =
    findSubMenus(subMenu)

    tMenu.subMenus[(tMenu.subMenus.length
    - 1)].isChild = true;

    tMenu.subMenus[(tMenu.subMenus.length
    - 1)].parentMenu = tMenu;

    tMenu.subMenus[(tMenu.subMenus.length
    - 1)].parentItem = tcMenu;

    tMenu.hasChildren = true;

    tcMenu.hasMenu = true;

    tcMenu.menu =
    tMenu.subMenus[(tMenu.subMenus.length - 1)];

    }

    tcMenu.parentMenu = tMenu;

    tMenu.items[tMenu.items.length] = tcMenu;

    }

    return tMenu;

    }

    function moveHTML(menu){

    var tHTML = "";

    if(menu.hasChildren == true){

    for(var i=0; i < menu.subMenus.length; i++){

    tHTML += moveHTML(menu.subMenus);

    }

    }

    var tMenu = eval(menu.id);

    var tMenuHTML = tMenu.outerHTML;



    tMenu.outerHTML = "";

    tHTML += tMenuHTML;

    return tHTML;

    }



    function setupMenu(menu){

    if(menu.hasChildren == true){

    for(var i=0; i < menu.subMenus.length; i++){

    setupMenu(menu.subMenus);

    }

    }



    tMenu = eval(menu.id);
    tMenu.noWrap = true;
    tMenu.hasChildren = menu.hasChildren;
    tMenu.hasVisibleChild = false;
    tMenu.visibleChild = null;
    tMenu.isChild = menu.isChild;
    tMenu.onselectstart = returnFalse;
    tMenu.onclick = handleMenuClick;
    tMenu.currWidth = 0;
    tMenu.items = menu.items;


    for(var i=0; i < menu.items.length; i++){
    setupItem(menu.items);

    }

    tMenu.style.pixelWidth += 5;
    for(var i=0; i < menu.items.length; i++){
    var tItem = eval(menu.items.id);
    if(!IE4){
    tItem.style.width = "100%";
    if(tItem.hasMenu == true) {
    tItem.more.style.position =
    "absolute";
    tItem.more.style.pixelLeft =
    (tMenu.style.pixelWidth - 17);

    }

    }

    }

    if(menu.isChild == true){

    tMenu.parentMenu = eval(menu.parentMenu.id);
    tMenu.parentItem = eval(menu.parentItem.id);

    }

    }

    function setupItem(item){

    tItem = eval(item.id);
    tItem.highlight = highlight;
    tItem.onmouseover = tItem.highlight;
    tItem.parentMenu = eval(item.parentMenu.id);
    tItem.hasMenu = false;
    tItem.menu = null;
    tItem.onclick = handleItemClick;
    tItem.ondragstart = returnFalse;
    tItem.noWrap = true;


    if(item.hasMenu == true){
    tItem.innerHTML += "<span id=\"" + item.id +
    "_more\" class=\"more\">4</span>";

    tItem.more = eval(item.id + "_more");
    tItem.menu = eval(item.menu.id);
    tItem.hasMenu = true;

    }

    if(!IE4) {

    tItem.parentMenu.style.pixelWidth =
    Math.max(tItem.parentMenu.currWidth, tItem.offsetWidth);

    }





    }

    function highlight(){

    if(activeItem != null){
    if(activeItem != this){
    unhighlight(activeItem);

    } else {

    return;
    }
    }


    event.cancelBubble = true;
    this.className = "menuItemOver";
    activeItem = this;

    // dont open a menu thats already open

    if((this.hasMenu == true) &&
    (this.parentMenu.hasVisibleChild == true) &&
    (this.parentMenu.visibleChild == this.menu)) return;


    // if there is a menu open, close it

    if(this.parentMenu.hasChildVisible == true){
    hideMenu(this.parentMenu.visibleChild);

    }



    // if this item has a menu, show it
    if(this.hasMenu){
    showMenu(this.menu);
    }

    }

    function unhighlight(menu){
    event.cancelBubble = true;
    menu.className = "menuItem";

    }

    function showMenu(menu, x, y){
    event.cancelBubble = true;
    if(menu){
    if(IE4){
    for(var i=0; i < menu.items.length;
    i++){
    tItem = eval(menu.items.id);
    if(tItem.hasMenu == true) {

    tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
    - 17);

    }
    }
    }

    if(menu.isChild == true){

    menu.style.pixelTop =
    menu.parentItem.offsetTop + menu.parentMenu.offsetTop + 4;

    menu.style.pixelLeft =
    menu.parentMenu.offsetLeft + menu.parentMenu.offsetWidth - 4;

    menu.parentMenu.hasChildVisible =
    true;
    menu.parentMenu.visibleChild = menu;
    menu.style.zIndex =
    menu.parentMenu.style.zIndex + 1;

    } else if(x && y){

    menu.style.pixelTop = y;
    menu.style.pixelLeft = x;
    menuContainer.activeMenu = menu;
    document.onclick =
    menuContainer.closeAll;

    }

    } else {

    menu = eval(this.menu);

    if(IE4){

    for(var i=0; i < menu.items.length;
    i++){
    tItem = eval(menu.items.id);
    if(tItem.hasMenu == true) {

    tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
    - 17);

    }

    }

    }

    menu.style.pixelTop = event.clientY;
    menu.style.pixelLeft = event.clientX;
    menuContainer.activeMenu = menu;
    document.onclick = menuContainer.closeAll;

    }

    menu.className = "visibleMenu";

    return false;

    }

    function hideMenu(menu){

    // to handle the careless child menu hiding down below

    if(menu == null) return false;
    event.cancelBubble = true;

    // i do this kind of carelessly. i was having trouble
    otherwise

    hideMenu(menu.visibleChild);

    if(menu.isChild == true){

    menu.parentMenu.hasChildVisible = false;
    menu.parentMenu.visibleChild = null;

    } else {

    document.onclick = "";
    menuContainer.activeMenu = null;
    }
    menu.className = "menu";

    }

    function closeAll(){

    hideMenu(menuContainer.activeMenu);

    }

    // simple function to return false
    function returnFalse(){return false;}
    // function to be used for later functionality
    // for now it just keeps the menu open when it receives a click;
    function handleMenuClick(){

    event.cancelBubble = true;
    return false;



    }

    // just like the function above, only it closes the menu
    function handleItemClick(){

    event.cancelBubble = true;
    menuContainer.closeAll();

    }

    // searches the document for elements with a menu paramater
    function attachMenus(){
    for(var i in document.all){
    if(document.all.menu){
    document.all.onclick = showMenu;
    }
    }
    }
    </script>
    </head>
    <body onload="initMenu()">

    <a href="#" menu="menu1">Brands of Shampoo</a>

    <div id="menuContainer">
    <div id="menu1" class="menu">
    <div id="subMenu1_1" class="menuItem"><a href="/hair/index.html">Hair
    Products</a></div>
    <div id="menu1_1" class="menu">
    <div id="menuItem1_1_1" class="menuItem"><a
    href="/hair/shampoo.html">Shampoo</a></div>
    <div id="menuItem1_1_2" class="menuItem"><a
    href="/hair/gel.html">Gel</a></div>
    </div>
    <div id="subMenu1_2" class="menuItem"><a href="/skin/index.html">Skin
    Care Products</a></div>
    <div id="menu1_2" class="menu">
    <div id="menuItem1_2_1" class="menuItem"><a
    href="/skin/lotion.html">Lotions</a></div>
    <div id="subMenu1_2_2" class="menuItem"><a
    href="/skin/ointments/index.html">Ointments</a></div>
    <div id="menu1_2_2" class="menu">
    <div id="menuItem1_2_2_1" class="menuItem"><a
    href="/skin/ointments/bengay.html">Ben-Gay</a></div>
    <div id="menuItem1_2_2_2" class="menuItem"><a
    href="/skin/ointments/icyhot.html">Icy Hot</a></div>
    <div id="menuItem1_2_2_3" class="menuItem"><a
    href="/skin/ointments/burncream.html">Burn Cream</a></div>
    </div>
    <div id="menuItem1_2_3" class="menuItem"><a
    href="/skin/powder.html">Powder</a></div>
    </div>
    <div id="menuItem1_3" class="menuItem"><a href="/nailpolish.html">Nail
    Polish</a></div>
    </div>
    </div>

    <br>

    <a href="#" menu="menu2">Brands of Shampoo</a>

    <div id="menu2" class="menu">
    <div id="subMenu2_1" class="menuItem"><a href="/hair/index.html">Hair
    Products</a></div>
    <div id="menu2_1" class="menu">
    <div id="menuItem2_1_1" class="menuItem"><a
    href="/hair/shampoo.html">Shampoo</a></div>
    <div id="menuItem2_1_2" class="menuItem"><a
    href="/hair/gel.html">Gel</a></div>
    </div>
    <div id="subMenu2_2" class="menuItem"><a href="/skin/index.html">Skin
    Care Products</a></div>
    <div id="menu2_2" class="menu">
    <div id="menuItem2_2_1" class="menuItem"><a
    href="/skin/lotion.html">Lotions</a></div>
    <div id="subMenu2_2_2" class="menuItem"><a
    href="/skin/ointments/index.html">Ointments</a></div>
    <div id="menu2_2_2" class="menu">
    <div id="menuItem2_2_2_1" class="menuItem"><a
    href="/skin/ointments/bengay.html">Ben-Gay</a></div>
    <div id="menuItem2_2_2_2" class="menuItem"><a
    href="/skin/ointments/icyhot.html">Icy Hot</a></div>
    <div id="menuItem2_2_2_3" class="menuItem"><a
    href="/skin/ointments/burncream.html">Burn Cream</a></div>
    </div>
    <div id="menuItem2_2_3" class="menuItem"><a
    href="/skin/powder.html">Powder</a></div>
    </div>
    <div id="menuItem2_3" class="menuItem"><a href="/nailpolish.html">Nail
    Polish</a></div>
    </div>
    </div>
    </body>
    </html>
    Marci, Jul 18, 2004
    #1
    1. Advertising

  2. Marci

    Noel Dolan Guest

    Marci,

    Firstly, you need to added "<html><head>" at top of page.

    Then the copyright comment needs to be enclosed in a javascript tags ie...

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> COPYRIGHT
    STUFF...</SCRIPT>

    0That should sort it out for you. BTW, you've also got two superfluous <BR>
    tags just after the copyright stuff, you should
    get rid of them too.

    Hope this sorts it out for you.


    Noel.
    "Marci" <> wrote in message
    news:...
    > I found this script for cascading menus, however, I cannot reach the
    > author to solve the bug I am having when I add a second menu to it.
    > My problem is this:
    >
    > If I click on the first link, the menu displays well. If I then click
    > on the second link, the first menu from the first link still displays.
    >
    > How do I get make the first menu disappear when I click on the second
    > and vice versa? Please help...thanks.
    >
    > Code is as follows:
    >
    > /******************************************************
    > * HMenu.js - v. 1.05 000710 *
    > * Cascading menu creation system *
    > * by Aaron Prenot *
    > * Copyright (c) 2000 Aaron Prenot *
    > * http://www.redrival.com/aprenot *
    > * *
    > * Published and Documented at *
    > * o www.redrival.com/aprenot *
    > * o www.webdevelopersjournal.com *
    > * *
    > * You may use this code on a public web site only *
    > * if this entire copyright notice appears *
    > * unchanged. We would also appreciate you *
    > * creating a link to *
    > * http://www.webdevelopersjournal.com somwhere on *
    > * your site. *
    > * *
    > * *
    > * Please send questions and bug reports to: *
    > * *
    > ******************************************************/
    >
    > <br>
    > <br>
    >
    >
    > <STYLE TYPE="text/css">
    >
    >
    > .menu {position: absolute;
    > font-family: MS Sans Serif;
    > font-size: 10pt;
    > background-color: menu;
    > color: menutext;
    > border: 2px threedhighlight outset;
    > cursor: default;
    > visibility: hidden;
    > line-height: 140%;}
    >
    > .visibleMenu {position: absolute;
    >
    > font-family: MS Sans Serif;
    > font-size: 10pt;
    > background-color: menu;
    > color: menutext;
    > border: 2px threedhighlight outset;
    > cursor: default;
    > visibility: visible;
    > line-height: 140%;}
    >
    >
    >
    > .menuItem {color: menutext;
    > background-color: menu;
    > padding-left: 10px;
    > padding-right: 15px;
    > text-decoration: none;}
    >
    > .menuItemOver {color: highlighttext;
    >
    > background-color: highlight;
    > padding-left: 10px;
    > padding-right: 15px;
    > text-decoration: none;}
    >
    >
    >
    > .menuItemOver A {color: highlighttext;
    >
    > background-color: highlight;
    > padding-left: 10px;
    > padding-right: 15px;
    > text-decoration: none;
    > cursor: default;}
    >
    >
    >
    > .menuItem A {color: menutext;
    > background-color: menu;
    > padding-left: 10px;
    > padding-right: 15px;
    > text-decoration: none;
    > cursor: default;}
    >
    >
    >
    > .more {font-family: WebDings;
    > text-align: right;
    > z-index: 100;
    > position:relative;}
    >
    >
    >
    > </style>
    >
    > <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    > var menus = new Array();
    > var activeItem = null;
    > var IE4 = ((navigator.appName == "Microsoft Internet Explorer") &&
    > (parseInt(navigator.appVersion) >= 4 ) &&
    > !(navigator.appVersion.indexOf("5") > -1 ));
    >
    > function Menu(){
    >
    > this.id = "";
    > this.subMenus = new Array();
    > this.items = new Array();
    > this.hasChildren = false;
    > this.isChild = false;
    > this.parentMenu = null;
    > this.parentItem = null;
    >
    > }
    >
    > function Item(){
    >
    > this.id = "";
    > this.hasMenu = false;
    > this.menu = null;
    > this.parentMenu = null;
    > }
    >
    > function initMenu(){
    >
    > // test for IE4+, it won't work otherwise
    > if(!document.all) return false;
    >
    > findMenus();
    > menuContainer.activeMenu = null;
    > menuContainer.closeAll = closeAll;
    >
    > attachMenus();
    >
    > }
    >
    > function findMenus(){
    >
    > var cTag = menuContainer.children;
    > for(var i=0; i < cTag.length; i++){
    >
    > tcTag = cTag;
    > if(tcTag.className == "menu"){
    >
    > var tMenu = findSubMenus(tcTag);
    > menus[menus.length] = tMenu;
    > }
    > }
    >
    > var tHTML = "<div id=\"menuContainer\">";
    > for(var i=0; i < menus.length; i++){
    > var tcTag = menus
    > tHTML += moveHTML(tcTag);
    > }
    >
    > tHTML += "</div>";
    > menuContainer.outerHTML = "";
    > document.body.innerHTML += tHTML;
    >
    > for(var i=0; i < menus.length; i++){
    > var tcTag = menus;
    > setupMenu(tcTag);
    >
    > }
    >
    > }
    >
    > function findSubMenus(menu){
    >
    > var cMenu = menu.children;
    > var tMenu = new Menu();
    > tMenu.id = menu.id;
    > for(var i=0; i < cMenu.length; i++){
    > var tcMenu = new Item();
    > tcMenu.id = cMenu.id;
    > if(tcMenu.id.indexOf("subMenu") != -1){
    > ++i;
    >
    > var subMenu = cMenu;
    > tMenu.subMenus[tMenu.subMenus.length] =
    > findSubMenus(subMenu)
    >
    > tMenu.subMenus[(tMenu.subMenus.length
    > - 1)].isChild = true;
    >
    > tMenu.subMenus[(tMenu.subMenus.length
    > - 1)].parentMenu = tMenu;
    >
    > tMenu.subMenus[(tMenu.subMenus.length
    > - 1)].parentItem = tcMenu;
    >
    > tMenu.hasChildren = true;
    >
    > tcMenu.hasMenu = true;
    >
    > tcMenu.menu =
    > tMenu.subMenus[(tMenu.subMenus.length - 1)];
    >
    > }
    >
    > tcMenu.parentMenu = tMenu;
    >
    > tMenu.items[tMenu.items.length] = tcMenu;
    >
    > }
    >
    > return tMenu;
    >
    > }
    >
    > function moveHTML(menu){
    >
    > var tHTML = "";
    >
    > if(menu.hasChildren == true){
    >
    > for(var i=0; i < menu.subMenus.length; i++){
    >
    > tHTML += moveHTML(menu.subMenus);
    >
    > }
    >
    > }
    >
    > var tMenu = eval(menu.id);
    >
    > var tMenuHTML = tMenu.outerHTML;
    >
    >
    >
    > tMenu.outerHTML = "";
    >
    > tHTML += tMenuHTML;
    >
    > return tHTML;
    >
    > }
    >
    >
    >
    > function setupMenu(menu){
    >
    > if(menu.hasChildren == true){
    >
    > for(var i=0; i < menu.subMenus.length; i++){
    >
    > setupMenu(menu.subMenus);
    >
    > }
    >
    > }
    >
    >
    >
    > tMenu = eval(menu.id);
    > tMenu.noWrap = true;
    > tMenu.hasChildren = menu.hasChildren;
    > tMenu.hasVisibleChild = false;
    > tMenu.visibleChild = null;
    > tMenu.isChild = menu.isChild;
    > tMenu.onselectstart = returnFalse;
    > tMenu.onclick = handleMenuClick;
    > tMenu.currWidth = 0;
    > tMenu.items = menu.items;
    >
    >
    > for(var i=0; i < menu.items.length; i++){
    > setupItem(menu.items);
    >
    > }
    >
    > tMenu.style.pixelWidth += 5;
    > for(var i=0; i < menu.items.length; i++){
    > var tItem = eval(menu.items.id);
    > if(!IE4){
    > tItem.style.width = "100%";
    > if(tItem.hasMenu == true) {
    > tItem.more.style.position =
    > "absolute";
    > tItem.more.style.pixelLeft =
    > (tMenu.style.pixelWidth - 17);
    >
    > }
    >
    > }
    >
    > }
    >
    > if(menu.isChild == true){
    >
    > tMenu.parentMenu = eval(menu.parentMenu.id);
    > tMenu.parentItem = eval(menu.parentItem.id);
    >
    > }
    >
    > }
    >
    > function setupItem(item){
    >
    > tItem = eval(item.id);
    > tItem.highlight = highlight;
    > tItem.onmouseover = tItem.highlight;
    > tItem.parentMenu = eval(item.parentMenu.id);
    > tItem.hasMenu = false;
    > tItem.menu = null;
    > tItem.onclick = handleItemClick;
    > tItem.ondragstart = returnFalse;
    > tItem.noWrap = true;
    >
    >
    > if(item.hasMenu == true){
    > tItem.innerHTML += "<span id=\"" + item.id +
    > "_more\" class=\"more\">4</span>";
    >
    > tItem.more = eval(item.id + "_more");
    > tItem.menu = eval(item.menu.id);
    > tItem.hasMenu = true;
    >
    > }
    >
    > if(!IE4) {
    >
    > tItem.parentMenu.style.pixelWidth =
    > Math.max(tItem.parentMenu.currWidth, tItem.offsetWidth);
    >
    > }
    >
    >
    >
    >
    >
    > }
    >
    > function highlight(){
    >
    > if(activeItem != null){
    > if(activeItem != this){
    > unhighlight(activeItem);
    >
    > } else {
    >
    > return;
    > }
    > }
    >
    >
    > event.cancelBubble = true;
    > this.className = "menuItemOver";
    > activeItem = this;
    >
    > // dont open a menu thats already open
    >
    > if((this.hasMenu == true) &&
    > (this.parentMenu.hasVisibleChild == true) &&
    > (this.parentMenu.visibleChild == this.menu)) return;
    >
    >
    > // if there is a menu open, close it
    >
    > if(this.parentMenu.hasChildVisible == true){
    > hideMenu(this.parentMenu.visibleChild);
    >
    > }
    >
    >
    >
    > // if this item has a menu, show it
    > if(this.hasMenu){
    > showMenu(this.menu);
    > }
    >
    > }
    >
    > function unhighlight(menu){
    > event.cancelBubble = true;
    > menu.className = "menuItem";
    >
    > }
    >
    > function showMenu(menu, x, y){
    > event.cancelBubble = true;
    > if(menu){
    > if(IE4){
    > for(var i=0; i < menu.items.length;
    > i++){
    > tItem = eval(menu.items.id);
    > if(tItem.hasMenu == true) {
    >
    > tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
    > - 17);
    >
    > }
    > }
    > }
    >
    > if(menu.isChild == true){
    >
    > menu.style.pixelTop =
    > menu.parentItem.offsetTop + menu.parentMenu.offsetTop + 4;
    >
    > menu.style.pixelLeft =
    > menu.parentMenu.offsetLeft + menu.parentMenu.offsetWidth - 4;
    >
    > menu.parentMenu.hasChildVisible =
    > true;
    > menu.parentMenu.visibleChild = menu;
    > menu.style.zIndex =
    > menu.parentMenu.style.zIndex + 1;
    >
    > } else if(x && y){
    >
    > menu.style.pixelTop = y;
    > menu.style.pixelLeft = x;
    > menuContainer.activeMenu = menu;
    > document.onclick =
    > menuContainer.closeAll;
    >
    > }
    >
    > } else {
    >
    > menu = eval(this.menu);
    >
    > if(IE4){
    >
    > for(var i=0; i < menu.items.length;
    > i++){
    > tItem = eval(menu.items.id);
    > if(tItem.hasMenu == true) {
    >
    > tItem.more.style.pixelLeft = (menu.offsetWidth - tItem.more.offsetLeft
    > - 17);
    >
    > }
    >
    > }
    >
    > }
    >
    > menu.style.pixelTop = event.clientY;
    > menu.style.pixelLeft = event.clientX;
    > menuContainer.activeMenu = menu;
    > document.onclick = menuContainer.closeAll;
    >
    > }
    >
    > menu.className = "visibleMenu";
    >
    > return false;
    >
    > }
    >
    > function hideMenu(menu){
    >
    > // to handle the careless child menu hiding down below
    >
    > if(menu == null) return false;
    > event.cancelBubble = true;
    >
    > // i do this kind of carelessly. i was having trouble
    > otherwise
    >
    > hideMenu(menu.visibleChild);
    >
    > if(menu.isChild == true){
    >
    > menu.parentMenu.hasChildVisible = false;
    > menu.parentMenu.visibleChild = null;
    >
    > } else {
    >
    > document.onclick = "";
    > menuContainer.activeMenu = null;
    > }
    > menu.className = "menu";
    >
    > }
    >
    > function closeAll(){
    >
    > hideMenu(menuContainer.activeMenu);
    >
    > }
    >
    > // simple function to return false
    > function returnFalse(){return false;}
    > // function to be used for later functionality
    > // for now it just keeps the menu open when it receives a click;
    > function handleMenuClick(){
    >
    > event.cancelBubble = true;
    > return false;
    >
    >
    >
    > }
    >
    > // just like the function above, only it closes the menu
    > function handleItemClick(){
    >
    > event.cancelBubble = true;
    > menuContainer.closeAll();
    >
    > }
    >
    > // searches the document for elements with a menu paramater
    > function attachMenus(){
    > for(var i in document.all){
    > if(document.all.menu){
    > document.all.onclick = showMenu;
    > }
    > }
    > }
    > </script>
    > </head>
    > <body onload="initMenu()">
    >
    > <a href="#" menu="menu1">Brands of Shampoo</a>
    >
    > <div id="menuContainer">
    > <div id="menu1" class="menu">
    > <div id="subMenu1_1" class="menuItem"><a href="/hair/index.html">Hair
    > Products</a></div>
    > <div id="menu1_1" class="menu">
    > <div id="menuItem1_1_1" class="menuItem"><a
    > href="/hair/shampoo.html">Shampoo</a></div>
    > <div id="menuItem1_1_2" class="menuItem"><a
    > href="/hair/gel.html">Gel</a></div>
    > </div>
    > <div id="subMenu1_2" class="menuItem"><a href="/skin/index.html">Skin
    > Care Products</a></div>
    > <div id="menu1_2" class="menu">
    > <div id="menuItem1_2_1" class="menuItem"><a
    > href="/skin/lotion.html">Lotions</a></div>
    > <div id="subMenu1_2_2" class="menuItem"><a
    > href="/skin/ointments/index.html">Ointments</a></div>
    > <div id="menu1_2_2" class="menu">
    > <div id="menuItem1_2_2_1" class="menuItem"><a
    > href="/skin/ointments/bengay.html">Ben-Gay</a></div>
    > <div id="menuItem1_2_2_2" class="menuItem"><a
    > href="/skin/ointments/icyhot.html">Icy Hot</a></div>
    > <div id="menuItem1_2_2_3" class="menuItem"><a
    > href="/skin/ointments/burncream.html">Burn Cream</a></div>
    > </div>
    > <div id="menuItem1_2_3" class="menuItem"><a
    > href="/skin/powder.html">Powder</a></div>
    > </div>
    > <div id="menuItem1_3" class="menuItem"><a href="/nailpolish.html">Nail
    > Polish</a></div>
    > </div>
    > </div>
    >
    > <br>
    >
    > <a href="#" menu="menu2">Brands of Shampoo</a>
    >
    > <div id="menu2" class="menu">
    > <div id="subMenu2_1" class="menuItem"><a href="/hair/index.html">Hair
    > Products</a></div>
    > <div id="menu2_1" class="menu">
    > <div id="menuItem2_1_1" class="menuItem"><a
    > href="/hair/shampoo.html">Shampoo</a></div>
    > <div id="menuItem2_1_2" class="menuItem"><a
    > href="/hair/gel.html">Gel</a></div>
    > </div>
    > <div id="subMenu2_2" class="menuItem"><a href="/skin/index.html">Skin
    > Care Products</a></div>
    > <div id="menu2_2" class="menu">
    > <div id="menuItem2_2_1" class="menuItem"><a
    > href="/skin/lotion.html">Lotions</a></div>
    > <div id="subMenu2_2_2" class="menuItem"><a
    > href="/skin/ointments/index.html">Ointments</a></div>
    > <div id="menu2_2_2" class="menu">
    > <div id="menuItem2_2_2_1" class="menuItem"><a
    > href="/skin/ointments/bengay.html">Ben-Gay</a></div>
    > <div id="menuItem2_2_2_2" class="menuItem"><a
    > href="/skin/ointments/icyhot.html">Icy Hot</a></div>
    > <div id="menuItem2_2_2_3" class="menuItem"><a
    > href="/skin/ointments/burncream.html">Burn Cream</a></div>
    > </div>
    > <div id="menuItem2_2_3" class="menuItem"><a
    > href="/skin/powder.html">Powder</a></div>
    > </div>
    > <div id="menuItem2_3" class="menuItem"><a href="/nailpolish.html">Nail
    > Polish</a></div>
    > </div>
    > </div>
    > </body>
    > </html>
    Noel Dolan, Jul 18, 2004
    #2
    1. Advertising

  3. Marci

    Marci Keszi Guest

    Hi Noel,

    Thanks for your input...
    I however had these tags in my original document...
    This doesn't solve my problem, but thanks anyway.


    Marci



    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Marci Keszi, Jul 19, 2004
    #3
  4. Marci

    Noel Dolan Guest

    Hi again Marci, actually done a little piece of tidying that I thought
    didn't matter, but was critical to getting it working...

    In the hideMenu function, there is a comment line that has split across two
    lines, that's where the problem is.
    It's with a little irony that the comment should read ~//i do this kind of
    carelessly. i was having trouble otherwise~:D.

    The word ~otherwise~ has gone on to it's own line, and is being treated as
    an unknown command

    ....
    // i do this kind of carelessly. i was having trouble
    otherwise
    ....

    Put it back together, and that will solve the problem.
    ....
    // i do this kind of carelessly. i was having trouble
    otherwise
    ....


    function hideMenu(menu)
    {

    // to handle the careless child menu hiding down below.

    if(menu == null) return false;
    event.cancelBubble = true;

    // i do this kind of carelessly. i was having trouble
    otherwise.

    hideMenu(menu.visibleChild);

    ....

    }

    Have fun!


    Noel.


    "Marci Keszi" <> wrote in message
    news:40fb1750$0$16419$...
    > Hi Noel,
    >
    > Thanks for your input...
    > I however had these tags in my original document...
    > This doesn't solve my problem, but thanks anyway.
    >
    >
    > Marci
    >
    >
    >
    > *** Sent via Developersdex http://www.developersdex.com ***
    > Don't just participate in USENET...get rewarded for it!
    Noel Dolan, Jul 19, 2004
    #4
  5. "Noel Dolan" <> writes:

    > The word ~otherwise~ has gone on to it's own line, and is being treated as
    > an unknown command
    >
    > ...
    > // i do this kind of carelessly. i was having trouble
    > otherwise
    > ...
    >
    > Put it back together, and that will solve the problem.
    > ...
    > // i do this kind of carelessly. i was having trouble
    > otherwise
    > ...


    Your example would have worked better if your own newsreader hadn't
    broken the line again :) It's a known problem with Outlook/OE. I don't
    know if QuoteFix can fix that in all cases, but I think it does in some.
    <URL:http://home.in.tum.de/~jain/software/oe-quotefix/>

    /L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, Jul 19, 2004
    #5
  6. Marci

    Marci Keszi Guest

    Sorry I can't help it if when I post to this site it breaks my code into
    lines...

    Can anyone help me with my original question? I'll post the answer...if
    I ever figure it out...

    Marci

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    Marci Keszi, Jul 20, 2004
    #6
  7. JRS: In article <40fc9eb5$0$16433$>, dated
    Tue, 20 Jul 2004 04:25:25, seen in news:comp.lang.javascript, Marci
    Keszi <> posted :
    >Sorry I can't help it if when I post to this site it breaks my code into
    >lines...


    >*** Sent via Developersdex http://www.developersdex.com ***
    >Don't just participate in USENET...get rewarded for it!


    This is, as you should know, a usenet newsgroup.

    Articles are, in usenet, transmitted as sent.

    Any unwanted line breaks are due to the sending or receiving software.

    When good receiving software breaks a line for display, it should be
    obvious what has happened and easy to undo it.

    But it is the responsibility of the originator to make sure that the
    launching system does not break lines. That includes making a prudent
    choice of news software and access services.

    Unless the author has, understands, and exercises full control, this is
    best done by using lines of no more than 72 characters.

    In particular, intending with tabs is non-constructive; replace each tab
    by a couple of spaces in the source.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://jibbering.com/faq/> JL / RC : FAQ for news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Jul 20, 2004
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. news.west.cox.net

    Select menus above flyout menus? help?

    news.west.cox.net, Dec 8, 2004, in forum: HTML
    Replies:
    8
    Views:
    782
  2. michelle

    Cascading menus with Tk

    michelle, May 20, 2005, in forum: Python
    Replies:
    3
    Views:
    408
    michelle
    May 20, 2005
  3. support

    cascading menus

    support, Oct 21, 2008, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    129
    Nathan Sokalski
    Oct 24, 2008
  4. Cindy Lee

    cascading menus with scrollbars

    Cindy Lee, Aug 21, 2004, in forum: Javascript
    Replies:
    1
    Views:
    95
    Michael Winter
    Aug 21, 2004
  5. Tudor  Tihan
    Replies:
    5
    Views:
    111
Loading...

Share This Page