[RESOLVED] AttachEvent

**aconybeare** · Jan 24th, 2008, 04:30 AM

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

Thread: [RESOLVED] AttachEvent

Thread Tools

Display

Threaded View

[RESOLVED] AttachEvent

Posting Permissions