Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I have a div with the following content

    HTML Code:
    <div><img src="images/hme_img1.jpg" width="935" height="258" name='SlideShow' id="slide" class="hmeimg" /></div>
    That div is a slideshow (JS is used to change the image every x seconds).

    Elsewhere on the page I have some links which control what that div has inside of it.

    For instance, that div may be changed to have this content:
    HTML Code:
    <div><h1>hello</h1></div>
    However, when I change it back to it's original state, the image does not slideshow anymore.

    I am using element.innerHTML to clear and set the content of the div.

    eg

    Code:
    changeContent = function(elemID)
    {
       var contentDiv = document.getElementById( 'hmecontent' ); // the content div
       if (!document.getElementById) {return;}
       contentDiv.innerHTML = '';
    
       switch(elemID)
        {
         case 'home':
    	contentDiv.innerHTML = "<image code here />"
    	runSlideShow();
    	break;
         case 'other':
    	contentDiv.innerHTML = "<h1>Hello</h1>";
    	break;
        }
    The code used for the slideshow is

    Code:
    function runSlideShow() {
    
    if(document.getElementById( 'slide' ))
    {
    if (document.all) {
    document.images.SlideShow.style.filter="blendTrans(duration=2)";
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
    document.images.SlideShow.filters.blendTrans.Apply();
    }
    document.images.SlideShow.src = preLoad[j].src;
    document.images.SlideShow.alt = alts[j];
    if (document.all) {
    document.images.SlideShow.filters.blendTrans.Play();
    }
    j = j + 1;
    if (j > (p - 1)) j = 0;
    t = setTimeout('runSlideShow()', slideShowSpeed);
    }
    }
    I have inherited a lot of this code, any ideas? It seems to me as if changing the content of the div is making the page not register the 'slide' image once we click the link that displays the image.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    If you want to do this without losing the image's behavior, you can't use innerHTML. This is because innerHTML creates new HTML elements when you set it, and these elements don't have the same events/Javascript attached to them that your original elements did. Now, the fact that runSlideShow running again doesn't fix that is a little odd, but the way that slide show seems to work is extremely odd anyway (who uses document.images nowadays?). You might want to consider replacing that with a slide show based on jQuery or Scriptaculous. Nonetheless, let's try and fix it in the same context.

    You can try to use innerHTML for the h1s while hanging on to the image elements. For example:

    Code:
    var oldImages;
    changeContent = function(elemID)
    {
       var contentDiv = document.getElementById( 'hmecontent' ); // the content div
       if (!document.getElementById) {return;}
       contentDiv.innerHTML = '';
    
       switch(elemID)
        {
         case 'home':
    	contentDiv.innerHTML = "";
            var imageNode;
            for (imageNode in oldImages)
                contentDiv.appendChild(imageNode);
    	break;
         case 'other':
            oldImages = contentDiv.childNodes;
    	contentDiv.innerHTML = "<h1>Hello</h1>";
    	break;
        }
    }
    The above code should store the old image nodes away when h1 is set and then restore them when they need to be restored. This way, they keep their events, and theoretically the slide show continues to refer to the same objects.

    Warning: I have not tested this code, so it might not work. Theoretically, however, it should.

  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Thanks a lot Shadowfiend for that in-depth reply. I was on some IRC channels last night and thought no one knew an answer! (You get a lot of attitude in those places, hmph).

    I thought it would be something to do with the page losing the images/the event handlers not attaching to the image.

    However: the content required for each link was quite large and will soon grow so I suggested we change how this works (as only the content that is handcoded (HTML) would be index by search engines.

    So, the page now uses a get parameter to indicate which page to include (ASP.NET Response.WriteFile)

    Thanks for your suggestion though.

    Edit: This website in question was outsourced to a web design company, and to be honest it is not up to much, but it gives me hope, if they can have lousy code and still get clients then so can I!

    Edit Edit: I can get clients but with decent code!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:13 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com