• Please take a moment and tell us about your project, or give us a call at (888) 873-3281.
  • Write a short description of your business and services required

Up and Down slider using JQuery

To tell you the truth, I wish I could remember where I originally found this example because I would like to give credit where credit is due, but I really dont remember. Anyhow, this person’s example was a cool slider effect that stuck to the top of the page. Well I decided to take that and turn into into the same basic concept; only this time coded in JQuery. Oh Yes. I love JQuery.

The examle is pretty straight forward. So if you have any comments or concerns, definitley drop me a comment and I will try my best to answer them.

Here are the screen shots:

Slider in the "Off" Position
Slider in the "Off" Position
Slider in the "On" Position
Slider in the "On" Position

I kept the same colors and such from the other example so if anyone knows where the original was from, please let me know.

Click Here to see this example in action.

Want to download the code? Of course you do, click here.

Originally seen @ (Antonio Lupetti’s moo-tools example)

Profile-Ronald-Busky

Ronald Busky  Ron's ability to express our client's message in a way that drives results is remarkable. We are firm believers in ROI, and it starts with the first paragraph! Ron's robust style and diverse portfolio has allowed him to write for clients ranging from car dealers to luxury hotels.

25 Comments

  1. Jeremy Latham

    Reply

    Te example “bounces” when it opens in FF 3.0.5 w/ Vista64. Is that intentional?

  2. Vin Thomas

    Reply

    I think you saw it originally on woork.

  3. Adeline

    Reply

    Hi Rich,

    I’ve seen this done at: Web Designer Wall (jQuery tutorials for designers).

    It doesn’t use any additional jquery plugin (that’s if you don’t want the bounce animation at the end of your slide).

    Adeline

  4. d13t

    Reply

    In Safari and FF on my Mac, the panel slides down and the jerks back a few pixels to it’s end position. Not so smooth.

  5. shin

    Reply

    Download link is broken.

  6. Paul Davis

    Reply

    Looks good! But the download link doesn’t work. :(

  7. inerd

    Reply

    download link not working

  8. Neil

    Reply

    Hi Rich
    I think it might have been on Woork
    http://woork.blogspot.com/2008/03/sliding-top-panel-using-mootools_05.html

    Thanks for porting it to jquery. There are a few cool effects in mootools without exact jquery versions so you increase people’s choice every time you do something like this.

  9. badger

    Reply

    I just happen to be looking for something along these lines. But when the page loads, I would like it to be in the closed state. Then click and it opens. I am some what new to JQuery, have any suggestions?

  10. Rich

    Reply

    Sorry about that. Download link should work now.

  11. Bennor McCarthy

    Reply

    The bouncing is a common issue with the jquery sliding functions. I believe it has something to do with a dodgy height calculation when there are margins and padding in the CSS, and you can work around it by setting a fixed height for the element you are sliding.

  12. Rich

    Reply

    @Neil, Thanks! that was exactly where I had seen it. I feel better now knowing that he can get his proper credit (Antonio Lupetti’s moo-tools example)

    @Bennor, I think you are right. most developers; I believe, get around it by using jquery easing plugin, but moo-tools seems to have a better grasp at this. (but i will stay with jQuery).

    @badger, sure! add display:none; to the #top-panel{} css and change the Show in the sub-panel div to Hide. Hope that helps.

    @Adeline, he used moo-tools and he calls the moo-tools JS in his example. same way I call the jQuery.js. I dont use any other plugins in this example, but the call to jQuery.

  13. Shahriar Hyder

    Reply

    Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

  14. BeBeN

    Reply

    great great…so dynamic

  15. Peter

    Reply

    is there an option of having the default hidden? where you click on show and the rest drops down?

  16. Chad

    Reply

    how do you do it in reverse?

    as shown on this site?

    http://www.imglobal.com/index.aspx

  17. Rich

    Reply

    Hey Chad, You can actually take a look at another post I wrote. That might help you since its “kind of” what you are looking for.

    Rotated Background with Slide Up menu using jQuery and CSS

    What you are looking for is really the slide up menu part of it.

    Hope that helps.

  18. Amanda

    Reply

    Really nice… that’s why i love jQuery.

  19. Nelke

    Reply

    What about Cookie to keep it closed if already closed one time?

  20. PS Web-design

    Reply

    How do you get the slider to slide down over the page content? I am using in in a sample template and it always pushes the content down.

  21. Claudio (aglioeolio)

    Reply

    To set defaul state to closed add:
    display:none;

    to css ID:
    #top-panel

    and invert the script text/imgs states

  22. Leo Nasti

    Reply

    Incredible page! I most certainly will possibly be viewing back again with regard to additional news.

  23. marticps

    Reply

    To have the initial state hidden, I use $(“#top-panel”).hide();

    Any solution to the bounce?

  24. marticps

    Reply

    Fixed: If you wanna mantain auto height, you have to define a width (like 242px or 100%)

  25. gg

    Reply

    links not working

Leave a Comment

Your email address will never be published or shared. Required fields are marked with an asterisk (*).