SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code with createElement, setAttribute, and removeAttribute doesn't work in IE7

    This code works well in both Forefox 2.0.0.1 and Opera 9.02, but no pictures is shown in IE7, only buttons! No error messages!
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="da">
    <head>
    <title>Image slideshow</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="imagetoolbar" content="no">
    <meta name="generator" content="TSW WebCoder">
    <meta name="author" content="Michael Hegelund">
    <meta name="description" content="Image slideshow">
    <meta name="keywords" content="">
    <script type="text/javascript" src="x_core.js"></script>
    <script type="text/javascript" src="x_event.js"></script>
    <script type="text/javascript" src="x_dom.js"></script>
    <!-- x_library from www.cross-browser.com -->
    <style type="text/css">
    #controls{
    		display: none;
    		/*buttons in id controls not shown - set to show by JS*/
    }
    </style>
    </head>
    <body>
    <p id="currentImage"></p><!-- container of image if JS enabled -->
    
    <p id="controls">
    <input type="button" title="&lt; Forrige / Previous &lt;" id="prevBut" name="prevBut" value="&lt; Forrige &lt;">
    <input type="button" title="&gt; N&#230;ste / Next &gt;" id="nextBut" name="nextBut" value=" &gt; N&#230;ste &gt; ">
    </p>
    
    <div id="slideshow">
    <img src="DSC01349.JPG" height="336" width="448" alt="Skovtur Langes&#248; december 2006" title="Skovtur til Langes&#248; den 17. december 2006">
    <img src="DSC01350.JPG" height="336" width="448" alt="Skovtur Langes&#248; december 2006" title="Skovtur til Langes&#248; den 17. december 2006">
    <img src="DSC01351.JPG" height="336" width="448" alt="Skovtur Langes&#248; december 2006" title="Skovtur til Langes&#248; den 17. december 2006">
    <img src="DSC01352.JPG" height="336" width="448" alt="Skovtur Langes&#248; december 2006" title="Skovtur til Langes&#248; den 17. december 2006">
    <img src="DSC01353.JPG" height="336" width="448" alt="Skovtur Langes&#248; december 2006" title="Skovtur til Langes&#248; den 17. december 2006">
    <img src="DSC01354.JPG" height="336" width="448" alt="Skovtur Langes&#248; december 2006" title="Skovtur til Langes&#248; den 17. december 2006">
    <img src="DSC01357.JPG" height="336" width="448" alt="Skovtur Langes&#248; december 2006" title="Skovtur til Langes&#248; den 17. december 2006">
    </div><!-- end of div 'slideshow' -->
    
    <script type="text/javascript">
    /*if JS enabled: slideshow can run so don't show images in id 'slideshow' and show buttons in id 'controls'*/
    document.getElementById('slideshow').style.display = 'none';
    document.getElementById('controls').style.display = 'block'; 
    
    //init slideshow
    var collImg = document.getElementById('slideshow').getElementsByTagName('img');
    var createdTag = document.createElement('img');
    var tP = document.getElementById('currentImage');
    tP.appendChild(createdTag);
    var i = 0//show image no.
    var eImg = tP.getElementsByTagName('img')[i];
    
    //add data to first image to show
    eImg.setAttribute('src',collImg[i].src);
    typeof collImg[i].height !='undefined' ? eImg.setAttribute('height',collImg[i].height) : eImg.removeAttribute('height');
    typeof collImg[i].width !='undefined' ? eImg.setAttribute('width',collImg[i].width) : eImg.removeAttribute('width');
    if(typeof collImg[i].alt == 'undefined') collImg[i].alt = '';
    eImg.setAttribute('alt',collImg[i].alt);
    typeof collImg[i].title !='undefined' ? eImg.setAttribute('title',collImg[i].title) : eImg.removeAttribute('title');
    
    //add event listeners
    xAddEventListener('prevBut','click',prevImage,0);
    xAddEventListener('nextBut','click',nextImage,0);
    
    //functions
    //show next image
    function nextImage(){
    	newImage(1);
    }
    //show previous image
    function prevImage(){
    	newImage(-1);
    }
    
    //show image
    function newImage(direction){
    	if(direction==1){
    		i+=1;
    		if(i==collImg.length){
    			i=0;
    		}
    	}
    	if(direction==-1){
    		i-=1;
    		if(i<0){
    			i=collImg.length-1;
    		}
    	}
    	eImg.setAttribute('src',collImg[i].src);
    	typeof collImg[i].height!='undefined' ? eImg.setAttribute('height',collImg[i].height) : eImg.removeAttribute('height');
    	typeof collImg[i].width!='undefined' ? eImg.setAttribute('width',collImg[i].width) : eImg.removeAttribute('width');
    	if(typeof collImg[i].alt=='undefined') collImg[i].alt = '';
    	eImg.setAttribute('alt',collImg[i].alt);
    	typeof collImg[i].title!='undefined' ? eImg.setAttribute('title',collImg[i].title) : eImg.removeAttribute('title');
    	//alert(i);
    }
    </script>
    </body>
    </html>
    What the code should do:
    If JS is disabled, the images are shown on the site.
    If JS is enabled, the images is not displayed, instead the first image is shown with two buttons 'prev' and 'next' (the slideshow).

    I have validated the HTML, no problems!

    Try the code here: http://www.mehegelund.dk/_slideshow/

    Any good suggestions why it doesn't work in IE7?
    Last edited by hegelund; Dec 31, 2006 at 07:25. Reason: Corrected a few misspellings

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    looks like your problem is because of a "kida" bug in ie's js...

    you are calling a function from an external javascript before it is loaded... and since it isnt loaded it cant run it, and it isnt erroring because the function exists but isnt triggering at the right time. but if you use something like <body onload="doyourmagic()" and put all the code in that function it should fix the problem.

    I tested it and it worked so you "should" be in the clear,
    -ALL
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for your reply (on NewYears Eve, well afternoon for you), but...

    The only external function called in the code is xAddEventListener(...) and it works in IE too! Tested with alert (the last line in the script, remarked away) to see if image number was changed when clicking the buttons.

    The problem is that the image doesn't show.

    Could you post your code, I'd very much want to see how you made it work.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hi ALL

    Forget about my last post. I rearranged the code putting the event listener creating and the JS manipulating CSS in the end of the code, preparing for the rest of the code to be put in an external js file. And now it works both in IE7, FF and Opera!

    I have had this kind of problems before, but NEVER without errors and NEVER only in IE. I hope I will remember this lesson

    Thank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •