-
[RESOLVED] AttachEvent
Hi,
I've trying to get a workshop script that I was having a look at to work on IE 7 (Chris Heilmann's http://www.wait-till-i.com/category/...ve-javascript/)
It currently works with firefox but I can't seem to get the event to fire in IE 7
Does anyone know why?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML Template</title>
<style type="text/css">
*{margin:0;padding:0;}
body{padding:2em;font-family:arial,sans-serif;color:#000;background:#fff;}
h1{padding-bottom:1em;}
#toc li{padding:.2em 0;line-height:1.3em;}
#toc{border:1px solid #999;background:#eee;list-style:none;padding:1em;margin-bottom:1em;}
#toc a{color:#000;}
div{width:100%;}
/* Scripting dependent styles */
body.js #toc{float:left;width:20%;margin-right:5%;}
body.js div{float:right;width:70%;}
body.js div,body.js .back{position:absolute;left:-9999px;}
body.js div.show{position:relative;left:0;}
</style>
</head>
<body class="fr">
<h1>The Seven Rules of unobtrusive JavaScript</h1>
<ul id="toc">
<li><a href="#r1">Do not make any assumptions</a></li>
<li><a href="#r2">Find your hooks and relationships</a></li>
<li><a href="#r3">Leave traversing to the experts</a></li>
</ul>
<div>
<h2 id="r1">Do not make any assumptions</h2>
<p class="back"><a href="#toc">Back to table of contents</a></p>
</div>
<div>
<h2 id="r2">Find your hooks and relationships</h2>
<p class="back"><a href="#toc">Back to table of contents</a></p>
</div>
<div>
<h2 id="r3">Leave traversing to the experts</h2>
<p class="back"><a href="#toc">Back to table of contents</a></p>
</div>
<script type="text/javascript">
document.body.className = (document.body.className +' '||'') + 'js';
var toc = document.getElementById('toc');
if(toc){
var current = {};
function toggle(e){
alert("I'm about to do the toggle");
var t = e.target;
if(t.nodeName.toLowerCase() === 'a'){
if(current.section){
current.section.className = '';
};
var sectionID = t.getAttribute('href').split('#')[1];
var section = document.getElementById(sectionID);
if(section){
section.parentNode.className = 'show';
current.section = section.parentNode;
};
};
};
if(toc.addEventListener){
toc.addEventListener('click',toggle,false);
}else if(toc.attachEvent){
toc.attachEvent('click',toggle);
};
};
</script>
</body>
</html>
Any help will be greatly appreciated
Regards Al
-
Re: AttachEvent
I've managed to fix this; had two errors. Here is the corrected script for completeness -
Code:
<script type="text/javascript">
document.body.className = (document.body.className +' '||'') + 'js';
var toc = document.getElementById('toc');
if(toc){
var current = {};
function toggle(e){
var t;
if(e.target){t=e.target;}else if(e.srcElement){t=e.srcElement;};
if(t.nodeName){
if(t.nodeName.toLowerCase() === 'a'){
if(current.section){
current.section.className = '';
};
var sectionID = t.getAttribute('href').split('#')[1];
var section = document.getElementById(sectionID);
if(section){
section.parentNode.className = 'show';
current.section = section.parentNode;
};
};
};
};
if(toc.addEventListener){
toc.addEventListener('click',toggle,false);
}else if(toc.attachEvent){
toc.attachEvent('onclick',toggle);
};
};
</script>
