SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "unhiding" ul if url in that section selected

    Hi all
    This maybe a js or a css or a php question I just don't know the best way to do it. I have an accessible css hide/show navigation but I need to show the relevant section when the user is on a page in that section. Specifically in the left navigation you can see what I mean: http://tinyurl.com/84ovgvu What is the best way to do this? Thank you


    If it helps here is the toggle js
    Code javascript:
    var toggleMenu = {
    	init : function(sContainerClass, sHiddenClass) {
    		if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
    		var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass);
    		var arrSubMenus, oSubMenu, oLink;
    		for (var i = 0; i < arrMenus.length; i++) {
    			arrSubMenus = arrMenus[i].getElementsByTagName('ul');
    			for (var j = 0; j < arrSubMenus.length; j++) {
    				oSubMenu = arrSubMenus[j];
    				oLink = oSubMenu.parentNode.getElementsByTagName('a')[0];
    				oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
    				this.toggle(oSubMenu, sHiddenClass);
    			}
    		}
    	},
    	toggle : function(el, sHiddenClass) {
    		var oRegExp = new RegExp("(^|\\s)" + sHiddenClass + "(\\s|$)");
    		el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
    	},
    /* addEvent function from [url]http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html[/url] */
    	addEvent : function(obj, type, fn) {
    		if (obj.addEventListener)
    			obj.addEventListener(type, fn, false);
    		else if (obj.attachEvent) {
    			obj["e"+type+fn] = fn;
    			obj[type+fn] = function() {obj["e"+type+fn](window.event);}
    			obj.attachEvent("on"+type, obj[type+fn]);
    		}
    	},
    /*
    Written by Jonathan Snook, [url]http://www.snook.ca/jonathan[/url]
    Add-ons by Robert Nyman, [url]http://www.robertnyman.com[/url]
    */
    	getElementsByClassName : function(oElm, strTagName, strClassName){
    	    var arrElements = (strTagName == "*" && document.all)? document.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)
    	}
    };
    toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});
    Last edited by ScallioXTX; Nov 28, 2011 at 16:47. Reason: replaced [quote]...[/quote] with [highlight="javascript"]...[/highlight]

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the least invasive method of achieving that (given your existing code) but it doesn't automatically follow it's the best way. The jQuery selectors used are quite intensive, and you'd be better off writing a class to the body indicating the active link, then writing CSS to act upon that combination.

    Code below. Demo version here.

    Code HTML4Strict:
    <!--
    =======================================================================================================================
      START OF EDIT
    =======================================================================================================================
    //-->
      <!-- Removed this script (appears higher up in your original code //-->
      <!-- <script type="text/javascript" src="http:togglemenu.js"></script> //-->
      <style>
        ul.menu ul{
          display: none; /* Initially hide all unordered lists inside ones with class "menu" */
          }
      </style>
     
      <script>
        jQuery(document).ready(
          function(){
            expandMenu(); // Call this function after the DOM is loaded
            setToggles(); // Call this function after the DOM is loaded
          }
        );
     
        function expandMenu(){
          var thisURL = document.location.href; // get current URL
          var index = thisURL.lastIndexOf("/"); // find the position of the last forward slash in URL
          var filename = thisURL.substr(index+1); // file name is everything after last forward slash + one character (the slash itself)
          jQuery('.menu a[href='+filename+']').parents('ul').show(); // Find all menu items linking to current page and set its parent ULs visible
        }
     
        function setToggles(){
          jQuery('.menu > li > a').click(function(e){ // Select direct descendents only: link inside list item inside .menu
            e.preventDefault(); // prevent default behavior (follow link)
            jQuery(this).siblings('ul').toggle(); // Find unordered lists which are siblings of clicked link and display if they are hidden (hide if displayed)
          });
        }
      </script>
    <!--
    =======================================================================================================================
      END OF EDIT
    =======================================================================================================================
    //-->
    From the English nation to a US location.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply really interesting I will get a min jquery and try it looks pretty sweet. I'll also investigate the css method. Thanks again


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
  •