[thelist] onclick not working in IE6 or IE7 - script works in Firefox

Blake haswell00 at gmail.com
Tue May 13 23:37:14 CDT 2008


Hi List,

 The imageFlipper() function is run on page load. I have tested in IE
 and the script enters the for loop in imageFlipper(), but the onClick
 event seems to fail because IE wants to follow the links when you
 click and does not perform the swapStories() function. The
 swapStories() function seems to work because it is correctly executed
 when it is referenced in the imageFlipper function.

 Obviously I'm no JS guru but I don't see why this shouldn't work. In
 Firefox it works as expected.

 Thanks for any help,
 Blake

 -- CODE --

 // Get the flipper links
 function getLinks() {
        return document.getElementById('image_flipper').getElementsByTagName('a');
 }

 // Get the images
 function getImages() {
        return document.getElementById('image_flipper').getElementsByTagName('img');
 }

 //  Get the captions
 function getCaptions() {
        var listItem =
 document.getElementById('image_flipper').getElementsByTagName('li');
        var l = 0;
        var captions = new Array();

        for(var k = 0; k < listItem.length; k++) {
                if((k % 2) != 0) {
                        captions[l] = listItem[k];
                        l++;
                }
        }
        return captions;
 }

 // Get the stories
 function getStories() {
        return document.getElementById('stories').getElementsByTagName('li');
 }

 // Set position: absolute; left: -9999px; (default?) on all images,
 stories, and captions and position: static; to the images, stories,
 and captions associated with the link
 function swapStories(selectedStory) {
        var image = getImages();
        var caption = getCaptions();
        var story = getStories();

        for(var j = 0; j < image.length; j++) {
                image[j].style.position = 'absolute';
                caption[j].style.position = 'absolute';
                story[j].style.position = 'absolute';
                image[j].style.left = '-9999px';
                caption[j].style.left = '-9999px';
                story[j].style.left = '-9999px';
        }

        image[selectedStory].style.position = 'static';
        caption[selectedStory].style.position = 'static';
        story[selectedStory].style.position = 'static';
 }

 // Add onClick events to the links
 function imageFlipper() {
        var link = getLinks();
        swapStories(0);
        for(var i = 0; i < link.length; i++) {
                link[i].setAttribute('onclick', 'swapStories(' + i +
'); return false;');
        }
 }



More information about the thelist mailing list