[eluser]the real rlee[/eluser]
UPDATE:
For some reason in the previous version i was using the uri class to give me the current url, when i could have used javascript - this.location.href. Also i've used a modified version of [url="http://dean.edwards.name/weblog/2005/10/add-event2/"]Dean Edwards addEvent()[/url] to limit possible conflict with other code using onload...
Here's the code, the forums wouldnt let me upload the files or use correct script tags in the html example but its all there
Code:
/*
menu.js
@author: Richard Lee aka the real rlee
A simple JavaScript to set "active" class to active menu item based on url
*/
function initMenu(){
var url = this.location.href;
var menu = document.getElementById('main-nav').getElementsByTagName("A");
for( var x = 0; x < menu.length ; x++ ){
if (menu[x].href == url) {
menu[x].className = 'active';
}
}
}
addEvent(window,"load",initMenu);
Code:
/*
addevent.js
@author Dean Edwards, 2005
@modified Tino Zijdel - [email protected]
http://dean.edwards.name/weblog/2005/10/add-event/
*/
function addEvent(element, type, handler)
{
if (element.addEventListener)
element.addEventListener(type, handler, false);
else
{
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers)
{
handlers = element.events[type] = {};
if (element['on' + type]) handlers[0] = element['on' + type];
element['on' + type] = handleEvent;
}
handlers[handler.$$guid] = handler;
}
}
addEvent.guid = 1;
function removeEvent(element, type, handler)
{
if (element.removeEventListener)
element.removeEventListener(type, handler, false);
else if (element.events && element.events[type] && handler.$$guid)
delete element.events[type][handler.$$guid];
}
function handleEvent(event)
{
event = event || fixEvent(window.event);
var returnValue = true;
var handlers = this.events[event.type];
for (var i in handlers)
{
if (!Object.prototype[i])
{
this.$$handler = handlers[i];
if (this.$$handler(event) === false) returnValue = false;
}
}
if (this.$$handler) this.$$handler = null;
return returnValue;
}
function fixEvent(event)
{
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function()
{
this.returnValue = false;
}
fixEvent.stopPropagation = function()
{
this.cancelBubble = true;
}
// This little snippet fixes the problem that the onload attribute on the body-element will overwrite
// previous attached events on the window object for the onload event
if (!window.addEventListener)
{
document.onreadystatechange = function()
{
if (window.onload && window.onload != handleEvent)
{
addEvent(window, 'load', window.onload);
window.onload = handleEvent;
}
}
}Code:
<html>
<head>
<!-- link addevent script here -->
<!-- link menu script here (IMPORTANT must come after addevent) -->
</head>
<body>
<h1>My Page</h1>
<div id="main-nav">
<ul>
<li><a href="mypage.html">My Page</a></li>
</ul>
</body>
</html>
