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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slide in from left

    Hello,

    I wanna make my links slide in from the left, as shown in the demo here:

    http://www.templatemonster.com/demo/38913.html

    I'd like them to slide in from the left in a semi-transparent frame exactly as shown in the demo. Any help is greatly appreciated. Thanks.

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Sunnyvale, CA
    Posts
    115
    Thanks
    8
    Thanked 7 Times in 7 Posts
    Looks like you want a pull-down menu.

    Another example of such a menu is here: http://www.javascriptworld.com/js4e/.../script01.html

    ...and its script may be found here: http://www.javascriptworld.com/js4e/...ript13.01.html

    The site's author has more great stuff here: http://www.javascriptworld.com/js4e/scripts/index.html

    I recommend his book as a great JavaScript primer.

    Well, that should get you started...

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by sbhmf View Post
    Looks like you want a pull-down menu.

    Another example of such a menu is here: http://www.javascriptworld.com/js4e/.../script01.html

    ...and its script may be found here: http://www.javascriptworld.com/js4e/...ript13.01.html

    The site's author has more great stuff here: http://www.javascriptworld.com/js4e/scripts/index.html

    I recommend his book as a great JavaScript primer.

    Well, that should get you started...
    That site is about 10 years out of date - I wouldn't use it. It refers to the 4th edition of the book, but there is now an eight edition.
    Last edited by AndrewGSW; 01-12-2013 at 11:31 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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/

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @vwphillips
    Could you briefly describe the following code please? I assume it's using the time-interval in order to smooth out the animation.

    Code:
    animate:function(o,f,t,srt,mS,ud){
      clearTimeout(o.dly);
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       o.now=Math.max(now,f<0||t<0?now:0);
       o.obj.style[o.mde]=o.now+'px';
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,ud); },10);
      }
      else {
       o.now=t;
       o.obj.style[o.mde]=t+'px';
       if (ud){
        o.obj.style.visibility=o.msk.style.visibility='hidden';
       }
      }
     },
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    // parameter 0 = an object
    // parameter 1 = start value
    // parameter 2 = finsh value
    // parameter 3 = a Date Object
    // parameter 4 = the animate duration in milli seconds
    // parameter 5 = a flag
    
    animate:function(o,f,t,srt,mS,ud){
      clearTimeout(o.dly);
                 //new Date()- the srt Date = ms = the time the function has been cycling
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;  // now = (start value - finish value)/the animate duration * new Date object + the finish value
      if (isFinite(now)){          // if now is a good number
       o.now=Math.max(now,f<0||t<0?now:0);  // make sure that now cannot be < 0 foe with and height etc ie can only be <0 if either the start value or finish value is less than 0
       o.obj.style[o.mde]=o.now+'px';       // if o.mode was 'width'  o.obj.style.width=o.now+'px';
      }
      if (ms<mS){         // cycle until the ms is geater than mS
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,ud); },10);
      }
      else {
       o.now=t;  // the object now is set to the finish value as now may not be tottally accuate
       o.obj.style[o.mde]=t+'px'; // object.obj style is now accurate
       if (ud){    // if the flag is true do whatever
        o.obj.style.visibility=o.msk.style.visibility='hidden';
       }
      }
     },
    Last edited by vwphillips; 01-12-2013 at 07:36 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/

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @Vic Thank you. Andy.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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