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
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help With Javascript Slide In Script

    Hey I wanted to know if anyone would be able to devise a Javascript NOT JQuery that would look something like I will describe below...:

    I'm currently trying to make a script that will slide an object onto the page (no fading, simply setting the position to its desired left/right style, such as left:60px)

    The initial position of the object will be off the page completely i.e. Left:-700px, I then need the script to set the position of the object directly before the page starts (left:0px) so i'd so something like this:
    Code:
    var Position = document.getElementById(eid).style.left;
    var Width = document.getElementById(eid).style.width; 
    Position * 0 - Width
    After it has done this, I would need it to actually slide in the object (function animateSlideIn) Which will obtain the
    Code:
    var TimeToSlide = 200.0
    to determine how long this animation will take, it will use that as well as the current position and the desired position to animate a slide in effect
    The 'desired position' will be obtained from the HTML script

    The HTML will look something like this:
    Code:
    <div id="bob">Lorem ipsum...</div>
    <a href="#" onclick="javascript:SlideIn('bob','60');">Click</a>

  • #2
    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[*/
    
    #tst {
      position:absolute;left:-200px;top:100px;width:200px;height:100px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Slide(id,mde,to,ms){
     var mde=mde=='top'?'top':'left',o=Slide[id+mde],ms=typeof(ms)=='number'&&ms>0?ms:1000,obj=document.getElementById(id);
     if (!o&&obj){
      o=Slide[id+mde]=[obj,mde,mde=='top'?'offsetTop':'offsetLeft'];
     }
     if (o&&typeof(to)=='number'){
      animate(o,obj[o[2]],to,new Date(),ms);
     }
    }
    
     function animate(a,f,t,srt,mS){
      clearTimeout(a[3]);
      var ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[3]=setTimeout(function(){ animate(a,f,t,srt,mS); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
      }
     }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="Silde to 0" onmouseup="Slide('tst','left',0,1000);Slide('tst','top',200,1000);" />
    <input type="button" name="" value="Silde to -200" onmouseup="Slide('tst','left',-200,500);Slide('tst','top',100,1000);" />
    <div id="tst" ></div>
    </body>
    
    </html>
    Last edited by vwphillips; 06-19-2013 at 09:36 AM.
    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/

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    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[*/
    
    #tst {
      position:absolute;left:-200px;top:100px;width:200px;height:100px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Slide(id,mde,to,ms){
     var mde=mde=='top'?'top':'left',o=Slide[id+mde],ms=typeof(ms)=='number'&&ms>0?ms:1000,obj=document.getElementById(id);
     if (!o&&obj){
      o=Slide[id+mde]=[obj,mde,mde=='top'?'offsetTop':'offsetLeft'];
     }
     if (o&&typeof(to)=='number'){
      animate(o,obj[o[2]],to,new Date(),ms);
     }
    }
    
     function animate(a,f,t,srt,mS){
      clearTimeout(a[3]);
      var ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[3]=setTimeout(function(){ animate(a,f,t,srt,mS); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
      }
     }
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
    <input type="button" name="" value="Silde to 0" onmouseup="Slide('tst','left',0,1000);Slide('tst','top',200,1000);" />
    <input type="button" name="" value="Silde to -200" onmouseup="Slide('tst','left',-200,500);Slide('tst','top',100,1000);" />
    <div id="tst" ></div>
    </body>
    
    </html>
    Wow! Thank you very much! =]


  •  

    Tags for this Thread

    Posting Permissions

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