SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    354
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Generating links onload: Works in FF, IE9 but not IE7

    I have created a small slideshow for a client, which may be seen at http://webadit.co.uk/cakelady/?page=wedding1.
    Each thumnail image is contained in a LI. The complete 'text' content of each LI is quite long, much of the content is the same. So to save myself some typing I'm trying to generate the links when the page loads. It works fine in FF8 and in IE9, but fails in IE7 (IE8 not tested yet).
    The full text of the LI is:
    HTML Code:
    <li><a onclick="return showPic(this)" href="img/cake1.jpg" title="The finished cake"><img src='img/cake1.jpg' alt='' /></a></li>
    If hard coded like that it works 'everywhere' (FF8, IE7 & IE9 tested so far). You can see that at http://webadit.co.uk/cakelady/?page=wedding.
    To save myself typing I've tried a simple link to the thumbnail like this:
    HTML Code:
    <li><img src='tn/cake1.jpg' alt='The finished cake' /></li>
    and then generated the necessary additional code with JS on loading:
    Code:
    //	Creates and appends links for Slide Show
    	function setSlideshowLinks(path) {
    		if (!document.getElementById) return false;
    		var slides = document.getElementById('slideshow');
    		var items = slides.getElementsByTagName('li');
    		for (var i=0; i<items.length; i++) {
    			var img = items[i].firstChild;
    			var src = img.getAttribute('src');
    			var alt = img.getAttribute('alt');
    			var slash = src.lastIndexOf('/')
    			var imgname = src.substr(slash+1);            // larger image has same NAME, different path
    			var newsrc = path + imgname;                  // new source for the larger image
    			var anchor = document.createElement('a');
    			anchor.setAttribute('onclick', 'return showPic(this)');
    			anchor.setAttribute('title', alt);
    			anchor.setAttribute('href', newsrc);
    			anchor.appendChild(img);
    			items[i].appendChild(anchor);
    		}
    	}
    This function is finding all the LI tags in the Slide Show, looping through them in turn and creating the additional information, including the 'onclick' event handler. The Title for the displayed image is derived from the 'alt' on the thumbnail.
    In FF8 the generated code looks like this:
    HTML Code:
    <li><a href="img/cake1.jpg" title="The finished cake" onclick="return showPic(this)"><img src="tn/cake1.jpg" alt="The finished cake"></a></li>
    And in IE7 it looks like this (from the Debug Bar):
    HTML Code:
    <li><A title="The finished cake" onclick="return showPic(this)" href="img/cake1.jpg"><IMG alt="The finished cake" src="tn/cake1.jpg"></A></li>
    Apart from the order of the attributes and the capitalisation of the elements, this appears to me to be identical. But, when I click on the thumbnail, instead of the 'onclick' behaviour I get the enlarged image opening by itself in the window. The 'onclick' is being ignored. There are one or two 'alerts' in the 'showPic' script which serve to show when it is called from the 'onclick' event handler (alerts not seen in IE7, of course).
    I wouldn't have thought that the order of attributes would make any difference, so what can be causing this to fail in IE7, bearing in mind that it works OK when hard coded ?
    Note 1: The original IMG element in the LI isn't explicitly removed, as it doesn't seem necessary in FF, and doesn't appear in the generated code. In fact I have tried explicitly removing it at the end of the JS function, only to get a not found error. Perhaps appending it to the anchor serves the same purpose.
    Note 2: Images are my own, and not indicative of the quality of my client's work.
    Tim Dawson
    Isle of Mull, Scotland

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Presumably there are no console errors. It works in IE8.

    Code:
    anchor.setAttribute('onclick', 'return showPic(this)');
    The first thing I would try is changing the above to:

    Code:
    anchor.onclick = function(){ return showPic(this); }
    Never use setAttribute unless direct assignment fails.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    354
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you Logic Ali, your suggestion appears to work, subject to a bit more rigourous testing. In IE7 the generated code (as seen in DebugBar) now reads:

    HTML Code:
    <li><A title="The finished cake" href="img/cake1.jpg"><IMG alt="The finished cake" src="tn/cake1.jpg"></A></li>
    No mention of the 'onclick' at all. (The <li> wasn't shown, but I've added it for consistency with my initial post).
    And in FF8 it's:
    HTML Code:
    <li><a href="img/cake1.jpg" title="The finished cake"><img src="tn/cake1.jpg" alt="The finished cake"></a></li>
    Thanks too for confirming that the original version works in IE8. However, I'll stick to the new.
    Tim Dawson
    Isle of Mull, Scotland


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
  •