Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with Expandable/Collapsible menus

    The script below allows me to create expandable/collapsible menus and uses HTML tags to determine parent/child categories.

    Code:
    <ul id="menu">
    <li>This is the Parent
    <ol><li>This is the child</li></ol>
    </ul>
    What I'm trying to figure out, and have been brutally unsuccessful thus far, is how to expand the menus upon an initial visit.

    For example, on the home page, I have a link to "Colors" and a link to "Groceries". When a user clicks on either "Colors" or "Groceries", they are taken to a page that (among other things) features these collapsible menus as a navgiation tool:

    Colors
    Groceries

    If they were to click on Colors, the menu would expand and the user would see:

    Colors
    - Red
    - Blue
    - Yellow

    Groceries

    If they were to click on Groceries, the menu would expand and the user would see:

    Colors
    Groceries
    - Milk
    - Eggs
    - Bread

    What I want is for the user to see the expanded version upon the initial visit to the page with the collapsible menus, depending on whether they clicked "Colors" or "Groceries" on the homepage. (So, if they click on Colors, the Colors menu would be expanded, and if they clicked on Groceries, the groceries menu would be expanded).

    I should also mention that the site is primarily written in php, and the url is already passing variables to my php script. So, the url that includes the collapsible menus is, for example, http://abc.someurl.com/index.php?col...groceries=milk

    Can someone please tell me how to grab the "red" out of the URL, and then write an if/else statement for it? Even better, can someone provide a working example?

    Here's the JS code:

    Code:
    <!-- BEGIN COLLAPSIBLE MENUS -->
     
    <script language="JavaScript">
    <!--
    function SymError()
    {
      return true;
    }
     
    window.onerror = SymError;
    var SymRealWinOpen = window.open;
     
    function SymWinOpen(url, name, attributes)
    {
      return (new Object());
    }
     
    window.open = SymWinOpen;
     
    //-->
    </script>
     
    <script type="text/javascript">
     
    // 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[i], filter)) result[result.length] = children[i];
            }
            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[i];
                    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[i];
                    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;
     
    </script>  
     
    <!-- END COLLAPSIBLE MENUS -->

  • #2
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Please help?

    I could really use some help here!

    Isn't there a way that I could just say,

    <?
    // In php:

    if $variable == "Red"

    ?>

    <!-- then this is an active menu in javascript --> ?

    Meaning, it'll work as though I "clicked" on Colors? I'm so stuck, and really running out of time. Could really, really use and appreciate some help!

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    working examples of using the ? string

    http://forums.js-x.com/viewtopic.php?t=1248

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <a href="test2.htm?RED" >TEST</a>
    </body>
    
    </html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function TestQ(){
     var QS=self.location.toString().split('?')[1];
     if (QS){
      alert(QS);
     }
    }
    //-->
    </script></head>
    
    <body onload="TestQ();" >
    
    </body>
    
    </html>

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Closer, but still far off

    I've gotten further. How can I show that a menu is an activeMenu without having clicked on it? Please see "THIS IS WHERE I'M STUCK" in the code below:

    Code:
    var curURL = window.location.href;
    var key = new Array();
    for (var i=0;i<curURL.replace(/^.+\?/,'').split('&').length;i++) {    
            key[curURL.replace(/^.+\?/,'').split('&')[i].split('=')[0]] = curURL.replace(/^.+\?/,'').split('&')[i].split('=')[1];}
    
    alert(key['groceries']);
    alert(key['colors']); 
    
    switch (key['groceries']) {    
    case 'milk':        
    // THIS IS WHERE I'M STUCK 
    break;    case 'bread':        
    // do stuff        
    break;   
    case 'cheese':        
    // do stuff        
    break;    
    default: break;
    }

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    key[curURL.replace(/^.+\?/,
    this unnecessary

    ?milk:cheese:bread'

    ary=loc.split('?')[1].split(':');

    equates to

    ary=('milk','cheese','bread');

    then use the required ary field


  •  

    Posting Permissions

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