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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts

    Trying to complete a test site with some JS

    Hello,

    I am trying to complete a test site but adding some javascript.

    In short I am trying to make the main content div slide from behind the nav via some JS. http://www.squareflash.com/test/index.html


    First I am just trying to get the animate onClick to work. I found this practice site -- Using this I am trying to get some guidance on how to add a automatic stop function to the moveRight variable.
    http://www.tutorialspoint.com/cgi-bi...=javascript_45

    The site is in html5, is there anything special I need to know for that?

    ty

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>                            <html>
    <head>
    <title>JavaScript Animation</title>
    <script type="text/javascript">
    <!--
    
    function moveRight(id,stop){
     var obj=document.getElementById(id),lft= parseInt(obj.style.left) + 10;
     if (lft<stop){
      obj.style.left =lft + 'px';
      moveRight.to = setTimeout(function(){ moveRight(id,stop); },20); // call moveRight in 20msec
     }
     else {
      obj.style.left =stop + 'px';
     }
    }
    
    function stop(id){
       clearTimeout(moveRight.to);
       document.getElementById(id).style.left = '0px';
    }
    
    //-->
    </script>
    
    </head>
    <body>
    <form>
    <img id="myImage" src="http://www.tutorialspoint.com/images/html.gif" style="position:relative;left:0px;" />
    <p>Click the buttons below to handle animation</p>
    <input type="button" value="Start" onclick="moveRight('myImage',500);" />
    <input type="button" value="Stop" onclick="stop('myImage');" />
    </form>
    </body>
    </html>
    or

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    <head>
    <title>JavaScript Animation</title>
    <script type="text/javascript">
    <!--
    
    function moveRight(id,stop){
     var obj=document.getElementById(id),lft= parseInt(obj.style.left);
     lft += 10*(stop>lft?1:-1);
     clearTimeout(moveRight.to);
     if ((stop>lft&&lft<stop)||(stop<lft&&lft>stop)){
      obj.style.left =lft + 'px';
      moveRight.to = setTimeout(function(){ moveRight(id,stop); },20); // call moveRight in 20msec
     }
     else {
      obj.style.left =stop + 'px';
     }
    }
    
    function stop(id){
       clearTimeout(moveRight.to);
       document.getElementById(id).style.left = '0px';
    }
    
    //-->
    </script>
    
    </head>
    <body>
    <form>
    <img id="myImage" src="http://www.tutorialspoint.com/images/html.gif" style="position:relative;left:0px;" />
    <p>Click the buttons below to handle animation</p>
    <input type="button" value="Start" onclick="moveRight('myImage',500);" />
    <input type="button" value="Back" onclick="moveRight('myImage',0);" />
    <input type="button" value="Stop" onclick="stop('myImage');" />
    </form>
    </body>
    </html>
    Last edited by vwphillips; 12-24-2011 at 02:13 PM.
    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/

  • Users who have thanked vwphillips for this post:

    SeattleMicah (12-24-2011)

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Thank you sir, i will try and decipher that and get it to work.


  •  

    Posting Permissions

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