Enhancing Structural Markup with JavaScript

Finally, we assign the et_toggle function to the link's onclick event, causing the function to be called whenever the links is activated. The next step is to define that function.

function et_toggle(e) {  
 if (typeof e == 'undefined') {  
   var e = window.event;  
 }  
 var source;  
 if (typeof e.target != 'undefined') {  
   source = e.target;  
 } else if (typeof e.srcElement != 'undefined') {  
   source = e.srcElement;  
 } else {  
   return true;  
 }

This first block of code exists to make up for another difference between the way Internet Explorer and other browsers handle events. We need to know which link was activated when the function was called, as this will allow us to identify the panel which should be displayed. The above code identifies the element from which the event originated and places it in the source variable, using code adapted from Peter-Paul Koch's excellent explanation of the issue on QuirksMode:

 if (source.nodeType == 3) {  
   source = targ.parentNode;  
 }

This code is there for compatibility with Safari. All other browsers that I tested returned the actual link element as the source of the click event, but Safari returned instead the text node contained inside the link. Text nodes have their nodeType set to 3 (a constant defined by the W3C DOM), so, by checking for this, we can identify this problem and reset the target to the parent of the text node, which should be the link element.

 var id = source.href.split('#')[1];

Again we extract the ID from the link using the split method.

 var elem;  
 for (var i = 0; (elem = et_toggleElements[i]); i++) {  
   if (elem.id != id) {  
     elem.style.display = 'none';  
   } else {  
     elem.style.display = 'block';  
   }  
 }

Now that we know which panel we wish to display, we can cycle through our array of elements, switching off everything except the one with an ID that matches the ID of the required panel.

 return false;  
}

By returning false, we prevent the link from actually being followed when it is activated, which could result in an undesirable jump down the page viewed in the browser.

The final step is to register the et_init function with the load event of the window, using the addEvent function described earlier.

addEvent(window, 'load', et_init);

You can see the finished code in action here.

Conclusion

In this article, we have seen two ways in which well structured markup can be paired up with Javascript and the W3C DOM to achieve a useful effect. I hope this article has inspired you to seek new ways of using Javascript and intelligent markup.

Further Reading

There are many other excellent examples of Javascript effects based on structural markup. Here are just a few that are worth checking out:

• Labels.js by Aaron Boodman
  http://www.sitepoint.com/article/1206/

• Nice Titles by Stuart Langridge
  http://www.kryogenix.org/code/browser/nicetitle/

• aqLists by Stuart Langridge
  http://www.kryogenix.org/code/browser/aqlists/

• sorttable by Stuart Langridge
  http://www.kryogenix.org/code/browser/sorttable/

• Table of Contents by Peter Paul-Koch
  http://www.quirksmode.org/dom/toc.html
  Go to page: 1 2 3

  If you liked this article, share the love:

  • Save to Delicious
  Print-Friendly Version Email to a Friend Suggest an Article