Javascript menu modifications

Discussion in 'Javascript' started by Jay, Feb 11, 2005.

  1. Jay

    Jay Guest

    I've been using Travis's Expanding Menu
    (http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i'm
    working on. The problem is I need to add some functionality to it.

    I need the the ability to define a subsection to be open when you land
    on a page, but when you select another option for it to open that
    section and close the previously open one.

    I though i'd got round this by adding a class to the nested ol and
    setting it to display: inline; in the CSS, but unfortunatly, because
    the CSS forces the nested section open it remains open when you click
    another section.

    Any javascript experts out there fancy helping me out? Code posted
    below...


    // Node Functions

    if(!window.Node){
    var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
    }
    function checkNode(node, filter){
    return (filter == null || node.nodeType == Node[filter] ||
    node.nodeName.toUpperCase() == filter.toUpperCase());
    }
    function getChildren(node, filter){
    var result = new Array();
    var children = node.childNodes;
    for(var i = 0; i < children.length; i++){
    if(checkNode(children, filter))
    result[result.length] = children;
    }
    return result;
    }
    function getChildrenByElement(node){
    return getChildren(node, "ELEMENT_NODE");
    }
    function getFirstChild(node, filter){
    var child;
    var children = node.childNodes;
    for(var i = 0; i < children.length; i++){
    child = children;
    if(checkNode(child, filter)) return child;
    }
    return null;
    }
    function getFirstChildByText(node){
    return getFirstChild(node, "TEXT_NODE");
    }
    function getNextSibling(node, filter){
    for(var sibling = node.nextSibling; sibling != null; sibling =
    sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
    }
    return null;
    }
    function getNextSiblingByElement(node){
    return getNextSibling(node, "ELEMENT_NODE");
    }

    // Menu Functions & Properties

    var activeMenu = null;

    function showMenu(){
    if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display =
    "none";
    }
    if(this == activeMenu){
    activeMenu = null;
    }else{
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
    }
    return false;
    }
    function initMenu(){
    var menus, menu, text, a, i;
    menus = getChildrenByElement(document.getElementById("menu"));
    for(i = 0; i < menus.length; i++){
    menu = menus;
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
    }
    }

    // ||||||||||||||||||||||||||||||||||||||||||||||||||

    if(document.createElement) window.onload = initMenu;
    Jay, Feb 11, 2005
    #1
    1. Advertising

  2. Jay <> wrote in message
    news:...
    > I've been using Travis's Expanding Menu
    > (http://www.squidfingers.com/code/dhtml/expandingmenu/) for a site i'm
    > working on. The problem is I need to add some functionality to it.
    >
    > I need the the ability to define a subsection to be open when you land
    > on a page, but when you select another option for it to open that
    > section and close the previously open one.
    >
    > I though i'd got round this by adding a class to the nested ol and
    > setting it to display: inline; in the CSS, but unfortunatly, because
    > the CSS forces the nested section open it remains open when you click
    > another section.
    >
    > Any javascript experts out there fancy helping me out?


    Here's a kludge that seems to work. Replace initMenu() with this code, and
    set 'startWith' to the section you want to display initially, where 0 ==
    first.

    function initMenu()
    {
    var menus, menu, text, a, i, startWith=1; // Sets initially displayed
    section
    menus = getChildrenByElement(document.getElementById("menu"));
    for(i = 0; i < menus.length; i++)
    {
    menu = menus;
    text = getFirstChildByText(menu);
    a = document.createElement("a");

    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
    a.id="mLink"+i
    if(i==startWith)

    getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di
    splay = "block";
    }

    }

    --
    S.C. http://makeashorterlink.com/?H3E82245A
    Stephen Chalmers, Feb 12, 2005
    #2
    1. Advertising

  3. Jay

    Jay Guest

    > Here's a kludge that seems to work. Replace initMenu() with this
    code, and
    > set 'startWith' to the section you want to display initially, where 0

    ==
    > first.
    >
    > function initMenu()
    > {
    > var menus, menu, text, a, i, startWith=1; // Sets initially

    displayed
    > section
    > menus = getChildrenByElement(document.getElementById("menu"));
    > for(i = 0; i < menus.length; i++)
    > {
    > menu = menus;
    > text = getFirstChildByText(menu);
    > a = document.createElement("a");
    >
    > menu.replaceChild(a, text);
    > a.appendChild(text);
    > a.href = "#";
    > a.onclick = showMenu;
    > a.onfocus = function(){this.blur()};
    > a.id="mLink"+i
    > if(i==startWith)
    >
    >

    getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di
    > splay = "block";
    > }
    >
    > }


    Stephen,

    thanks for taking the time to help me out with this one, unfortunatly
    my knowledge of javascript is rubbish, hense my asking for some help.
    Your 'kludge' as you put it works great so thanks in advance! Although
    I have a couple of other questions,.. is there an easy way to add these
    two features...

    (1) The script is currently, held in an external javascript document,
    so is there any way of putting the 'StartWith' trigger onto the page?

    (2) Also in some cases the menu needs to display as default i.e with no
    sub menu displayed.

    If you (or anyone else) could spare the time to have a look at this
    then I would be most grateful!

    James
    Jay, Feb 14, 2005
    #3
  4. Jay <> wrote in message
    news:...
    > > Here's a kludge that seems to work. Replace initMenu() with this

    > code, and
    > > set 'startWith' to the section you want to display initially, where 0

    > ==
    > > first.
    > >
    > > function initMenu()
    > > {
    > > var menus, menu, text, a, i, startWith=1; // Sets initially

    > displayed
    > > section
    > > menus = getChildrenByElement(document.getElementById("menu"));
    > > for(i = 0; i < menus.length; i++)
    > > {
    > > menu = menus;
    > > text = getFirstChildByText(menu);
    > > a = document.createElement("a");
    > >
    > > menu.replaceChild(a, text);
    > > a.appendChild(text);
    > > a.href = "#";
    > > a.onclick = showMenu;
    > > a.onfocus = function(){this.blur()};
    > > a.id="mLink"+i
    > > if(i==startWith)
    > >
    > >

    >

    getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di
    > > splay = "block";
    > > }
    > >
    > > }

    >
    > Stephen,
    >
    > thanks for taking the time to help me out with this one, unfortunatly
    > my knowledge of javascript is rubbish, hense my asking for some help.
    > Your 'kludge' as you put it works great so thanks in advance! Although
    > I have a couple of other questions,.. is there an easy way to add these
    > two features...
    >
    > (1) The script is currently, held in an external javascript document,
    > so is there any way of putting the 'StartWith' trigger onto the page?


    Delete the declaration of startWith in the initMenu() function, then define
    startWith within script tags in the page containing the menu:

    <script type='text/javascript'>
    var startWith=1;
    </script>


    > (2) Also in some cases the menu needs to display as default i.e with no
    > sub menu displayed.


    Then under those circumstances, assign startWith a value of -1.

    --
    S.C. http://makeashorterlink.com/?H3E82245A
    Stephen Chalmers, Feb 14, 2005
    #4
  5. Jay

    RobB Guest

    Stephen Chalmers wrote:
    > Jay <> wrote in message
    > news:...
    > > > Here's a kludge that seems to work. Replace initMenu() with this

    > > code, and
    > > > set 'startWith' to the section you want to display initially,

    where 0
    > > ==
    > > > first.
    > > >
    > > > function initMenu()
    > > > {
    > > > var menus, menu, text, a, i, startWith=1; // Sets initially

    > > displayed
    > > > section
    > > > menus = getChildrenByElement(document.getElementById("menu"));
    > > > for(i = 0; i < menus.length; i++)
    > > > {
    > > > menu = menus;
    > > > text = getFirstChildByText(menu);
    > > > a = document.createElement("a");
    > > >
    > > > menu.replaceChild(a, text);
    > > > a.appendChild(text);
    > > > a.href = "#";
    > > > a.onclick = showMenu;
    > > > a.onfocus = function(){this.blur()};
    > > > a.id="mLink"+i
    > > > if(i==startWith)
    > > >
    > > >

    > >

    >

    getNextSiblingByElement((activeMenu=document.getElementById(a.id))).style.di
    > > > splay = "block";
    > > > }
    > > >
    > > > }

    > >
    > > Stephen,
    > >
    > > thanks for taking the time to help me out with this one,

    unfortunatly
    > > my knowledge of javascript is rubbish, hense my asking for some

    help.
    > > Your 'kludge' as you put it works great so thanks in advance!

    Although
    > > I have a couple of other questions,.. is there an easy way to add

    these
    > > two features...
    > >
    > > (1) The script is currently, held in an external javascript

    document,
    > > so is there any way of putting the 'StartWith' trigger onto the

    page?
    >
    > Delete the declaration of startWith in the initMenu() function, then

    define
    > startWith within script tags in the page containing the menu:
    >
    > <script type='text/javascript'>
    > var startWith=1;
    > </script>
    >
    >
    > > (2) Also in some cases the menu needs to display as default i.e

    with no
    > > sub menu displayed.

    >
    > Then under those circumstances, assign startWith a value of -1.
    >
    > --
    > S.C. http://makeashorterlink.com/?H3E82245A


    Or...

    function initMenu(item)
    {
    var menus, menu, text, a, i;
    if (item) item = new RegExp(item);
    menus = getChildrenByElement(document.getElementById("menu"));
    for(i = 0; i < menus.length; i++)
    {
    menu = menus;
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
    if (item && item.test(text.nodeValue))
    a.onclick();
    }
    }

    ...and in specific pages:

    if(document.createElement)
    window.onload = function()
    {
    initMenu('Menu Item 3');
    }
    RobB, Feb 14, 2005
    #5
    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. Pete Davis

    Control modifications and AutoPostBack

    Pete Davis, Jan 17, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    402
    |{evin
    Jan 17, 2004
  2. =?Utf-8?B?U2FjaGk=?=

    Menu modifications...query!

    =?Utf-8?B?U2FjaGk=?=, Jun 23, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    301
    =?Utf-8?B?U2FjaGk=?=
    Jun 23, 2004
  3. Andrea Hahn
    Replies:
    0
    Views:
    445
    Andrea Hahn
    Aug 18, 2003
  4. Jason
    Replies:
    1
    Views:
    338
    Jack Klein
    Oct 18, 2003
  5. Replies:
    5
    Views:
    359
    Tim Williams (gmail)
    Nov 2, 2005
Loading...

Share This Page