SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can you please help me with a couple of line of JS in "KeyB Accessible drop downs".

    Hi
    I have been studying navigation systems to increase my knowledge of web page authoring. And I found what I think is a good one however there is two lines of the JavaScript that is just making no sense to me. These two lines are marked in Orange in the JavaScript which drives the "Keyboard Accessible suckerfish drop downs" which can be found below. Essentially these two lines either concatenate some whitespace in front they've a members of an array which assigns special CSS classes to either a collection of LI tags or "A" tags. My problem with these lines of code is that it appears to me for all practical navigation systems the drop-down collections of LI tags and "A" tags would have to be at least two which means the condition of length greater than zero would always be met in the necessity for such a statement would be obviated. So I my understanding this line of code and the "Keyboard Accessible suckerfish drop downs" correctly or not. Please enlighten me with your thoughts.

    Sincerely
    Marc

    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=(this.className.length>0? " ": "") + "sfhover";   
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
    		}
    	}
    }
    mcAccessible = function() {
    	var mcEls = document.getElementById("nav").getElementsByTagName("A");
    	for (var i=0; i<mcEls.length; i++) {
    		mcEls[i].onfocus=function() {
    			this.className+=(this.className.length>0? " ": "") + "sffocus"; //a:focus
    			     this.parentNode.className+=(this.parentNode.className.length>0? " ": "") + "sfhover"; //li < a:focus  
    			if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
    				this.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < a:focus
    				if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
    					this.parentNode.parentNode.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < ul < li < a:focus
    				}
    			}
    		}
    		mcEls[i].onblur=function() {
    			this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), "");
    			this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
    			if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
    				this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
    				if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
    					this.parentNode.parentNode.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
    				}
    			}
    		}
    	}
    }
    
    // only ie needs the sfHover script. all need the accessibility script...
    // thanks http://www.brothercake.com/site/resources/scripts/onload/
    if(window.addEventListener) window.addEventListener('load', mcAccessible, false); // gecko, safari, konqueror and standard
    else if(document.addEventListener) document.addEventListener('load', mcAccessible, false); // opera 7
    else if(window.attachEvent) { // win/ie
    	window.attachEvent('onload', sfHover);
    	window.attachEvent('onload', mcAccessible);
    } else { // mac/ie5
    	if(typeof window.onload == 'function') {
    		var existing = onload;
    		window.onload = function() {
    			existing();
    			sfHover();
    			mcAccessible();
    		}
    	} else {
    		window.onload = function() {
    			sfHover();
    			mcAccessible();
    		}
    	}
    }

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those lines are simply appending a CSS class to the class property of the element.

    You can have more than one class per element, eg
    Code:
    .niceLink {
      color: green;
    }
    .donotdisplay {
      display: none;
    }
    ..
    
    <a class="niceLink donotdisplay">
    Lets look at this line:
    this.className+=(this.className.length>0? " ": "") + "sfhover";

    It's saying "add <something> plus "sfhover" to the className property".
    The <something> depends on whether the className property currently has a value. If it does, add a space, if it doesn't, add nothing.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lets look at this line:
    this.className+=(this.className.length>0? " ": "") + "sfhover";

    It's saying "add <something> plus "sfhover" to the className property".
    The <something> depends on whether the className property currently has a value. If it does, add a space, if it doesn't, add nothing.
    If that is what that line is doing, would it be worse in any possible way you can think of just always to add a space no matter what?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *shrug* it probably won't cause any real problems, never tested it though.


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
  •