Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Some help with little 'app' please

    How do i make this app in javascript???

    https://www.dropbox.com/s/1kxtawbudg...screencast.mp4

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    By writing code!

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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>
    <style type="text/css">
    /*<![CDATA[*/
    .block {
     position:absolute;left:100px;top:50px;width:100px;height:220px;border:solid red 1px;
    }
    
    .item {
     position:relative;left:5px;width:85px;height:20px;border:solid red 1px;margin-Top:5px;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
     <input type="button" name="" value="Start" onmouseup="S.start();" />
     <input type="button" name="" value="Stop" onmouseup="S.stop();" />
     <div id="b1" class="block" >
      <div class="item" >1 tom</div>
      <div class="item" >2 tom</div>
      <div class="item" >3 tom</div>
      <div class="item" >4 tom</div>
      <div class="item" >5 tom</div>
      <div class="item" >6 tom</div>
      <div class="item" >7 tom</div>
      <div class="item" >8 tom</div>
     </div>
     <div id="b2" class="block" style="left:250px;" >
     </div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function SwapBlock(o){
     var b1=document.getElementById(o.BlockID1),b2=document.getElementById(o.BlockID2),ms=o.Speed;
     this.b1=b1;
     this.b2=b2;
     this.ms=typeof(ms)=='number'&&ms>50?ms:2000;
     this.ud=true;
    }
    
    SwapBlock.prototype={
    
     start:function(){
      this.b1&&this.b2?this.move():null;
     },
    
     stop:function(){
      clearTimeout(this.to);
     },
    
     move:function(){
      var o=this,ds=(o.ud?o.b1:o.b2).getElementsByTagName('DIV');
      o.stop();
      if (ds[0]){
       (o.ud?o.b2:o.b1).appendChild(ds[o.ud?ds.length-1:0]);
       o.to=setTimeout(function(){ o.move(); },ds[0]?o.ms:20);
      }
      else {
       o.ud=!o.ud;
      }
     }
    
    }
    
    var S=new SwapBlock({
     BlockID1:'b1',
     BlockID2:'b2',
     Speed:2000
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Great job. I'm sure they have learned a lot now.


  •  

    Posting Permissions

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