PDA

View Full Version : 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/dynamicindex2/translucentscroll.htm

is a very old script

updated version


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

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

weiala
08-08-2013, 09:01 AM
You are right, that works better. It doesn't stop completely but enough. Thanks again!