SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collasping an expanded menu that is 2 or 3 deep

    I am using the treeMenu.js code from 'The Javascript Anthology book'. I want to be able to close the sub menus by clicking anywhere on the page. Right now it only resets the top level of the menu. I have read somewhere that I need to make a onclick call to the reset part of the code, but I haven't been able to figure that out. I would appreciate any help in being pointed in the right direction.

    Thank you in advance

    Mike

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike,

    Is your test page online?

  3. #3
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a link to the test page

    http://www.finditfoxvalley.com/test/miketest6b.html

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike,

    I came up with a quick solution - it may not be the best - so experiment with it - hopefully this will give you some ideas. In the following all my code-additions are surrounded by "MF" comments. Note that I made tree a global variable. This was just a quick and easy way to test, it's probably not the best way.
    Code:
    // [MF
    var tree;
    // MF]
    
    function treeMenu(navid, indexpage)
    {
      if (typeof document.getElementById == 'undefined') { return; }
    
      var rollover = new Image;
      rollover.src = 'down-red.gif';
      rollover = new Image;
      rollover.src = 'minus.gif'; 
    
    // [MF
      tree = document.getElementById(navid);
    // MF]
    
      if (tree)
      {
        var items = tree.getElementsByTagName('li');
        for (var i = 0; i < items.length; i++)
        {
          treeTrigger(tree, items[i], navid);
        }
    
        if (navigator.vendor == 'Apple Computer, Inc.'
            || typeof window.opera != 'undefined')
        {
          displayReset(tree);
        }
    
        findHere(tree, navid, indexpage); 
    
    // [MF
        attachEventListener(document, 'click', docOnClick, false);
    // MF]
      }
    }
    
    // [MF
    function docOnClick(ev)
    {
      var e = ev || window.event;
      var t = e.target || e.srcElement;
      //window.status = t.tagName;/////////////
      if (t && t.tagName)
      {
        var tn = t.tagName.toUpperCase();
        if (tn != 'UL' && tn != 'LI' && tn != 'A')
        {
          closeAll();
        }
      }
    }
    function closeAll()
    {
        var items = tree.getElementsByTagName('li');
        for (var i = 0; i < items.length; i++)
        {
          clearSiblingBranches(items[i]); 
        }
    }
    // MF]

  5. #5
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Mike

    It works the way my boss wants it to work.

    Mike


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •