Translucent Scroller - how to stop the loop

**weiala** · 08-04-2013, 09:54 AM

Hi, I want to use this great code but I have a questions that I didn't find answers to on other posts.

Is it possible to stop the scroller with the last scrollercontent and how would I code that in?

I would greatly appreciate the help

**vwphillips** · 08-04-2013, 01:40 PM

http://www.dynamicdrive.com/dynamici...centscroll.htm

is a very old script

updated version

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>
</head>

<body>
<input type="button" value="Auto"  onmouseup="zxcFadeSlider.Auto('tst');" />
<input type="button" value="Pause"  onmouseup="zxcFadeSlider.Pause('tst');" />
<input type="button" value="GoTo 0"  onmouseup="zxcFadeSlider.GoTo('tst',0);" />
<input type="button" value="GoTo 1"  onmouseup="zxcFadeSlider.GoTo('tst',1);" />
<input type="button" value="GoTo 2"  onmouseup="zxcFadeSlider.GoTo('tst',2);" />
<input type="button" value="Next"  onmouseup="zxcFadeSlider.Next('tst',1);" />
<input type="button" value="Back"  onmouseup="zxcFadeSlider.Next('tst',-1);" />
<input id="ip" />
<br />
<br />
<div id="tst" style="position:relative;width:150px;height:115px;overflow:hidden;" >
 <div style="background-Color:#CCFF99;padding:5px;"></div>
</div>

<br />
<br />
<div id="tst1" style="position:relative;width:150px;height:115px;overflow:hidden;" onmouseover="zxcFadeSlider.Pause('tst1');" onmouseout="zxcFadeSlider.Auto('tst1');">
 <div style="background-Color:#CCFF99;padding:5px;"></div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Fade Slider (04-August-2013)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


var zxcFadeSlider={

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.c+ud);
  }
 },

 GoTo:function(id,c){
  var o=this['zxc'+id];
  if (o){
   this.Pause(id);
   if (o.ary[c]&&c!=o.c){
    o.ud=c>o.c?1:-1;
    this.rotate(o,c);
   }
  }
 },

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
  }
 },

 Pause:function(id,ms){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;

  }
 },

 init:function(o){
  var id=o.ScrollerID,ary=o.ContentArray,m=o.Mode,ms=o.ScrollDuration,ud=o.Direction,hold=o.AutoHold,srt=o.AutoStart,m=typeof(m)=='string'&&m.charAt(0)=='H'?['left','top','offsetWidth']:['top','left','offsetHeight'],p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,ms=typeof(ms)=='number'&&ms>20?ms:1000;
  if (s&&ary instanceof Array){
   p.style.overflow='hidden';
   this['zxc'+id]=o;
   o.m=m;
   o.id=id;
   o.ary=ary;
   o.sz=p[m[2]];
   s.style.position='absolute';
   s.style.zIndex='0';
   s.style[m[1]]='0px';
   s.style[m[0]]=o.sz+'px';
   s.style.width='100%';
   s.style.height=p.offsetHeight+'px';
   o.s=s;
   o.a=[s.cloneNode(false),m[0]];
   o.f=[o.a[0]];
   p.appendChild(o.a[0]);
   o.a[0].style.zIndex='2';
   o.ms=ms;
   o.ud=typeof(ud)=='number'&&ud<0?-1:1;
   o.c=o.ud==1?-1:ary.length;
   o.hold=typeof(hold)=='number'&&hold>20?hold:ms*4;
   typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
  }
 },

 rotate:function(o,a){
  o.auto=a===true;
  o.c=o.auto?o.c+o.ud:a;
  o.c=o.ary[o.c]?o.c:o.ud>0?0:o.ary.length-1;
  this.opc(o.s,20);
  o.a[0].innerHTML=o.ary[o.c];
  this.animate(o,o.f,0,100,new Date(),o.ms);
  this.animate(o,o.a,o.sz*o.ud,0,new Date(),o.ms);
  typeof(o.OnSlide)=='function'?o.OnSlide(o.c):null;
 },

 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   n=Math.max(f<0||t<0?n:0,n);
   a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   a[1]?a[0].style[a[1]]=o.sz+'px':oop.opc(a[0],n);
   if (a[1]){
    this.opc(o.s,100);
    o.s.style[o.m[0]]='0px';
    o.s.innerHTML=o.a[0].innerHTML;
    clearTimeout(o.to);
    o.auto?oop.Auto(o.id,o.hold):null;
   }
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 }

}

zxcFadeSlider.init({
 ScrollerID:'tst',    // the unique ID name of the parent DIV.                        (string)
 ContentArray:[       // an arrat defining the inner HTML of each slide.              (array)
  'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
  'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
  'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
 ],
 Mode:'Vertical',     //(optional) the mode of execution., 'Vertical' or 'Horizontal' (string, default = 'Vertical')
 Direction:1,         //(optional) 1 = auto rotate forward, -1 = auto rotate back.    (number, default = 1 = forward)
 ScrollDuration:1000, //(optional) the slide duration in mill seconds.                (number, default = 1000)
 AutoHold:3000,       //(optional) the auto rotate hold duration in mill seconds.     (number, default = ScrollDuration*4)
 AutoStart:3000,      //(optional) the auto rotate start delay in mill seconds.       (number, default = no auto start)
 OnSlide:function(n){ //(optional) the function to call when the the scroller slides. (function, default = no function)
  // n = the slide number
  document.getElementById('ip').value='Slide = '+n;
 }
});

zxcFadeSlider.init({
 ScrollerID:'tst1',
 ContentArray:[
  'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
  'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
  'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
 ],
 Mode:'Horizontal',
 AutoStart:0
});

/*]]>*/
</script>
</body>

</html>

**weiala** · 08-04-2013, 02:27 PM

That is fantastic! Works better than before especially in FF! The thing is, I want it to just stop on its own, not with a toggle. Is there a way to do that?
By the way, thanks for answering on a Sunday. I live in Germany and most people don't do anything here on a Sunday!

**vwphillips** · 08-05-2013, 09:17 AM

the script control function are demonstrated by the buttons
Pause will stop auto rotation

the OnSlide function can be used to stop on a specific slide.

with enhanced animation

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>
</head>

<body>
<input type="button" value="Auto"  onmouseup="zxcFadeSlider.Auto('tst');" />
<input type="button" value="Pause"  onmouseup="zxcFadeSlider.Pause('tst');" />
<input type="button" value="GoTo 0"  onmouseup="zxcFadeSlider.GoTo('tst',0);" />
<input type="button" value="GoTo 1"  onmouseup="zxcFadeSlider.GoTo('tst',1);" />
<input type="button" value="GoTo 2"  onmouseup="zxcFadeSlider.GoTo('tst',2);" />
<input type="button" value="Next"  onmouseup="zxcFadeSlider.Next('tst',1);" />
<input type="button" value="Back"  onmouseup="zxcFadeSlider.Next('tst',-1);" />
<input id="ip" />
<br />
<br />
<div id="tst" style="position:relative;width:150px;height:115px;overflow:hidden;" >
 <div style="background-Color:#CCFF99;padding:5px;"></div>
</div>

<br />
<br />
<div id="tst1" style="position:relative;width:150px;height:115px;overflow:hidden;" onmouseover="zxcFadeSlider.Pause('tst1');" onmouseout="zxcFadeSlider.Auto('tst1');">
 <div style="background-Color:#CCFF99;padding:5px;"></div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Fade Slider (04-August-2013)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


var zxcFadeSlider={

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   o.ud=ud;
   this.rotate(o,o.c+ud);
  }
 },

 GoTo:function(id,c){
  var o=this['zxc'+id];
  if (o){
   this.Pause(id);
   if (o.ary[c]&&c!=o.c){
    o.ud=c>o.c?1:-1;
    this.rotate(o,c);
   }
  }
 },

 Auto:function(id,ms){
  var oop=this,o=oop['zxc'+id];
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
  }
 },

 Pause:function(id,ms){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;

  }
 },

 init:function(o){
  var id=o.ScrollerID,ary=o.ContentArray,m=o.Mode,ms=o.ScrollDuration,ud=o.Direction,hold=o.AutoHold,srt=o.AutoStart,m=typeof(m)=='string'&&m.charAt(0)=='H'?['left','top','offsetWidth']:['top','left','offsetHeight'],p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,ms=typeof(ms)=='number'&&ms>20?ms:1000;
  if (s&&ary instanceof Array){
   p.style.overflow='hidden';
   this['zxc'+id]=o;
   o.m=m;
   o.id=id;
   o.ary=ary;
   o.sz=p[m[2]];
   s.style.position='absolute';
   s.style.zIndex='0';
   s.style[m[1]]='0px';
   s.style[m[0]]=o.sz+'px';
   s.style.width='100%';
   s.style.height=p.offsetHeight+'px';
   o.s=s;
   o.a=[s.cloneNode(false),m[0]];
   o.f=[o.a[0]];
   p.appendChild(o.a[0]);
   o.a[0].style.zIndex='2';
   o.ms=ms;
   o.ud=typeof(ud)=='number'&&ud<0?-1:1;
   o.c=o.ud==1?-1:ary.length;
   o.hold=typeof(hold)=='number'&&hold>20?hold:ms*4;
   typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
  }
 },

 rotate:function(o,a){
  o.auto=a===true;
  o.c=o.auto?o.c+o.ud:a;
  o.c=o.ary[o.c]?o.c:o.ud>0?0:o.ary.length-1;
  this.opc(o.s,20);
  o.a[0].innerHTML=o.ary[o.c];
  this.animate(o,o.f,0,100,new Date(),o.ms);
  this.animate(o,o.a,o.sz*o.ud,0,new Date(),o.ms,Math.PI/(2*o.ms));
  typeof(o.OnSlide)=='function'?o.OnSlide(o.c):null;
 },


  animate:function(o,a,f,t,srt,mS,i){
   clearTimeout(a[4]);
   var oop=this,ms=new Date()-srt,n=i?(t-f)*Math.sin(i*ms)+f:(t-f)/mS*ms+f;
  if (isFinite(n)){
   n=Math.max(f<0||t<0?n:0,n);
   a[1]?a[0].style[a[1]]=n+'px':oop.opc(a[0],n);
  }
  if (ms<mS){
    a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,i); },10);
  }
  else {
   a[1]?a[0].style[a[1]]=o.sz+'px':oop.opc(a[0],n);
   if (a[1]){
    this.opc(o.s,100);
    o.s.style[o.m[0]]='0px';
    o.s.innerHTML=o.a[0].innerHTML;
    clearTimeout(o.to);
    o.auto?oop.Auto(o.id,o.hold):null;
   }
  }
 },

 opc:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 }

}

zxcFadeSlider.init({
 ScrollerID:'tst',    // the unique ID name of the parent DIV.                        (string)
 ContentArray:[       // an arrat defining the inner HTML of each slide.              (array)
  'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
  'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
  'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'
 ],
 Mode:'Vertical',     //(optional) the mode of execution., 'Vertical' or 'Horizontal' (string, default = 'Vertical')
 Direction:1,         //(optional) 1 = auto rotate forward, -1 = auto rotate back.    (number, default = 1 = forward)
 ScrollDuration:1000, //(optional) the slide duration in mill seconds.                (number, default = 1000)
 AutoHold:3000,       //(optional) the auto rotate hold duration in mill seconds.     (number, default = ScrollDuration*4)
 AutoStart:3000,      //(optional) the auto rotate start delay in mill seconds.       (number, default = no auto start)
 OnSlide:function(n){ //(optional) the function to call when the the scroller slides. (function, default = no function)
  // n = the slide number
//  document.getElementById('ip').value='Slide = '+n;
 }
});

zxcFadeSlider.init({
 ScrollerID:'tst1',
 ContentArray:[
  'Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!',
  'Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.',
  'Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.',
  '1',
  '2',
  'The End',
 ],
 Mode:'Horizontal',
 AutoStart:0,
 OnSlide:function(n){
  if (n==5){
    zxcFadeSlider.Pause('tst1');
  }
 }
});

/*]]>*/
</script>
</body>

</html>

**weiala** · 08-05-2013, 10:47 AM

I don't know what I am doing wrong but it doesn't stop. I really like the effect of 'tst' and would hate to have to change to something less good but it has to stop. If you could give me another hint that would be great.

Later:
I GOT IT! As you may have guessed, it was my problem! Everything works great! It is actually a neat effect. I have an animated gif as the background that looks like water and your scroller brings up the text like it is coming out of the water. And now it stops!!! Fantastic! Thanks for your patience!

**vwphillips** · 08-05-2013, 03:52 PM

If you are using using DIVs with a transparent background the current DIV will be overlayed over the previous DIV

this may be better
[URL="http://www.vicsjavascripts.org.uk/FadeSlider/FadeSlider.htm[/URL]