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 6 of 6
  1. #1
    mbN
    mbN is offline
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Slide-in from side

    Hello guys! :-)
    So, this is my first post so bare with me

    I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made.
    It has to be javascript, and as simple as possible :-)

    I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result.
    So:

    Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed?

    Ty in advance! :-)

  • #2
    mbN
    mbN is offline
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bump bump bump
    Someone???

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,081
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You have bumped your thread after only 42 minutes. That is guaranteed to turn people off who might otherwise have helped you. We are not standing about 24/7 just waiting to answer your questions. In any case we are not here to give you code to use in your exam. You are supposed to write it yourself.

    Please have a look at the forum posting guidelines.

    5) Do not bump your thread repeatedly when you don't get a response. Sometimes when you post for help, you may not get a response in a timely matter, if at all. Forums aren't wishing wells, and some questions will fall through the cracks. That's a fact of life. It's ok to occasionally bump a thread, but only when done after an ample amount of time (ie: 2-3 days) have passed without a response, and never more than once, . Your thread is no more important than another member's when it comes to the amount of attention it should receive.


    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 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:-100px;top:200px;width:120px;height:50px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function SlideIn(id,ud,ms){
     if (!SlideIn[id]){
      SlideIn[id]=new Slide(id,ud,ms)
     }
     SlideIn[id].slide(ud);
    }
    
    function Slide(id,ud,ms){
     this.obj=document.getElementById(id);
     this.ms=ms||1000;
     this.min=this.obj.offsetLeft;
    }
    
    Slide.prototype={
    
     slide:function(ud){
      clearTimeout(this.dly);
      this.animate(this.obj,this.obj.offsetLeft,ud?0:this.min,new Date());
     },
    
     animate:function(obj,f,t,srt){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/oop.ms*ms+f;
      if (isFinite(now)){
       obj.style.left=now+'px';
      }
      if (ms<oop.ms){
       oop.dly=setTimeout(function(){ oop.animate(obj,f,t,srt); },10);
      }
      else {
       obj.style.left=t+'px';
      }
     }
    }
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <div id="tst" onmouseover="SlideIn('tst',true,1000);" onmouseout="SlideIn('tst',false);"></div>
    </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/

  • Users who have thanked vwphillips for this post:

    mbN (01-10-2012)

  • #5
    mbN
    mbN is offline
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    You have bumped your thread after only 42 minutes. That is guaranteed to turn people off who might otherwise have helped you. We are not standing about 24/7 just waiting to answer your questions. In any case we are not here to give you code to use in your exam. You are supposed to write it yourself.

    Please have a look at the forum posting guidelines.

    5) Do not bump your thread repeatedly when you don't get a response. Sometimes when you post for help, you may not get a response in a timely matter, if at all. Forums aren't wishing wells, and some questions will fall through the cracks. That's a fact of life. It's ok to occasionally bump a thread, but only when done after an ample amount of time (ie: 2-3 days) have passed without a response, and never more than once, . Your thread is no more important than another member's when it comes to the amount of attention it should receive.


    It is your responsibility to die() if necessary….. - PHP Manual
    First of all:
    I don't believe i "Bumb repeatedly", i bumped once, because on every other forum I've been, leaving a post unaswered for about 40 min. will leave the post of "new" posts.
    all though i will remember this for my next possible post :-)

    Second of all:
    I'm not asking you to give me any code, but to give me pointers, bits of code, or idea of how this could be done because I'm not interested in going through multiple pages of code, if this could be done in a few lines :-)

    I don't mean to be an idiot by bumping my thread,

  • #6
    mbN
    mbN is offline
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    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:-100px;top:200px;width:120px;height:50px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function SlideIn(id,ud,ms){
     if (!SlideIn[id]){
      SlideIn[id]=new Slide(id,ud,ms)
     }
     SlideIn[id].slide(ud);
    }
    
    function Slide(id,ud,ms){
     this.obj=document.getElementById(id);
     this.ms=ms||1000;
     this.min=this.obj.offsetLeft;
    }
    
    Slide.prototype={
    
     slide:function(ud){
      clearTimeout(this.dly);
      this.animate(this.obj,this.obj.offsetLeft,ud?0:this.min,new Date());
     },
    
     animate:function(obj,f,t,srt){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/oop.ms*ms+f;
      if (isFinite(now)){
       obj.style.left=now+'px';
      }
      if (ms<oop.ms){
       oop.dly=setTimeout(function(){ oop.animate(obj,f,t,srt); },10);
      }
      else {
       obj.style.left=t+'px';
      }
     }
    }
    
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <div id="tst" onmouseover="SlideIn('tst',true,1000);" onmouseout="SlideIn('tst',false);"></div>
    </body>
    
    </html>
    Thank you for this :-)
    I will diffenetly use some of your script - Very helpfull!


  •  

    LinkBacks (?)


    Posting Permissions

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