Need help to move a button location on a JS created Marquee

If you look at this page: http://easydigging.com/Garden_Tool/home1.html
You will see an image Marquee that scrolls automatically, pauses on mouseover, and has Begin/Stop buttons to allow those using phones to control the Marquee.

We need to move the Begin/Stop button from above the Marquee to below the Marquee. That’s where I need your help.

I really don’t know JS, but I am great at cutting and pasting if you tell me what old lines to replace with what new lines :smiley:

I left the JS file in the Head of the page so you can see it easily. I will paste it in below also. Thanks!

<script type=“text/javascript”>
var mqAry1=[‘…/images-new/wheel-hoe-icon.jpg’,‘…/images-new/seeder-icon.jpg’,‘…/images-new/broadforks-icon.jpg’,‘…/images-new/grub-hoe-icon.jpg’,‘…/images-new/grape-hoe-icon.jpg’,‘…/images-new/garden-hoes-icon.jpg’,‘…/images-new/hand-hoes-icon.jpg’,‘…/images-new/catalog-icon.jpg’];

function start()
{ new mq(‘m1’,mqAry1,300);
mqRotate(mqr); // must come last
}

window.onload = start;

// Continuous Image Marquee with stop/start button
// copyright 24th July 2008, 20th March 2010 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration

function mqRotate(mqr)
{if (!mqr) return; for (var j=mqr.length - 1; j > -1; j–)
{maxa = mqr[j].ary.length;
for (var i=0;i<maxa;i++)
{var x = mqr[j].ary[i].style;
x.left=(parseInt(x.left,10)-1)+‘px’;
}
var y = mqr[j].ary[0].style;
if (parseInt(y.left,10)+parseInt(y.width,10)<0)
{var z = mqr[j].ary.shift();
z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + ‘px’; mqr[j].ary.push(z);
}
} mqr[0].TO=setTimeout(‘mqRotate(mqr)’,10);
}

function startstopchange(m,txt)
{for (var j=m.length - 1; j > -1; j–) document.getElementById(‘ss’+m[j].id).value = txt;
}
function startstop(m,n) {
var ss = document.createElement(‘form’);
var sd = document.createElement(‘div’);
ss.appendChild(sd);
var sb = document.createElement(‘input’);
sb.type=‘button’;
sd.appendChild(sb);
sb.id = ‘ss’+n.id;sb.value = ‘Stop Scrolling’;
sb.onclick = function()
{if (this.value == ‘Stop Scrolling’)
{clearTimeout(m[0].TO); startstopchange(m,‘Begin Scrolling’);
}
else {mqRotate(m); startstopchange(m,‘Stop Scrolling’);
}
};
n.parentNode.insertBefore(ss,n);
}

var mqr = ;
function mq(id,ary,wid)
{this.mqo=document.getElementById(id);
var heit = this.mqo.style.height;
this.mqo.onmouseout=function()
{mqRotate(mqr);startstopchange(mqr,‘Stop Scrolling’);
};
this.mqo.onmouseover=function()
{clearTimeout(mqr[0].TO);startstopchange(mqr,‘Begin Scrolling’);
};
this.mqo.ary=;
var maxw = ary.length;
for (var i=0;i<maxw;i++)
{this.mqo.ary[i]=document.createElement(‘img’);
this.mqo.ary[i].src=ary[i]; this.mqo.ary[i].style.position = ‘absolute’;
this.mqo.ary[i].style.left = (wid*i)+‘px’;
this.mqo.ary[i].style.width = wid+‘px’;
this.mqo.ary[i].style.height = heit;
this.mqo.appendChild(this.mqo.ary[i]);
}
mqr.push(this.mqo);
startstop(mqr,this.mqo);
}
</script>

var mqAry1=['http://easydigging.com/Garden_Tool/../images-new/wheel-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/seeder-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/broadforks-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/grub-hoe-icon.jpg','../images-new/grape-hoe-icon.jpg','../images-new/garden-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/hand-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/catalog-icon.jpg'];

function start()
  { new mq('m1',mqAry1,300,305); [COLOR="#FF0000"]// additional parameter for the top position of the button[/COLOR]
    mqRotate(mqr); // must come last
   }

window.onload = start;

// Continuous Image Marquee with stop/start button
// copyright 24th July 2008, 20th March 2010 by Stephen Chapman
// http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that all of the code below in this script (including these
// comments) is used without any alteration

function mqRotate(mqr)
{if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--)
{maxa = mqr[j].ary.length;
for (var i=0;i<maxa;i++)
{var x = mqr[j].ary[i].style;
x.left=(parseInt(x.left,10)-1)+'px';
}
var y = mqr[j].ary[0].style;
if (parseInt(y.left,10)+parseInt(y.width,10)<0)
{var z = mqr[j].ary.shift();
z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; mqr[j].ary.push(z);
}
} mqr[0].TO=setTimeout('mqRotate(mqr)',10);
}

function startstopchange(m,txt)
{for (var j=m.length - 1; j > -1; j--) document.getElementById('ss'+m[j].id).value = txt;
}

function startstop(m,n[COLOR="#FF0000"],h[/COLOR]) {
 var ss = document.createElement('form');
 var sd = document.createElement('div');
 ss.appendChild(sd);
 var sb = document.createElement('input');
 sb.type='button';
 sb.id = 'ss'+n.id;sb.value = 'Stop Scrolling';
[COLOR="#FF0000"] n.parentNode.appendChild(sb);
 sb.style.position='relative';
 sb.style.top=h+'px';
[/COLOR] sb.onclick = function(){
  if (this.value == 'Stop Scrolling'){
   clearTimeout(m[0].TO);
   startstopchange(m,'Begin Scrolling');
  }
  else {
   mqRotate(m); startstopchange(m,'Stop Scrolling');
  }
 };
 n.parentNode.insertBefore(ss,n);
}

var mqr = [];

function mq(id,ary,wid[COLOR="#FF0000"],h[/COLOR])
{this.mqo=document.getElementById(id);
var heit = this.mqo.style.height;
this.mqo.onmouseout=function()
{mqRotate(mqr);startstopchange(mqr,'Stop Scrolling');
};
this.mqo.onmouseover=function()
{clearTimeout(mqr[0].TO);startstopchange(mqr,'Begin Scrolling');
};
this.mqo.ary=[];
var maxw = ary.length;
for (var i=0;i<maxw;i++)
{this.mqo.ary[i]=document.createElement('img');
this.mqo.ary[i].src=ary[i]; this.mqo.ary[i].style.position = 'absolute';
this.mqo.ary[i].style.left = (wid*i)+'px';
this.mqo.ary[i].style.width = wid+'px';
this.mqo.ary[i].style.height = heit;
this.mqo.appendChild(this.mqo.ary[i]);
}
mqr.push(this.mqo);
startstop(mqr,this.mqo[COLOR="#FF0000"],h[/COLOR]);
}

Thank you so much Vic! :slight_smile:

I did change the “305” in this section:

function start()
{ new mq(‘m1’,mqAry1,300,305); // additional parameter for the top position of the button
mqRotate(mqr); // must come last
}

to “-13” because the 305 put the way to far below the marquee. The -13 centers it on the bottom line of the marquee and looks real nice.
You can see the new layout here: http://easydigging.com/Garden_Tool/home2.html

I looked around your http://www.vicsjavascripts.org.uk/ website. There is some cool stuff there :cool: It’s going to take me awhile to check out all you have created…

Couple other questions I hope you can help with:

  1. where in the code can I adjust the speed?

  2. the documentation for this scrolling marquee says that all the images must be the same width. This is a bit limiting. I can easily make all the heights the same, but it would really be great to allow a mix of thin, medium, and wide images. How should be changed to allow more variety in image width?

Thanks again! :smiley:

problem is that the images are in an array and take time to load

try this

<!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;height:300px;text-Align:left;
}

.marquee IMG {
  height:300px;
}

.marquee2 {
  position:relative;height:200px;text-Align:left;
}

.marquee2 IMG {

}

.marquee3 {
  position:relative;width:200px;height:400px;text-Align:left;
}

.marquee3 IMG {
  width:200px;height:200px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
var mqAry1=['http://easydigging.com/Garden_Tool/../images-new/wheel-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/seeder-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/broadforks-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/grub-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/grape-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/garden-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/hand-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/catalog-icon.jpg'];
var mqAry2=['http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif'];

function zxcMarquee(id,ud,ary,mde,b){
 var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud:-1;
 if (!o&&obj&&ary){
  var oop,b=document.getElementById(b),mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),imgs=[],z0=0;
  obj.style.overflow='hidden';
  slide.style.position='absolute';
  slide.style.left='0px';
  slide.style.top='0px';
  slide.style[mde[3]]='3000px';
  obj.appendChild(slide);
  ary=ary.concat();
  for (var z0=0;z0<ary.length;z0++){
   imgs[z0]=new Image();
   imgs[z0].src=ary[z0];
  }
  oop={
   mde:mde,
   id:id,
   obj:obj,
   slide:slide,
   lft:0,
   ud:ud,
   b:b,
   lstud:ud
  }
  zxcLoad(oop,imgs)
 }
 if (o){
  clearTimeout(o.to);
  o.lstud=ud;
  o.lft+=ud;
  if ((ud<0&&o.lft<-o.sz)||(ud>0&&o.lft>0)){
   o.lft+=o.sz*(ud<0?1:-1);
  }
  if (ud!=0){
   o.ud=ud;
  }
  if (o.b){
   o.b.value=ud==0?'Start Scroll':'Stop Scroll';
  }
  o.slide.style[o.mde]=o.lft+'px';
  o.to=setTimeout(function(){ zxcMarquee(id,ud); },50);
 }
}

function zxcLoad(o,ary){
 var img=document.createElement('IMG'),sz,nu,clone,z0=0,z1=0,z2=1;
 for (var z0=0;z0<ary.length;z0++){
  if (ary[z0].width<40){
   o.to=setTimeout(function(){ zxcLoad(o,ary); },50);
   return;
  }
 }
 for (;z1<ary.length;z1++){
  img=document.createElement('IMG');
  img.src=ary[z1].src;
  o.slide.appendChild(img);
  ary[z1]=img
 }
  sz=ary[z1-1][o.mde[1]]+ary[z1-1][o.mde[2]];
  o.slide.style[o.mde[3]]=sz+5+'px';
  clone=o.slide.cloneNode(true);
  nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
  for (;z2<nu;z2++){
   clone=clone.cloneNode(true);
   clone.style[o.mde[0]]=sz*z2+'px';
   o.slide.appendChild(clone);
  }
  o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
  o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
  if (o.b){
   o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
  }
  o.mde=o.mde[0];
  o.sz=sz;
  zxcMarquee['zxc'+o.id]=o;
  zxcMarquee(o.id,o.ud);
}

function start(){
 // parameter 0 = the unique ID name of the parent DIV.                                    (string)
 // parameter 1 = (optional) the speed and direction of the scroll.                        (number, default = -1 = anti clockwise)
 // parameter 2 = (optional) the mode of execution, 'H' = horizontal, 'V' = vertical.      (string, default = 'H' = horizontal)
 // parameter 3 = (optional) the unique ID name of the INPUT button to control the scroll. (string, default = in line event calls)
 zxcMarquee('m1',-1,mqAry1,'H','b1');
 zxcMarquee('m2',4,mqAry2,'H','b2');
 zxcMarquee('m3',1,mqAry1,'V','b3');
 // for inline event calls call: zxcMarquee('m1',-1);
}

window.onload = start;

/*]]>*/
</script></head>

<body>
 <div >
  <div id="m1" class="marquee" ></div>
  <input id="b1" type="button" name="" value="Stop Scroll" />
 </div>

 <div >
  <div id="m2" class="marquee2" ></div>
  <input id="b2" type="button" name="" value="Stop Scroll" />
 </div>

 <div >
  <div id="m3" class="marquee3" ></div>
  <input id="b3" type="button" name="" value="Stop Scroll" />
 </div>


</body>

</html>

Hi Vic,

I used the new code you sent, and it does work for images of varying width.

But it only shows the first 5 images, even though I have loaded 23 images…

Here is the test page: http://easydigging.com/Garden_Tool/marquee2.html

The pictures below the marquee are the 1st and the 23rd in the string.

It’s so close, please help. Maybe it times out or the physical width is set too short?

Thanks!

Also I noticed that if it can not retrieve any one of the image files it shuts down completely (doesn’t show anything but the button). Is there any way to allow it to ignore a file it can’t quickly retrieve? (this not nearly important as the problem above…)

I missed your reply, hence the delay

I never imagined you would use so many images but easily cured(see line in red) I have added another 0

function zxcMarquee(id,ud,ary,mde,b){
 var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud:-1;
 if (!o&&obj&&ary){
  var oop,b=document.getElementById(b),mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),imgs=[],z0=0;
  obj.style.overflow='hidden';
  slide.style.position='absolute';
  slide.style.left='0px';
  slide.style.top='0px';
 [COLOR="#FF0000"] slide.style[mde[3]]='30000px';[/COLOR]
  obj.appendChild(slide);
  ary=ary.concat();
  for (var z0=0;z0<ary.length;z0++){
   imgs[z0]=new Image();
   imgs[z0].src=ary[z0];
  }
  oop={
   mde:mde,
   id:id,
   obj:obj,
   slide:slide,
   lft:0,
   ud:ud,
   b:b,
   lstud:ud
  }
  zxcLoad(oop,imgs)
 }
 if (o){
  clearTimeout(o.to);
  o.lstud=ud;
  o.lft+=ud;
  if ((ud<0&&o.lft<-o.sz)||(ud>0&&o.lft>0)){
   o.lft+=o.sz*(ud<0?1:-1);
  }
  if (ud!=0){
   o.ud=ud;
  }
  if (o.b){
   o.b.value=ud==0?'Begin Scroll':'Stop Scroll';
  }
  o.slide.style[o.mde]=o.lft+'px';
  o.to=setTimeout(function(){ zxcMarquee(id,ud); },50);
 }
}

have you considered clicking the images to stop the scroll instead of a button,

function zxcLoad(o,ary){
 var img=document.createElement('IMG'),sz,nu,clone,z0=0,z1=0,z2=1;
 for (var z0=0;z0<ary.length;z0++){
  if (ary[z0].width<40){
   o.to=setTimeout(function(){ zxcLoad(o,ary); },50);
   return;
  }
 }
 for (;z1<ary.length;z1++){
  img=document.createElement('IMG');
  img.src=ary[z1].src;
  o.slide.appendChild(img);
  ary[z1]=img
 }
  sz=ary[z1-1][o.mde[1]]+ary[z1-1][o.mde[2]];
  o.slide.style[o.mde[3]]=sz+5+'px';
  clone=o.slide.cloneNode(true);
  nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
  for (;z2<nu;z2++){
   clone=clone.cloneNode(true);
   clone.style[o.mde[0]]=sz*z2+'px';
   o.slide.appendChild(clone);
  }
  o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
  o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
[COLOR="#FF0000"]  o.obj.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
[/COLOR]  if (o.b){
   o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
  }
  o.mde=o.mde[0];
  o.sz=sz;
  zxcMarquee['zxc'+o.id]=o;
  zxcMarquee(o.id,o.ud);
}

Thank you again Vic. You have been a world of help :slight_smile:

I tried changing 3000 to 30000 as you suggested. That didn’t work. But changing it to 7600 did.

Also the absolute positioning was putting the marquee in the wrong place on the page. So I changed this:

slide.style.position=‘absolute’;
slide.style.left=‘0px’;
slide.style.top=‘0px’;

to just this:

slide.style.position=‘relative’;

You can see how it all works on the page here: http://easydigging.com/Garden_Tool/home2.html

There is only one problem remaining:
The last image in the marquee wants to clear the whole screen before starting up again with the first. Since this is a responsive webpage, that doesn’t take long on an iPhone, but it seems to take forever on a large desktop display. Is there any way to get the first image to follow right behind the last?

Here is what the last image looks like: http://easydigging.com/images-new/23-u-bar.jpg

Maybe it was something related to changing from absolute to relative? If you (or anybody) can tell me how to fix this last glitch, I would sure appreciate it :cool:

problem was that the slider DIV was inheriting text-align:center

the slide.style.position must be ‘absolute’

function zxcMarquee(id,ud,ary,mde,b){
 var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud:-1;
 if (!o&&obj&&ary){
  var oop,b=document.getElementById(b),mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),imgs=[],z0=0;
  obj.style.overflow='hidden';
  [COLOR="#FF0000"]slide.style.position='absolute';[/COLOR]
  slide.style.left='0px';
  slide.style.top='0px';
  slide.style[mde[3]]='30000px';
 [COLOR="#FF0000"] slide.style.textAlign='left';[/COLOR]
  obj.appendChild(slide);
  ary=ary.concat();
  for (var z0=0;z0<ary.length;z0++){
   imgs[z0]=new Image();
   imgs[z0].src=ary[z0];
  }
  oop={
   mde:mde,
   id:id,
   obj:obj,
   slide:slide,
   lft:0,
   ud:ud,
   b:b,
   lstud:ud
  }
  zxcLoad(oop,imgs)
 }
 if (o){
  clearTimeout(o.to);
  o.lstud=ud;
  o.lft+=ud;
  if ((ud<0&&o.lft<-o.sz)||(ud>0&&o.lft>0)){
   o.lft+=o.sz*(ud<0?1:-1);
  }
  if (ud!=0){
   o.ud=ud;
  }
  if (o.b){
   o.b.value=ud==0?'Begin Scroll':'Stop Scroll';
  }
  o.slide.style[o.mde]=o.lft+'px';
  o.to=setTimeout(function(){ zxcMarquee(id,ud); },50);
 }
}

function zxcLoad(o,ary){
 var img=document.createElement('IMG'),sz,nu,clone,z0=0,z1=0,z2=1;
 for (var z0=0;z0<ary.length;z0++){
  if (ary[z0].width<40){
   o.to=setTimeout(function(){ zxcLoad(o,ary); },[COLOR="#FF0000"]250[/COLOR]);
   return;
  }
 }
 for (;z1<ary.length;z1++){
  img=document.createElement('IMG');
  img.src=ary[z1].src;
  o.slide.appendChild(img);
  ary[z1]=img
 }
  sz=ary[z1-1][o.mde[1]]+ary[z1-1][o.mde[2]];
  o.slide.style[o.mde[3]]=sz+5+'px';
  clone=o.slide.cloneNode(true);
  clone.style.border='solid red 1px';
  nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
  for (;z2<nu;z2++){
   clone=clone.cloneNode(true);
   clone.style[o.mde[0]]=sz*z2+'px';
   o.slide.appendChild(clone);
  }
  o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
  o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
  if (o.b){
   o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
  }
  o.mde=o.mde[0];
  o.sz=sz;
  zxcMarquee['zxc'+o.id]=o;
  zxcMarquee(o.id,o.ud);
}


Yea!!! :slight_smile: That fixed it! Here is the repaired marquee: http://easydigging.com/Garden_Tool/home2.html

I also took a few pictures out. Didn’t need to decrease the marquee width at all.

Last Question:
I like the current speed, but it is a little jittery. All the files in the marquee are about 65 KB. Would it be smoother and less jittery if all the file sizes were about half that size?

Thanks again for all you help Vic. If you’re curious why I wanted a marquee so much (they aren’t used much anymore), here’s what I think the advantages are for this site:

  1. It is a responsive site (built on Twitter Bootstrap), so it transforms to fit the whole variety - and a big wide static image just wouldn’t work on a phone.
  2. We sell a variety of tools, and don’t have a big broad image that shows them all.
  3. Even on a phone, you can see all the images at a reasonable size (I will probably set the CSS to transform the marquee to only 200px tall for phones)
  4. These were the only pictures we had that included humans - and evidently people want to see people using something before they buy it :rolleyes:
  5. The Stop/Start button is there for those using small devices that do not include the “mouseover” feature. And if anybody is annoyed by the scroll, it makes it obvious how to stop it.

Vic and all,

Any thoughts on this question?

Last Question:
I like the current speed, but it is a little jittery. All the files in the marquee are about 65 KB. Would it be smoother and less jittery if all the file sizes were about half that size?

I have added more options including a XBrowser scroll speed

<!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">

.marquee1 {
  position:relative;height:300px;width:500px;border:solid red 1px;text-Align:left;
}

.marquee1 IMG {
  height:300px;
}

.marquee2 {
  position:relative;height:200px;text-Align:left;
}

.marquee2 IMG {

}

.marquee3 {
  position:relative;width:200px;height:400px;text-Align:left;
}

.marquee3 IMG {
  width:200px;height:200px;
}


</style>
<script type="text/javascript">

var mqAry1=['http://www.easydigging.com/images-new/1-garden.jpg','http://www.easydigging.com/images-new/2-tool.jpg','http://www.easydigging.com/images-new/3-hoss.jpg','http://www.easydigging.com/images-new/4-u-bar.jpg','http://www.easydigging.com/images-new/5-seeder.jpg','http://www.easydigging.com/images-new/6-tool.jpg','http://www.easydigging.com/images-new/7-u-bar.jpg','http://www.easydigging.com/images-new/8-tool.jpg','http://www.easydigging.com/images-new/9-hoss.jpg','http://www.easydigging.com/images-new/10-garden.jpg','http://www.easydigging.com/images-new/11-pick.jpg','http://www.easydigging.com/images-new/12-hoss.jpg','http://www.easydigging.com/images-new/13-tool.jpg','http://www.easydigging.com/images-new/14-u-bar.jpg','http://www.easydigging.com/images-new/15-tool.jpg','http://www.easydigging.com/images-new/16-seeder.jpg','http://www.easydigging.com/images-new/17-tool.jpg','http://www.easydigging.com/images-new/18-hoss.jpg','http://www.easydigging.com/images-new/19-tool.jpg','http://www.easydigging.com/images-new/20-u-bar.jpg','http://www.easydigging.com/images-new/21-tool.jpg','http://www.easydigging.com/images-new/22-hoss.jpg','http://www.easydigging.com/images-new/23-u-bar.jpg'];

var mqAry2=[
['http://www.vicsjavascripts.org.uk/StdImages/One.gif','Image 1','http://www.vicsjavascripts.org.uk/StdImages/One.gif','Image 1'],
['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Image 2'],
['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Image 3']
];

function zxcMarquee(id,ud,options){
 var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud>0?1:ud<0?-1:0:0;
 if (!o&&typeof(options)=='object'){
  var oop=options,b=document.getElementById(oop.StopStartID),ary=oop.ImageArray,ld=oop.LoadDuration,mde=oop.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),img,z0=0;
  if (typeof(ary)=='object'&&ary.constructor==Array){
   obj.style.overflow='hidden';
   slide.style.position='absolute';
   slide.style.left='0px';
   slide.style.top='0px';
   slide.style[mde[3]]='30000px';
   slide.style.textAlign='left';
   obj.appendChild(slide);
   ary=ary.concat();
   for (var z0=0;z0<ary.length;z0++){
    img=new Image();
    img.src=ary[z0][0];
    ary[z0][0]=img;
   }
   oop={
    mde:mde,
    id:id,
    obj:obj,
    slide:slide,
    ms:oop.SlideDuration,
    ld:typeof(ld)=='number'&&ld>1?ld*1000:5000,
    now:0,
    ud:ud,
    b:b,
    lstud:ud
   }
   zxcLoad(oop,ary,new Date());
  }
 }
 if (o){
  clearTimeout(o.dly);
  o.lstud=ud;
  if (ud!=0){
   o.ud=ud;
  }
  if (o.b){
   o.b[o.b.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=ud==0?'Begin Scroll':'Stop Scroll';
  }
  if (ud!=0){
   zxcScroll(o,o.now,o.sz*ud,new Date(),o.ms*Math.abs((o.now-o.sz*ud)/o.sz)+10,ud);
  }
 }
}

function zxcScroll(o,f,t,srt,mS,ud){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.now=now;
   o.slide.style[o.mde]=now+'px';
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ zxcScroll(o,f,t,srt,mS,ud); },10);
  }
  else {
   o.now=0;
   o.slide.style[o.mde]=t+'px';
   zxcMarquee(o.id,ud);
  }
 }

function zxcLoad(o,ary,d){
 var img=document.createElement('IMG'),sz=0,nu,clone,a,z0=0,z1=0,z2=1;
 for (var z0=0;z0<ary.length;z0++){
  if (ary[z0][0].width<40&&new Date()-d<o.ld){
   o.to=setTimeout(function(){ zxcLoad(o,ary,d); },250);
   return;
  }
 }
 for (;z1<ary.length;z1++){
  if (ary[z1][0].width>40){
   a=document.createElement('A');
   o.slide.appendChild(a);
   img=document.createElement('IMG');
   img.src=ary[z1][0].src;
   img.style.borderWidth='0px';
   a.appendChild(img);
   if (ary[z1][1]){
    img.title=ary[z1][1];
   }
   if (ary[z1][2]){
    a.href=ary[z1][2];
   }
   ary[z1]=img
   sz+=img[o.mde[3]];
  }
 }
 if (sz>0){
  o.slide.style[o.mde[3]]=sz+5+'px';
  clone=o.slide.cloneNode(true);
  clone.style.border='solid red 1px';
  nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
  for (;z2<nu;z2++){
   clone=clone.cloneNode(true);
   clone.style[o.mde[0]]=sz*z2+'px';
   o.slide.appendChild(clone);
  }
  o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
  o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
  if (o.b){
   o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
  }
  o.mde=o.mde[0];
  o.sz=sz;
  o.ms=typeof(o.ms)=='number'&&o.ms>100?o.ms:sz*10;
  zxcMarquee['zxc'+o.id]=o;
  zxcMarquee(o.id,o.ud);
 }
}

function start(){
 // parameter 0 = the unique ID name of the parent DIV.                          (string)
 // parameter 1 = (optional) the direction of the scroll.                        (number, default = 0, <0 = anti clockwise, >0 = clockwise, 0 = pause)
 // parameter 2 =  an object defining the script instance options as an object.  (object)
                   //   ImageArray:mqAry2,  // an array of arrays defining the image srcs, titles and links.           (array)
                                             // field 0 = the image src.                  (string)
                                             // field 1 = (optional) the image title.     (string)
                                             // field 2 = (optional) the image link href. (string)
                   //   Mode:'H',           //(optional) the mode of execution, 'H' = horizontal, 'V' = vertical.      (string, default = 'H' = horizontal)
                   //   SlideDuration:5000, //(optional) the time to scroll the images in milliseconds.                (number, default = the width of the images*10)
                   //   LoadDuration:5,     //(optional) the time allowed to load the images in seconds.               (number, default = 5)
                   //   StopStartID:'b1'    //(optional) the unique ID name of the element to control the scroll.      (string, default = in line event calls)
 zxcMarquee('m1',-1,{ImageArray:mqAry2,Mode:'H',SlideDuration:5000,LoadDuration:5,StopStartID:'b1'});
 // for inline event calls call: zxcMarquee('m1',-1);
}

window.onload = start;


</script>
</head>

<body>
 <div style=text-align:center; >
  <div id="m1" class="marquee1" ></div>
  <input id="b1" type="button" name="" value="Stop Scroll" />
  <div onmouseup="zxcMarquee('m1',0);" >Stop Scroll</div>
  Use any element type for the button
 </div>

</body>

</html>

Sorry Vic, but I can’t get it to work with my images :frowning:

I tried altering the few settings I learned from you over the last few days, but still nothing displays for marquee1
(marquee2 did work)

Since I can barely understand the one linked in my recent posts above, it may be best for me to stick with that…

Any thoughts on if the working one will run noticeably smoother with 30 KB files instead of the current 60 KB files?

reducing the file size will aid the browser rendering the images