Log in

View Full Version : verticle reel scroll


straygrey
09-26-2011, 01:48 PM
I already have HTML/CSS/Javascript scrolling individual numbers/images at http://www.k9t.za.net/odometer/index.html.
I now have a requirement to vertically smoothly a reel of numbers. I have the reel of numbers in an image but how to do it smoothly?
Please see http://www.k9t.za.net/odo/index.html to see what I have achieved so far.
vwphillips
09-28-2011, 12:11 PM
<!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[*/

#tst {
position:relative;overflow:hidden;width:350px;height:100px;
}

#tst IMG {
position:relative;width:100px;height:100px;
}

/*]]>*/
</style></head>

<body>

<div id="tst" >
<img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
<img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
<img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Odometer (28-September-2011)
// by Vic Phillip http://www.vicsjavascripts.org.uk/


function zxcOdometer(o){
var el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.CommonClass+'\\b'),els=el.getElementsByTagName('IMG'),ary=[],z0=0,z1=0,img,srcary=o.ImageArray,z2=0,cnt=[],ms=o.SlideDuration;
for (;z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push(els[z0]);
}
}
this.f=ary[0].height;
cnt=1;
this.cnt=[]
for (;z1<ary.length;z1++){
img=ary[z1].cloneNode(true);
img.style.position='absolute';
img.style.left=ary[z1].offsetLeft+'px';
img.style.top=ary[z1].height+'px';
el.appendChild(img);
ary[z1]=new zxcOdometerSlide(img,ary[z1],typeof(ms)=='number'?ms:500);
this.cnt.push(cnt);
cnt*=10;
}
ary=ary.reverse();
for (;z2<srcary.length;z2++){
img=new Image();
img.src=srcary[z2];
srcary[z2]=img;
}
this.ary=ary;
this.srcary=srcary;
this.nu=1;
}

zxcOdometer.prototype.Count=function(){
var z0=0,ary=this.ary;
for (;z0<ary.length;z0++){
if (this.nu%this.cnt[z0]==0||z0==0){
ary[z0].cnt=++ary[z0].cnt%10;
ary[z0].obj.src=this.srcary[ary[z0].cnt].src;
ary[z0].animate('top',this.f,0,new Date());
}
}
this.nu++;
}


function zxcOdometerSlide(obj,img,ms){
this.obj=obj;
this.img=img;
this.ms=ms;
this.cnt=0;
}

zxcOdometerSlide.prototype.animate=function(mde,f,t,srt){
var oop=this,ms=new Date().getTime()-srt,mS=this.ms,now=(t-f)/mS*ms+f;
if (isFinite(now)){
this.obj.style[mde]=now+'px';
}
if (ms<mS){
this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt); },10);
}
else {
this.img.src=this.obj.src;
}
}



M1=new zxcOdometer({
ID:'tst', // the unique ID name of the parent DIV element. (string)
CommonClass:'digit', // the common class name of the images. (string)
ImageArray:[ // the file path and name of the images. (array)
'http://www.vicsjavascripts.org.uk/StdImages/Zero.gif',
'http://www.vicsjavascripts.org.uk/StdImages/One.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Three.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Five.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Six.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Seven.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Eight.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Nine.gif'
],
SlideDuration:200 //(optional) the slide duration in milli seconds. (number, default = 500)
});

setInterval(function(){ M1.Count(); },600);
/*]]>*/
</script>
</body>

</html>
straygrey
09-28-2011, 02:18 PM
Thank you but unfortunately, as I said, the requirement is to vertically smoothly scroll a reel of numbers.
I already have individual numbers scrolling at http://www.k9t.za.net/odometer/index.html but now look at http://www.k9t.za.net/odo/index.html where I am attempting to scroll a reel of numbers..
vwphillips
10-01-2011, 12:00 PM
my script adds an aninator to each digit which is what I thought you wanted

I can help much more until I am back from holiday at the end of next week
straygrey
10-01-2011, 12:35 PM
Thanks for that but I wanted to animate a reel of numbers not individual numbers.
vwphillips
10-09-2011, 01:17 PM
<!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[*/

#tst {
position:relative;overflow:hidden;top:300px;width:350px;height:100px;
}

#tst IMG {
position:relative;width:100px;height:100px;
}

/*]]>*/
</style></head>

<body>
<div id="tst" >
<img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
<img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
<img class="digit" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" alt="0" />
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Odometer (09-October-2011)
// by Vic Phillip http://www.vicsjavascripts.org.uk/


function zxcOdometer(o){
var el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.CommonClass+'\\b'),els=el.getElementsByTagName('IMG'),ary=[],z0=0,z1=0,img,srcary=o.ImageArray,z2=0,ms=o.SlideDuration;
for (;z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push([els[z0],els[z0].offsetLeft]);
}
}
this.f=ary[0][0].height;
for (;z1<ary.length;z1++){
img=ary[z1][0].cloneNode(true);
img.style.position='absolute';
img.style.left=ary[z1][1]+'px';
img.style.top=ary[z1][0].height+'px';
el.appendChild(img);
ary[z1][0].style.position='absolute';
ary[z1][0].style.left=ary[z1][1]+'px';
ary[z1][0].style.top='0px';
ary[z1]=new zxcOdometerSlide(img,ary[z1][0],typeof(ms)=='number'?ms:500);
}
ary=ary.reverse();
for (;z2<srcary.length;z2++){
img=new Image();
img.src=srcary[z2];
srcary[z2]=img;
}
this.ary=ary;
this.srcary=srcary;
this.nu=1;
}

zxcOdometer.prototype.Count=function(){
var z0=0,ary=this.ary,cnt=1;
for (;z0<ary.length;z0++){
if (this.nu%cnt==0||z0==0){
ary[z0].img.src=this.srcary[ary[z0].cnt].src;
ary[z0].cnt=++ary[z0].cnt%10;
ary[z0].obj.src=this.srcary[ary[z0].cnt].src;
ary[z0].animate('top',this.f,0,new Date());
}
cnt*=10;
}
this.nu++;
}


function zxcOdometerSlide(obj,img,ms){
this.obj=obj;
this.img=img;
this.ms=ms;
this.cnt=0;
}

zxcOdometerSlide.prototype.animate=function(mde,f,t,srt){
var oop=this,ms=new Date().getTime()-srt,mS=this.ms,now=(t-f)/mS*ms+f;
if (isFinite(now)){
this.obj.style[mde]=now+'px';
this.img.style[mde]=now-f+'px';
}
if (ms<mS){
this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt); },10);
}
}



M1=new zxcOdometer({
ID:'tst', // the unique ID name of the parent DIV element. (string)
CommonClass:'digit', // the common class name of the images. (string)
ImageArray:[ // the file path and name of the images. (array)
'http://www.vicsjavascripts.org.uk/StdImages/Zero.gif',
'http://www.vicsjavascripts.org.uk/StdImages/One.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Two.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Three.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Four.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Five.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Six.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Seven.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Eight.gif',
'http://www.vicsjavascripts.org.uk/StdImages/Nine.gif'
],
SlideDuration:200 //(optional) the slide duration in milli seconds. (number, default = 500)
});


setInterval(function(){ M1.Count(); },600);

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

</html>
straygrey
10-09-2011, 03:28 PM
Again thank you but I still see individual images rather than reel of numbers.
vwphillips
10-10-2011, 08:13 AM
I do not understand what you mean by a 'reel'
straygrey
10-10-2011, 08:36 AM
Please see the attached/inserted for the reel I am speaking of.http://www.k9t.za.net/odometer/Metal_ReelNumbers.png
I have also email it to you.
vwphillips
10-10-2011, 11:48 AM
<!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[*/
#tst {
position:relative;left:300px;top:300px;width:350px;height:100px;border:solid red 1px;
}

#tst IMG {
position:relative;width:80px;height:1000px;
}


/*]]>*/
</style></head>

<body>

<div id="tst" >
<img class="digit" src="http://www.k9t.za.net/odometer/Metal_ReelNumbers.png" />
<img class="digit" src="http://www.k9t.za.net/odometer/Metal_ReelNumbers.png" />
<img class="digit" src="http://www.k9t.za.net/odometer/Metal_ReelNumbers.png" />
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Odometer (09-October-2011)
// by Vic Phillip http://www.vicsjavascripts.org.uk/


function zxcOdometer(o){
var el=document.getElementById(o.ID),reg=new RegExp('\\b'+o.CommonClass+'\\b'),els=el.getElementsByTagName('IMG'),ary=[],z0=0,z1=0,obj,ms=o.SlideDuration;
for (;z0<els.length;z0++){
if(reg.test(els[z0].className)){
ary.push([els[z0],els[z0].offsetLeft]);
}
}
this.mve=ary[0][0].height/10;
for (;z1<ary.length;z1++){
obj=document.createElement('DIV');
img=ary[z1][0].cloneNode(true);
obj.style.position='absolute';
obj.style.left=ary[z1][1]+'px';
obj.style.top='0px';
obj.style.width='0px';
el.appendChild(obj);
obj.appendChild(ary[z1][0]);
obj.appendChild(ary[z1][0].cloneNode(true));
ary[z1]=new zxcOdometerSlide(obj,typeof(ms)=='number'?ms:500);
}
ary=ary.reverse();
this.ary=ary;
this.nu=1;
}

zxcOdometer.prototype.Count=function(){
var z0=0,ary=this.ary,cnt=1;
for (;z0<ary.length;z0++){
if (this.nu%cnt==0||z0==0){
ary[z0].cnt++;
if (ary[z0].cnt==11){
ary[z0].cnt=1;
ary[z0].now=0;
}
clearTimeout(ary[z0].dly);
ary[z0].animate('top',ary[z0].now,-this.mve*ary[z0].cnt,new Date());
}
cnt*=10;
}
this.nu++;
}


function zxcOdometerSlide(obj,ms){
this.obj=obj;
this.ms=ms;
this.now=0;
this.cnt=0;
}

zxcOdometerSlide.prototype.animate=function(mde,f,t,srt){
var oop=this,ms=new Date().getTime()-srt,mS=this.ms,now=(t-f)/mS*ms+f;
if (isFinite(now)){
this.obj.style[mde]=now+'px';
this.now=now;
}
if (ms<mS){
this.dly=setTimeout(function(){ oop.animate(mde,f,t,srt); },10);
}
else {
this.now=t;
}
}



M1=new zxcOdometer({
ID:'tst', // the unique ID name of the parent DIV element. (string)
CommonClass:'digit', // the common class name of the images. (string)
SlideDuration:200 //(optional) the slide duration in milli seconds. (number, default = 500)
});


setInterval(function(){ M1.Count(); },600);

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

</html>
vwphillips
10-16-2011, 04:38 PM
http://www.sitepoint.com/forums/showthread.php?784418-A-graphic-odometer-with-javascript&p=4974243#post4974243