www.webdeveloper.com
Results 1 to 10 of 10

Thread: Display menu without onlick function

  1. #1
    Join Date
    Jan 2014
    Posts
    4

    Display menu without onlick function

    Hi,

    Thanks for reading this. I am working on some menu code using javascript and CSS. Rather than using the onclick function for some pages I would like to automatically just display the subMenus. I have looked everywhere and cant find a function to replace this. Eg. If I am on the ABOUT US page I want the submenu to be displayed. However while I am on the ABOUT US page and I click on the SHOWCASE page I would like to the submenu to be displayed over the top.

    I hope I am making sense and thanks for your help.

    HTML
    Code:
    <li onclick='showSubMenu("sm_item1")'>  
    ABOUT US
    <ul class="subMenus" id="sm_item1" > 
    <li><a href="landscape.htm" class="menulinkoff">LANDSCAPE</a></li> 
    <li><a href="swimming.htm" class="menulinkoff">SWIMMING</a></li>
    </ul> 
    </li> 
    											
    											
    <li onclick='showSubMenu("sm_item2")'>  
    SHOWCASE 
    <ul class="subMenus" id="sm_item2"> 
    <li><a href="residential.htm">RESIDENTIAL</a></li>
    <li><a href="designs">DEESIGN</a></li>
    <li><a href="commercial.htm">COMMERCIAL</a></li>
    </ul> 
    </li>

    JAVASCRIPT
    Code:
    window.onload=function() { 
     subMenusO = getElementsByClassName(document,'ul','subMenus'); 
    } 
    //----------------------------------------------------------- 
      
    function showSubMenu(elemId) { 
     var dispStatus = (document.getElementById(elemId).style.display == 'block')? 'none' : 'block'; 
     //hide any visible submenus 
     for(var i=0; i < subMenusO.length; i=i+1) { 
         subMenusO[i].style.display = 'none'; 
        } 
        //show/hide this menu id 
        document.getElementById(elemId).style.display = dispStatus; 
    } 
    //-------------------------------------------------------------------------- 
    
    function getElementsByClassName(oElm, strTagName, strClassName){ 
        var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName); 
        var arrReturnElements = new Array(); 
        strClassName = strClassName.replace(/\-/g, "\\-"); 
        var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); 
        var oElement; 
        for(var i=0; i<arrElements.length; i++) 
        { 
            oElement = arrElements[i]; 
            if(oRegExp.test(oElement.className)) 
            { 
                arrReturnElements.push(oElement); 
            } 
        } 
        return (arrReturnElements) 
    }

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330
    Quote Originally Posted by Padonak View Post
    Bad links? Source timed out. (???)

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    don't know, for me everything works good
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jan 2014
    Posts
    4
    Quote Originally Posted by Padonak View Post

    Hi Padonak

    Thanks for your code. I can see how having the menu in the JS can be useful. I am not very experienced with JS hence why my menu is in CSS. Maybe if you can have a look at the website which is http://www.b4ugolive.com/space/jobs.htm

    you can comment on the code I have. When this page loads I would like the submenu under showcase to be showing. It is just for this page and not all the other pages so I am looking to replace the
    Code:
    <li onclick='showSubMenu("sm_item2")'>
    with something instead of onclick. Any ideas?

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    if you want it only for that page you can just use this script in the head section:

    Code:
    window.onload=function(){
    var loc=location.href;
    if(loc.substring(loc.lastIndexOf('/')+1,loc.indexOf('.htm'))=='jobs'){
    showSubMenu('sm_item2');
    }
    }
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Jan 2014
    Posts
    4
    Hi Padonak,

    Thanks for the code. Unfortunately that didn't work. I can see what you are trying to do.
    If we can't work it out I make just have to hard code a different menu for those pages unless you have another idea.

    I was hoping I could put some sort of value on the page and if the javascript reconised the value the the menu would be on rather that onlick.

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    may be you have another window.onload somewhere in your linked scripts. in this case the new window.onload overrides those functions and it causes errors. try this one:

    Code:
    /* 
    // this way you can see what has window.onload
    alert(window.onload.toString()); 
    */ 
    var old=window.onload;
    window.onload=function(){
    old();
    var loc=location.href;
    if(loc.substring(loc.lastIndexOf('/')+1,loc.indexOf('.htm'))=='jobs'){
    showSubMenu('sm_item2');
    }
    }
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  9. #9
    Join Date
    Jan 2014
    Posts
    4
    Hi Padonak,

    Perfect. Your a super star. Thank you for your help.

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    lol, thanks and you're welcome ) but i'm just a plumber, not a star
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles