Conveyor Belt Slideshow Browser Challenges?

**mittel** · 10-26-2010, 11:36 PM

1) Script Title: :: Conveyor Belt slideshow script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm

3) Describe problem: The conveyor belt slideshow seems to load fine in IE 8.0 but it isn't working properly in Firefox or Chrome. It keeps repeating the first two images and doesn't display the images in their entirety. I'm very new at this and I'm sure I have some conflicts here, but if someone would kindly look at

http://www.potomacspeedskating.org/defaultRRam2.htm

and let me know why this might be happening, I'd be extremely grateful.

Thanks very much!

**vwphillips** · 10-27-2010, 11:23 AM

the images take time to load so the script gets the scroll width wrong

you could use css to specify the size of the inames in the marquee

Code:

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div id="scroll" style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}

and

Code:

  #scroll IMG {
    width:300px;height:250px;

  }

or

Code:

<!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>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.marquee {
  position:relative;width:600px;height:250px;border:solid black 1px;
}
.scroll {
  width:9600px;height:400px;
}

.scroll IMG {
 width:300px;height:250px;

}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Simple Marquee (25-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// A simple lightweight Marquee / Carousel to scroll a DIV content within a parent DIV.
// The scroll is continious with no gaps between the scroll content.
// The scroll may be 'Vertical' or 'Horizontal' and there may be as many applications on a page as required.
// The script is light weight with a functioam code size of just 1.45K.

//****** Application Notes

// **** The HTML and CSS Code.
//
// The scroll content must be nested in a DIV element.
// This scroll content DIV may be nested within a parent DIV or if images
// defined in the 'ContentArray' option of the script initialisation.
// This parent DIV must be assigned a unique ID name
// and CSS style position of 'relative' or 'absolute' and width and height
// defined by CSS class rule or inline style.
// The scroll content DIV may have its width and or height specified
// by a CSS class rule or inline style.
// The  parent DIV is assigned a style overflow of 'hidden'
// and the scroll content DIV style a position of 'absolute' by the script.
// e.g.
//  <div id="tst2" class="marquee" onmouseover="M2.Speed=0" onmouseout="M2.Speed=2">
//   <div style="width: 98%;">
//    <h4>Your scroller contents 1</h4>
//    <h4>Your scroller contents 2</h4>
//    <h4>Your scroller contents 3</h4>
//    <h4>Your scroller contents 4</h4>
//    <h4>Your scroller contents 5</h4>
//   </div>
//  </div>
//

// **** Initialising the Script.
//
// The script is initialised by assigning a new instance of the script to a global variable.
// Script options are passed as an object to function 'zxcMarquee' by the initisation call after the page has loaded.
// e.g.
//  var M1=new zxcMarquee({
//   ID:'tst1',       // the unique ID name of the parent DIV.                            (string)
//   Mode:'Vertical', //(optional) the mode of execution, Horizontal' or 'Vertical'.      (string, default = 'Vertical')
//   ContentArray:[         //(optional) an array defining image srcs, hrefs and titles.        (array, default = the scroll div content)
//    field 0 = the file path and name of the image.   (string)
//    field 1 = (optional) the link href of the image. (string)
//    field 1 = (optional) the image title.            (string)
//    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.jpg'],
//    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.jpg'],
//    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.jpg'],
//    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon5.jpg']
//   ],
//   Speed:2,         //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
//   DelayStart:2000  //(optional) the auto start in milli seconds.                       (digits, default = 10)
// });
//

// **** Controlling the Scoll.
//
// The scroll is controlled by changing the scroll speed by inline event calls.
// Changing the speed to 0 will stop the scroll,
// a speed greater than 0 will scroll clockwise,
// a speed less than than 0 will scroll anticlockwise.
// e.g
//  <div id="tst1" class="marqueecontainer" onmouseover="M1.Speed=0" onmouseout="M1.Speed=2">
// where M1 is the global variable which has been assigned the script instance.
//

// ****** Functional Code(1.45K) - NO NEED to Change

function zxcMarquee(o){
 this.mde=typeof(o.Mode)=='string'&&o.Mode.charAt(0)=='H'?'left':'top';
 var p=document.getElementById(o.ID),oop=this,os=this.mde=='top'?'Height':'Width',dly=typeof(o.DelayStart)=='number'?o.DelayStart:10,pos=0,div;
 p.style.overflow='hidden';
 this.divs=[p.getElementsByTagName('DIV')[0]];
 var ary=o.ContentArray||[];
 for (var a,img,z0=0;z0<ary.length;z0++){
  a=document.createElement('A');
  img=document.createElement('IMG');
  img.src=ary[z0][0];
  if (ary[z0][1]){
   a.href=ary[z0][1];
  }
  if (ary[z0][2]){
   img.title=ary[z0][2];
  }
  img.alt=ary[z0][2]||'Image';
  a.appendChild(img);
  this.divs[0].appendChild(a);
 }
 this.divs[0].style.position='absolute';
 this.sz=this.divs[0]['offset'+os];
 this.divs[0].style[this.mde]=-this.sz+'px';
 while (pos<p['offset'+os]+this.sz){
  div=this.divs[0].cloneNode(true);
  p.appendChild(div);
  div.style[this.mde]=(pos)+'px';
  this.divs.push(div);
  pos+=this.sz;
 }
 this.nu=this.divs.length;
 this.Speed=typeof(o.Speed)=='number'?o.Speed:-1;
 setTimeout(function(){ oop.scroll(); },dly);
}

zxcMarquee.prototype.scroll=function(){
 for (var oop=this,pos,z0=0;z0<this.nu;z0++){
  pos=parseInt(this.divs[z0].style[this.mde]);
  if ((this.Speed<0&&pos<-this.sz)||(this.Speed>0&&pos>this.sz*(this.nu-2))){
   pos+=this.sz*this.nu*(this.Speed<0?1:-1);
  }
  this.divs[z0].style[this.mde]=pos+this.Speed+'px';
 }
 setTimeout(function(){ oop.scroll(); },50);
}


/*]]>*/
</script>





</head>

<body>

<div id="tst" class="marquee"  onmouseover="M1.Speed=0" onmouseout="M1.Speed=-2">
<div class="scroll" >
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

M1=new zxcMarquee({
 ID:'tst',              // the unique ID name of the parent DIV.                            (string)
 ContentArray:[         //(optional) an array defining image srcs, hrefs and titles.        (array, default = the scroll div content)
// field 0 = the file path and name of the image.   (string)
// field 1 = (optional) the link href of the image. (string)
// field 1 = (optional) the image title.            (string)
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0014_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0022_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0035_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0087_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0089_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0104_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0108_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0234_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0240_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0279_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0369-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0496-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0497-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0500-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0507-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0514_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0519-1-33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0520-1-33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0521-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0615-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0693-1_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0850_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0856_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0858_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_0930_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_1018_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/DSC_1023_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/VCG099_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/VCG107_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/VCG196_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/VCG205_33.jpg'],
['http://www.potomacspeedskating.org/photos/Mods33Percent/VCG227_33.jpg']
 ],
 Mode:'H',              //(optional) the mode of execution, Horizontal' or 'Vertical'.      (string, default = 'Vertical')
 Speed:-2,               //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
 DelayStart:200        //(optional) the auto start in milli seconds.                       (digits, default = 10)
});

/*]]>*/
</script>

</body>

</html>

**jscheuer1** · 10-27-2010, 02:25 PM

Originally Posted by vwphillips

the images take time to load so the script gets the scroll width wrong

That's not the problem (conveyor doesn't make that calculation until after the window.onload event - after all img tags have loaded), though your solution may or may not still work. The real problem with the original code appears perhaps to be that the conveyor is inside an element which constrains its width. It could be something else though or something else and what I'm putting forth here. I haven't checked exhaustively.

Also, in IE that DOCTYPE (from the original post) forces quirks mode, whereas those other browsers will use standards, or closer to standards than IE, even though it looks like quirks to them too. IE in quirks mode will often grow containers beyond their stated dimensions to fit their contents and/or treat position and overflow differently than other browsers' quirks rendering.

Thread: Conveyor Belt Slideshow Browser Challenges?

Thread Tools

Search Thread

Conveyor Belt Slideshow Browser Challenges?

Bookmarks

Bookmarks

Posting Permissions