SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question A graphic odometer with javascript

    Please tell me what I have done wrong in the following code.
    It all works except when I attempt to display images.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var c=0;
    var t;
    var timer_is_on=0;
    function GraphicOdo(Nommer)
        {
        d = Nommer.toString();
        for (i=0; i<d.length; i++)
                {
                var image="<IMG SRC=c"+d[i]+".gif>";
                alert(image+c2.gif);
                document.getElementById('GraphicCounter').innerHtml=image;
                }
        }
    
    function timedCount()
    {
    document.getElementById('txt').value=c;
    c=c+1;
    GraphicOdo(c);
    t=setTimeout("timedCount()",1000);
    }
    
    function doTimer()
    {
    if (!timer_is_on)
      {
      timer_is_on=1;
      timedCount();
      }
    }
    </script>
    </head>
    
    <body>
    <form>
    <input type="button" value="Start count!" onclick="doTimer()">
    <input type="text" id="txt" /><br /><br />
    <div id="GraphicCounter">
    <img src="c0.gif" alt="zero"/>
    </div>
    </form>
    </body>
    </html>
    
    The images are in the same folder as the script and when I use alert to display the generated image URL it looks fine.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var c=0;
    var t;
    var timer_is_on=0;
    function GraphicOdo(Nommer){
        d = Nommer.toString();
        for (i=0; i<d.length; i++){
                var image="<IMG SRC=c"+d.charAt(i)+".gif>";
                alert("<IMG SRC=c"+d.charAt(i)+".gif>");
                document.getElementById('GraphicCounter').innerHtml=image;
                }
        }
    
    function timedCount(){
     document.getElementById('txt').value=c;
     c=c+1;
     GraphicOdo(c);
     t=setTimeout("timedCount()",1000);
    }
    
    function doTimer(){
     if (!timer_is_on){
       timer_is_on=1;
       timedCount();
     }
    }
    </script>
    </head>
    
    <body>
    <form>
    <input type="button" value="Start count!" onclick="doTimer()">
    <input type="text" id="txt" /><br /><br />
    <div id="GraphicCounter">
    <img src="c0.gif" alt="zero"/>
    </div>
    </form>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vic, the current version incorporating your code is at http://www.k9t.za.net/vicodo/index.html which almost does everything I need.
    I have used percentages to position and size various aspects of this hoping that one could also get it to display correctly on smart phones but so far I have failed.....:-(

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tricky

    but if you had an image strip with 11 numbers

    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    0

    it would make this easier

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,837
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It is easier to just update the src of the image directly rather than updating the HTML.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vic, unfortunately the reel is as supplied by the client but be so good as to explain why 11 numbers would be better than 10.
    Stephen, please explain what you mean.

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the numbers will need to be placed with relative positioning, and 11 numbers are needed to achieve a seam less change between 9 and 0.

    I suggest you use the customers image to make one with the eleven numbers.

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC>
    <html manifest="odometer.manifest">
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #p {
      position:relative;left:20%;top:12%;width:69%;height:55%;border:solid red 1px;
    }
    
    .bg {
      position:absolute;left:0px;top:0px;width:100%;
    }
    
    #tst {
      position:relative;overflow:hidden;left:20%;top:20%;width:80%;height:80%;
    }
    
    .digit {
      position:relative;width:80px;height:1500px
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
     <div id="p" >
      <img class="bg" src="http://www.k9t.za.net/vicodo/Metal_BackR.png" />
     <div id="tst" >
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" style="width:10%;"/>
      <img class="commer" src="http://www.k9t.za.net/vicodo/Metal_Comma.png" style="position:relative;top:0px;height:100%;" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
      <img class="commer" src="http://www.k9t.za.net/vicodo/Metal_Comma.png" style="position:relative;width:3%;height:100%;" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
      <img class="commer" src="http://www.k9t.za.net/vicodo/Metal_Decimal.png" style="position:relative;width:3%;height:100%;" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
      <img class="digit" src="http://www.k9t.za.net/vicodo/Metal_ReelNumbers.png" />
    </div>
    </div>
    
    <script type="text/javascript" >
    /*<![CDATA[*/
    // Odometer (16-October-2011)
    // by Vic Phillip http://www.vicsjavascripts.org.uk/
    
    
    function zxcOdometer(o){
     var el=document.getElementById(o.ID),p=el.parentNode,digs=this.bycls(o.DigitClass,el),coms=this.bycls(o.CommerClass,el),ary=[],z0=0,ms=o.SlideDuration;
     this.r=digs[0].height/digs[0].width;
     for (;z0<digs.length;z0++){
      img=digs[z0].cloneNode(true);
      img.style.position='absolute';
      img.style.top='0px';
      el.appendChild(img);
      digs[z0].style.visibility='hidden';
      digs[z0].style.height='20px';
      ary[z0]=new zxcOdometerSlide(img,typeof(ms)=='number'?ms:500);
     }
     this.ary=ary;
     this.el=el;
     this.p=p;
     this.digs=digs;
     this.coms=coms;
     this.dw=o.DigitWidth;
     this.cw=o.CommerWidth;
     this.resize();
     this.nu=1;
     this.addevt(window,'resize','resize');
    }
    
    zxcOdometer.prototype={
    
     resize:function(){
      var el=this.el,p=this.p,digs=this.digs,coms=this.coms,ary=this.ary,z0=0,z1=0,z2=0,sz=el.offsetWidth/this.dw,mve,h=sz*this.r;
      for (;z0<digs.length;z0++){
       digs[z0].style.width=sz+'px';
      }
      for (;z1<coms.length;z1++){
       coms[z1].style.width=el.offsetWidth/this.cw+'px';
      }
      mve=(digs[0].width*this.r)/10;
      for (;z2<ary.length;z2++){
       ary[z2].obj.style.left=digs[ary.length-z2-1].offsetLeft+'px';
       ary[z2].obj.style.width=sz+'px';
       ary[z2].obj.style.height=h+'px';
       ary[z2].obj.style.top=-ary[z2].cnt*mve+'px';
       ary[z2].img.style.left=digs[ary.length-z2-1].offsetLeft+'px';
       ary[z2].img.style.width=sz+'px';
       ary[z2].img.style.height=h+'px';
       ary[z2].img.style.top=-ary[z2].cnt*mve+sz*this.r+'px';
       ary[z2].h=h;
      }
      el.style.height=mve+'px';
      el.style.top=(p.getElementsByTagName('IMG')[0].offsetHeight-mve)/2+'px';
      this.mve=mve;
     },
    
     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++;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     },
    
     bycls:function (nme,el){
      for (var reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName('*'),ary=[],z0=0; z0<els.length;z0++){
       if(reg.test(els[z0].className)){
        ary.push(els[z0]);
       }
      }
      return ary;
     }
    
    }
    function zxcOdometerSlide(obj,ms){
     this.img=obj.cloneNode(true);
     obj.parentNode.appendChild(this.img);
     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.img.style[mde]=now+this.h+'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)
     DigitClass:'digit',   // the common class name of the digit images.                 (string)
     DigitWidth:12,        // the digits width as apercentage of the parent DIV width.   (number)
     CommerClass:'commer', // the common class name of the commer images.                (string)
     CommerWidth:60,       // the commers width as apercentage of the parent DIV width.  (number)
     SlideDuration:200     //(optional) the slide duration in milli seconds.             (number, default = 500)
    });
    
    
    setInterval(function(){ M1.Count(); },600);
    
    /*]]>*/
    
     </script>
    
    </body>
    
    </html>

  10. #10
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Vic, that looks better in my laptop but some fixing needs to be done with the appearance on my cell phone.

  11. #11
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vic, what would be neat would be to be able to translate the display into a number and vice versa. Do you think that that can be done?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •