Image Marquee Truncates

[ms_sws]

I have built a marquee of images that scrolls inside a cell of a table. The marquee width, of course, is dictated by the width of the cell. But I don't want the number of images that actually scroll inside the marquee to cut off based on the width of the marquee. In other words, if 5 images fit across the width of the cell, then the marquee scrolls 5 images. If there are 6 or more images, those images get cut off and the marquee loops back to the beginning of the list of images.

Is there a way to prevent this? I simply want all the images to scroll until it gets to the end of the list then start over (the way it works with plain text).

I've tried playing with the behavior parameter and setting overflow to visible but so far nothing has worked.

[fxm]

Please provide code or a link.

[ms_sws]

The is the same file (gallery.html) as discussed in the load files to array post. I dynamically build a marquee then document.write it:

  gMarqueePics="<br><br><marquee direction='left' behavior='scroll' scrollamount='1' loop='0' style='overflow:visible'>";
  // gctr holds on to the number of files in gFiles since it is used throughout the page
  for (i=0; i<=gctr; i++) {
     gMarqueePics=gMarqueePics+"<img src='gallery/"+gFiles[i]+"' width='100' height='100'>";
  }
  gMarqueePics=gMarqueePics+"</marquee>"; 

  document.write(gMarqueePics);

I also parse the file name which contains data about the image (i.e. name, identifier, DOB, etc.) and similarly dynamically build a text marquee then document.write it. The code is the same except that I added the behavior and style parameters to the image marquee in an attempt to solve the truncation problem. The text marquee does not truncate. Both are written one after the other inside a table.

There are 6 images currently and 5 fit across the width of the table. Actually a few pixels of the 6th image also fits and you can see when the marquee scrolls, those few pixels display before the marquee starts scrolling from the first image.

There must be a way of defining the marquee to scroll all images then start over. Isn't there?

[fxm]

Without the table I can only guess what is happening.

[ms_sws]

Well, the html file used a freebie template off the web so the formatting of the tags inside it was rather messy to look at. On top of this, there were tables inside tables and extraneous rows/columns. In the interest of being able to read the code with some consistent indenting and removing the tds and trs that had content between them but are not helpful relative to this problem, I've extracted the table(s) that impace the marquee in question. I left in some javascript that I deleted in the above example (just to put focus on the script in question). So the code in question is:

<table width="730" height="601" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_02">
    <tr>
        <td colspan="14" valign="top" bgcolor="#FFFFFF">
           <table width="95%" border="0" align="center" cellpadding="4" cellspacing="0">
             <tr>
             <td><span class="style3"><span class="style4">Gallery</span><br><br>

                 Here's a sampling of the little ones we have in our care that are or will be available for adoption.<br><br>
                 <center>
                 <div id="gmissing" style="display:none">
                   <img src="gallery/Alternate_Photo.gif" alt="Alternate Photo Placeholder" height="350" width="350"><br><br>
                   <font size=1>No Featured Pet Selected This Month</font></center><br clear="left">
                 </div>
                 <div id="gfeatured" style="display:none">
                   <table style="background-image:url('images/star-anim.gif')" width=510>
                     <tr><td><br><center><font color="#FFFF00">FEATURED PET OF THE MONTH</font></center><br><br>
                        <script>
                          loadFP();
                          document.write(gFPpic);
                          document.write(gFPstats);
                        </script>
                     </td></tr>
                   </table>
                 </div>
                 <center>
                 <script>
                   if (gpic>=0) {
                      // build marquee for images and stats
                      gMarqueePics="<br><br><marquee direction='left' behavior='scroll' scrollamount='1' loop='0' style='overflow:visible'>";
                      gMarqueeStats="<br><br><font color='0000FF' size=1><marquee direction='left' scrollamount='1' loop='0'>";
                      for (i=0; i<=gctr; i++) {
                         gMarqueePics=gMarqueePics+"<img src='gallery/"+gFiles[i]+"' width='100' height='100'>";
                         parseFile(gFiles[i]);
                         gMarqueeStats=gMarqueeStats+"<b>Name:</b>&nbsp;"+FPname+" (SRG"+FPid+")&nbsp;"+FPsex+"&nbsp;"+FPdesc+"&nbsp;<b>DOB:</b>&nbsp;"+FPdob+"&nbsp;<b>Status:</b>&nbsp;"+FPstatus+" ** ";
                      }
                      gMarqueePics=gMarqueePics+"</marquee>"; 
                      gMarqueeStats=gMarqueeStats+"</marquee></font><br><br>";

                      document.write(gMarqueePics);
                      document.write(gMarqueeStats);
                      // build img tags
                      for (i=0; i<=gctr; i++) {
                         d1=gFiles[i].indexOf("-");
                         d2=gFiles[i].indexOf("-",d1+1);
                         iname=gFiles[i].substring(d1+1,d2);
                         istring="<img id='i"+gFiles[i].substring(3,8)+"' src='gallery/"+gFiles[i]+"' alt='"+iname+" ("+gFiles[i].substring(0,8)+")' style='display:none' width='350' height='350'>";
                         document.write(istring);
                      }
                      document.write("<br><br>");
                      // build div tags for stats
                      for (i=0; i<=gctr; i++) {
                         istring="<div id='d"+gFiles[i].substring(3,8)+"' align='center' style='display:none' >";
                         parseFile(gFiles[i]);
                         if (FPsex == "M") FPsex="Male";
                         else {
                         if (FPsex == "F") FPsex="Female";
                         else FPsex="Both";
                         }
                         FPprofile="<object data='input/SRG"+FPid+".txt' type='text/html' width='500' height='50'>";
                         FPprofile=FPprofile+"No Profile Available.</object>";
                         istring=istring+"<font color='0000FF' size=1><b>Name:</b>&nbsp;&nbsp;"+FPname+" (SRG "+FPid+")&nbsp;"+FPsex+"&nbsp;"+FPdesc+"&nbsp;&nbsp;<b>Est. DOB:</b>&nbsp;&nbsp;"+FPdob+"&nbsp;&nbsp;<b>Status:</b>&nbsp;&nbsp;"+FPstatus+"</font><br><br>";
                         istring=istring+"<font size=1>"+FPprofile+"</font></div>";
                         document.write(istring);
                      }
                      // display first image
                      gpic=-1;
                      displayImage(0);
                      gpic=0;
                      document.write("<br><br>");
                      istring="<input type='image' src='images/prev.gif' alt='Previous' onClick='changeImage(0);' />";
                      document.write(istring);
                      istring="<input type='image' src='images/next.gif' alt='Next' onClick='changeImage(1);' />";
                      document.write(istring);
                   }
                 </script>
                 </center>
                 <br><br>
                </span>
             </td>
             </tr>
           </table>
      </td>
   </tr>
</table>

[fxm]

When you post code, please use the [ CODE ] button.
I suspect that you are trying to run the marquee in an element that has margins.

By taking 'extraneous' stuff out of the table you may well have changed the margins or even the content around the problem area by enough that I can't see what you're seeing.

I may get a chance to look at this in the next day or two, but if the page doeasn't run when I load it I'm not going to bother trying to repair is.

[fxm]

gpic is not defined
gctr is not defined
gFiles is not defined
parseFile is not defined

That's where I stopped.

[ms_sws]

Okay. I've had my hands full with a bunch of things. What I've noticed about the marquee problem is that I get 3 different behaviors across IE, Chrome and Firefox.

As I said, the width of the table (nested inside other tables) can accommodate 5 pictures at a time. So in IE, the marquee scrolls 5 pictures (and a bit of the 6th) then starts back at the first picture). Firefox works properly and scrolls all pictures then starts at the beginning. Chrome doesn't scroll at all. I get all pictures looking like static img tags running 5 across and centered (the marquee is centered) so with 6 pictures I get one row of 5 centered then a second row with the last one centered.