Member Avatar for helenc

Hi there,

I'm having trouble getting a rotating image script working on a site. Unfortunately it's not displaying correctly in Firefox or IE9 and I need some help to fix that and wondered if anyone would be kind enough to help please?

It seems to get stuck on the Sharpie animation (the second one in a sequence of 9) in IE and is jumpy throughout in Firefox, though it seems to be working fine in Opera and Chrome.

From my limited knowledge - and it's limited - I think it has something to do with animated gifs not displaying correctly in Firefox but it could also have something to do with the time delay settings in the coding itself. When I originally added in the time delays I based it on the length of each animated gif and added in an initial time delay of 3 seconds as you can see below. How do I fix it so I can see the rotating banner in full in all browsers?

thanks
Helen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
                <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
                <title>Banner</title> 
<script type="text/javascript"> 
                <!-- Original:  D. Keith Higgs (dkh2@po.cwru.edu) -->

     <!-- Begin
     var timeDelay = 3; // initial change delay time in seconds 
     /* Provide image with time value - scout@communitymx.com */
     var Pix = new Array (
            ["/skins/zipskin_khxc0091/media/1_gen_ban_crc_intro.gif", 15, ""]
             , ["/skins/zipskin_khxc0091/media/2_gen_ban_sharpie.gif", 9, ""] 
             , ["/skins/zipskin_khxc0091/media/3_gen_ban_rhino.gif", 6, ""] 
             , ["/skins/zipskin_khxc0091/media/4_gen_ban_dymo.gif", 10, ""] 
                     , ["/skins/zipskin_khxc0091/media/5_gen_ban_leitz.gif", 13, ""] 
                     , ["/skins/zipskin_khxc0091/media/6_gen_ban_xyron.gif", 18, ""] 
                     , ["/skins/zipskin_khxc0091/media/7_gen_ban_canon.gif", 14, ""] 
                     , ["/skins/zipskin_khxc0091/media/8_gen_ban_cardscan.gif", 13, ""] 
          );
     var howMany = Pix.length;
     timeDelay *= 1000;
     var PicCurrentNum = 0;
     var PicCurrent = new Image();
     PicCurrent.src = Pix[PicCurrentNum][0];
      PicCurrent.href = Pix[PicCurrentNum] [2];
     function startPix() {
          timer = setInterval("slideshow()", timeDelay);
     }
     function slideshow() {
          PicCurrentNum++;
          if (PicCurrentNum == howMany) {
               PicCurrentNum = 0;
          }
          PicCurrent.src = Pix[PicCurrentNum][0];
          document["ChangingPix"].src = PicCurrent.src;
           PicCurrent.href = Pix[PicCurrentNum][2];
           document.links["bannerLink"].href = PicCurrent.href;

          /* Redeclare timer with given value - scout@communitymx.com */
          timeDelay = Pix[PicCurrentNum][1]*1000;
          clearInterval(timer);
          timer = setInterval("slideshow()", timeDelay);
     }
     //  End -->
     </script>
</head>
<body onload="startPix()">
<a name="bannerLink" href="#" title="banner link"><img name="ChangingPix" src="/skins/zipskin_khxc0091/media/1_gen_ban_crc_intro.gif" width="530" height="120" border="0" alt="Supplier range from CRC" /> </a>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 230 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

A few concise, practical points to try before a full rewrite — and a small, modern pattern you can drop in to replace the fragile timing logic.

The symptoms you describe (the sequence hanging on the second frame and Firefox looking jumpy) commonly come from a mix of three things: legacy name-based DOM access that behaves inconsistently across browsers, resetting/clearing intervals while relying on string-based setInterval calls, and switching img.src before the new file is fully loaded (which can cause flicker or apparent “stops” for some GIF decoders). Also, changing link targets via older document.links["..."] or name-based references is brittle; use explicit element IDs and standard DOM methods instead. — your initial 3s bootstrap plus per-image timing is fine in principle, but the timer-reset pattern used can create races in some engines.

Suggested fixes and troubleshooting checklist

  • Replace name-based access with getElementById (give the anchor and image an id).
  • Preload each slide into an Image object up front, and only swap the visible img.src after the preload’s onload fires. That reduces jumpiness.
  • Use setTimeout to schedule the next slide rather than repeatedly creating/clearing setInterval; it’s simpler and less error-prone when intervals vary per-slide.
  • Update the anchor’s href via the DOM object (e.g., bannerLink.href = ...) rather than document.links[...].
  • Use the browser console (F12) to watch for JS errors and to confirm each image request succeeds (no 404s or MIME problems).

Minimal pattern (keeps logic clear and cross-browser)

// slides = [{src:'a.gif', delay:5000, url:'...'}, ...]
var i = 0;
function showNext(slides){
  var slide = slides[i];
  var img = new Image();
  img.onload = function(){
    document.getElementById('bannerImg').src = slide.src;
    document.getElementById('bannerLink').href = slide.url;
    setTimeout(function(){
      i = (i + 1) % slides.length;
      showNext(slides);
    }, slide.delay);
  };
  img.src = slide.src;
}
showNext(yourSlidesArray);

About jQuery (reply to ): jQuery will simplify selectors and fading effects, but it does not change how browsers decode GIF frames. Use jQuery for DOM convenience and visual easing if you prefer, but keep the same preload + onload + setTimeout approach for the timing logic.

If problems persist after these changes, test with plain static PNGs to separate GIF-decoding issues from timing/DOM bugs; if a single GIF frame still “sticks” in IE9 specifically, try re-encoding that GIF (shorten or flatten frames) or use a CSS-based fade between static poster images or a short MP4/webm for smoother cross-browser playback.

Member Avatar for dany12

Not an exeprt in javascript but don't you think it should be written in jquery that has 99% browser compatibility?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.