Menu
In the following script I’m trying to set-up an ‘addEvent()’ for the tabs
but I’m getting an error about an ‘uncaught exception: …’ in FF error console.
I’m pretty sure it is in the initialization during the onload function, specifically at:
[code]
addEvent(document.getElementById(‘sm’+i),’click’,toggle(i));
But I don’t know how to specify the function correctly so that it creates a ‘toggle(“#”)’ for each tab. [toggle(“0”) … toggle(“4”)]
There are commented ‘alert(info)’ messages scattered about while I was trying to debug this problem.
Can someone show me how to correctly specify the function for the ‘addEvent()’.
There is a reference to the original addEvent() code in the script.
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=windows-1252″ http-equiv=”Content-Type” />
<title>Preview Menu</title>
<style type=”text/css”>
#tabbedTable {
width: 300px;
height: 250px;
position: fixed;
border: 1px solid blue;
top:50px; left:100px;
}
#displayContent {
border-bottom: 0;
}
.tab {
text-align: center;
vertical-align: middle;
height: 32px;
border: 1px outset;
cursor: pointer;
color: #6699CC;
background-color: #EEEEEE;
}
.activeTab {
text-align: center;
vertical-align: middle;
height: 32px;
border: 1px outset;
cursor: pointer;
color: #006699;
background-color: #FFFFFF;
}
.contentBlock {
display: none;
height: 195px;
overflow: hidden;
text-align: left;
}
.heading { /* text-align: center; */
font-size:1.5em;
background-color:yellow;
border-bottom:1px solid blue;
}
</style>
<script type=”text/javascript”>
var tabCount = 5;
function toggle(info) {
var tabIDS = ‘sm’+info; // alert(tabIDS); // for testing purposes
var contentIDS = ‘Content’+info;
var tmenu = document.getElementById(‘tabMenu’); // alert(tmenu.id);
var divInfo = tmenu.getElementsByTagName(‘div’); // alert(divInfo.length);
for (var i=0; i<divInfo.length; i++) { // alert(divInfo[i].className);
divInfo[i].className = ‘tab’; }
document.getElementById(tabIDS).className = ‘activeTab’;
for (var i=0; i<tabCount; i++) {
document.getElementById(‘Content’+i).style.display = ‘none’; }
sel = document.getElementById(contentIDS);
if (sel.style.display != ‘block’) { sel.style.display = ‘block’; }
else { sel.style.display = ‘none’; }
}
// Following from: http://ejohn.org/blog/flexible-javascript-events/#postcomment
// should work in all browsers for:
// type = click, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, reset, resize, select, submit
// obj = document.getElementById(IDS);
// fn = doSomething or function() { alert(‘hello!’); }
function addEvent( obj, type, fn ) {
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] );
} else
obj.addEventListener( type, fn, false );
}
/* Following is not currently used
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( ‘on’+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
*/
onload = function() {
var divInfo = document.getElementById(‘tabMenu’).getElementsByTagName(‘div’);
for (var i=0; i<divInfo.length; i++) {
addEvent(document.getElementById(‘sm’+i),’click’,toggle(i));
}
toggle(‘0′);
}
</script>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ id=”tabbedTable”>
<tr><td colspan=”2″ class=”heading”>Header</td></tr>
<tr><td valign=”top” width=”25%” id=”tabMenu”>
<div id=’sm0′ class=”tab”>Category 1</div>
<div id=’sm1′ class=”tab”>Category 2</div>
<div id=’sm2′ class=”tab”>Category 3</div>
<div id=’sm3′ class=”tab”>Category 4</div>
<div id=’sm4’ class=”tab”>Category 5</div>
</td>
<td id=”displayContent” valign=”top”>
<div class=”contentBlock” id=”Content0″>
Information concerning category 1
</div>
<div class=”contentBlock” id=”Content1″>
Information concerning category 2
</div>
<div class=”contentBlock” id=”Content2″>
Information concerning category 3
</div>
<div class=”contentBlock” id=”Content3″>
Information concerning category 4
</div>
<div class=”contentBlock” id=”Content4″>
Information concerning category 5
</div>
</td>
</tr>
</table>
</body>
</html>