On 18/06/2011 14:32, joe wrote :
Hi,
Here is full test page. Nothing seems to happend when I click an item
You have relocated the SCRIPT tag into the HEAD, so when
document.getElementById is called, it fails as the element it refers to
has not been defined yet. Try and run the script by copy-pasting it
directly from my post, without altering it at all.
Also, I understand that you want to build some kind of navigation
manager, so I would like to suggest a refactored version of the script,
below. It comes with two files, which must be located in the same
directory (unless you adjust the path of the "src" attribute of the
SCRIPT tag in the HTML file):
- a javascript file, which contains an implementation for a
NavigationManager,
- a HTML file, which initializes the NavigationManager with the menu and
board components.
--- NavigationManager.js ---
var NavigationManager=(function(){
var navigationHistory=[];
function NavigationEntry(a){
this.href=a.href;
this.text=getText(a);
}
NavigationEntry.prototype.toString=(function(){
return this.text + "{" + this.href + "}";
});
function makeClickListener (board){
return (function (evt) {
var e=evt||window.event;
var t=e.target||e.srcElement;
t=getParent(t, "a");
if(t) {
navigationHistory.push(new NavigationEntry(t));
board.innerHTML=navigationHistory.join("<br>");
}
});
}
function addListener(target, evt, listener) {
if (target[evt]) {
target[evt] = (function(oldListener) {
return (function() {
oldListener.apply(this, arguments);
return listener.apply(this, arguments);
});
})(target[evt]);
} else {
target[evt] = listener;
}
}
function getParent(child, parentTypeName){
if (child==null) return null;
if (child.nodeName.toLowerCase()==parentTypeName) return child;
return getParent(child.parentNode, parentTypeName);
}
function getText(node) {
if(node.nodeType==3) {
return node.nodeValue;
} else if(node.nodeType==1) {
var children=node.childNodes;
var text="";
for(var ii=0; ii<children.length; ii++) {
text += getText(children[ii]);
}
return text;
}
}
return {
init
function(container, board){
if (container && board) {
addListener(container, "onclick" ,makeClickListener(board));
}
})
};
})();
--- NavigationManager.html
<!DOCTYPE html>
<html>
<head>
<title>Navigation Manager Example</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="NavigationManager.js"></script>
</head>
<body>
<ul id="menu">
<li><a href="#" target="main">clothing</a></li>
<li><a href="#" target="main">meats</a></li>
<li>
<a href="#" target="main">fruit</a>
<ul>
<li><a href="#" target="main">apples</a></li>
<li><a href="#" target="main">oranges</a></li>
</ul>
</li>
<li><a href="#" target="main">vegetables</a></li>
</ul>
<div id="messages" style="font-family: Courier New"></div>
<iframe name="main" width="500" height="300"></iframe>
<script type="text/javascript">
NavigationManager.init(
document.getElementById("menu"),
document.getElementById("messages")
);
</script>
</body>
</html>
HTH,
Elegie.
