Top Panel With jQuery

Build An Incredible Login Form With jQuery

Aug 19th in JavaScript & AJAX by Connor Zwick

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we'll also animate it.

PG

Author: Connor Zwick

Hi, I'm Connor Zwick-freelance blogger and designer. I love learning and teaching new topics in areas like HTML, CSS, PHP, Ruby on Rails, and last but certainly not least, jQuery. You can follow me on twitter or visit his design blogcyberantix.

In this tutorial, we'll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that's coming soon.

Step 1 Photoshop Layout

First we need to plan out our layout and make it look cool with Photoshop. Thanks to Collis, and his amazing Photoshop skills, we have a slick layout to work with. You can grab the before and after PSD file for further inspection in the source zip file. But it's pretty self-evident. It doesn't have any gradients either, so we should be able to make this fairly easily just with CSS.

Before

Here you can see what the demo will look like in its normal state.

After

Here is what the demo will look like when the panel is slid down.

Step 2 --Planning the structure

First off, we need to build the page's structure. To create the layout above, what do we all need structurally in the HTML?

  • First off, we need a header, that extends across the entire width of the page.
  • We'll also need a top panel, which for now, we will pretend is permanently expanded until we insert the JQuery.
  • We'll need an area for the normal page content.
  • Finally we'll need a visual break between the header and page content, which we will accomplish through a horizontal ruler (hr).

    • Alright, so the layout of the page is pretty simple. Here it is:

    <div></div>  <!--Header-->

<hr>  <!--Header Stripe-->


  <div>                  <!--Contains the button and panel-->
    <div>                <!--Contains the panel itself-->

      <div> This div will serve as the background of the panel</div>
    
    </div>
    <div><a>Login Here</a></div>  <!--Will be the button to slide the panel down-->

    <div><a>Hide</a></div>        <!--Toggles to this when the panel is slid down-->
  </div>
</div>


<div>

  All of the Content will go here
</div>

    Wow...without classes or any content inside, it looks like a lot of pointless divs, but all will be necessary for the CSS and JQuery later on. Now we will start adding classes in preparation for the CSS.

    Step 3 -- CSS preparation: Classes & ID's

    Now we've got to change the skeleton into an actual site with CSS. We'll start by adding classes and ID's to all of those divs! You can do this easily by printing out the Photoshop layout and then marking up the areas and associated classes with a sharpie. For this demonstration, I will do the same only in Photoshop. Although it may be extremely ugly, hopefully it will show you the different regions of the page.

    Areas

    Note: I plan on having the normal non-highlighted image on hover.

    Here is the page with the added classes and ID's:

    
<div id="header">
</div>

<hr id="header_stripe"/>

<div id="wrapper">
  <div id="toppanel">

    <div id="panel">
      <div id="panel_contents"> </div>
    </div>
    <div class="panel_button"><a href="#">Login Here</a></div>

    <div class="panel_button"><a href="#">Hide</a></div>
  </div>
</div>
<div id="content">

</div>

    Right now, I'd show you a screenshot of what we have so far, but we don't have anything except a horizontal ruler and two unstyled links. You get the idea. Now we can style the page.

    Step 4 -- Linking the files together

    Before we go any further though, we need to introduce the CSS file to the skeleton. I created a stylesheet entitled "style.css". While we're adding code to the head, we might as well add the javascript and jQuery as well. Here is the head of the page:

    <head>
<title>Nettuts JQuery Sliding Panel</title>
<style type="text/css">
@import url(style.css);
</style>
<script src="jquery.js" type="text/javascript"></

    script> <script src="javascript.js" type="text/javascript"></script>
</head>

    Step 5 -- Styling the Skeleton: header

    Now we have to style that skeleton of divs. Let's start from the top down. First we need to style the header as well as the body tag:

    body {
    background: #202020;
    text-align: center;
    margin: 0px;
}

#header {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 135px;
    background: #3f3f3f url(images/header.png) no-repeat center ;
    position: relative;
    border-bottom: 1px solid #4a4a4a;
}

    Fortunately, we have no gradients to worry about here. But we do still have a background image. I also added a 1px border to the bottom of the header for a visual break.

    The background image is optional. I liked the Bell Gothic BT font so much, I decided to make it into an image. Alternatively, you can choose to just style plain text by adding styling to h1, and h2 tags:

    #header h1{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position: relative;
top: 30px;
font-size: 40px;
color: white;
}

#header h2{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #7e7e7e;
}

    And then modifying the header to this:

    <div id="header">

  <h1>Sliding Panel</h1>
  <br />
  <h2>jQuery Sliding Panel Demonstration for NETTUTS</h2>
</div>

    So now the page should look like this:

    You can view step 5 here.

    step 5

    Step 6 -- Styling the Horizontal Ruler

    Although we have the bottom border of the header to visually separate the sections, we also need a thicker more visual border as well. Since we cannot apply two bottom borders to the header, we can just stylize the horizontal ruler (hr): 

    hr#header_stripe{
height: 12px;
position: relative;
top: -7px;
background-color: #191919;
border: none;
color: #191919;

}

    We now have a thicker separation to add to the 1px border:

    step6

    You can view step 6 here.

    Step 7 -- Styling the Panel

    Now we need to stylize the panel. Until we add the JQuery, we're going to stylize the panel like it was expanded. When we're done with the CSS, we're going to animate the height of the panel to zero, and then back to full height; so we need to make sure that when we change the height, it stays the same.

    Here is the CSS code, I'll explain it afterwards:

    #wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    text-align: center;
}
#toppanel {
    position: absolute;
    top: 135px;
    width: 900px;
    z-index: 25;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#panel {
    width: 900px;
    position: relative;
    top: 1px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
    overflow: hidden;
    text-align: left;
}
#panel_contents {
    background: black;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    height: 100%;
    width: 904px;
    position: absolute;
    z-index: -1;
}
    step7

    Ok, that's a lot of code for one box. Well it's more than that. Try inspecting it with either Firefox Extension Firebug or Web Developer, and you will see what all that CSS does.

    Check out what Step 7 currently looks like.

  • First off, we need the panel to be positioned absolute, or else, when expanded, it will push all of the content below it, down. So we add a wrapper, which is wrapped around everything else, and then centered. If we left the wrapper out, the panel, which is positioned absolute, would not be able to be centered as easily.
  • Next, we add the style info for the toppanel as a whole. As you can see, this includes the panel buttons.
  • After that, we add the style info for just the panel which is hidden normally. This is the box that you see expaned now. I made the height 100%, so that if we increase or decrease the height of #toppanel, then the height of the #panel will be the same. Also, the overflow is hidden, so that if the height of the #toppanel is lowered, it will cut of the content of the panel.
  • If you examine the earlier HTML, you will see the div with the ID of panel_contents. This div, although empty, allows us to have the background transparent, while still keeping the content inside opaque.

    • Step 8 -- Add content to the Panel

    Before we test out the panel, we need to add some content, to see if it hides it properly. In this example, we are making a login area, so we need to add a form, and we're also adding an image to balance it. This step is just to add content for the demo. It is less important and is more basic, so I will not explain it as much as everything else. Here is the code:

    CSS:

    .border {
    border: 15px #1d1d1d solid;
}

img.border_pic {
    border: 15px #1d1d1d solid;
    position: absolute;
    top: 110px;
    float: left;
    margin-left: 150px;
    width: 250px;
    height: 150px;
    z-index: 30;
}
div#login {
    width: 240px;
    height: 150px;
    position: absolute;
    right: 150px;
    top: 110px;
    background: #46392f;
    text-align: left;
    padding-left: 10px;
}
div#login p {
    color: #CCCCCC;
    font-family: Century Gothic, Georgia, "Times New Roman", Times, serif;
    line-height: 25px;
}
div#login input#password {
    position: relative;
    right: -6px;
}
div#login input#login_btn {
    border: 1px #899690 solid;
    cursor: pointer;
    position: relative;
    top: 30px;
    left: 86px;
}

    HTML:

    
      <img class="border_pic" src="images/tutsplus.jpg" alt="Screenshot" />
      <div class="border" id="login">

        <p>Username:
          <input type="text" size="15" name="username" id="username" />

          <br />
          Password:
          <input type="password" size="15" name="password" id="password" />

          <br />
          <input type="button" accesskey="l" id="login_btn" name="login" value="Login" />

        </p>
      </div>
    step8

    Step 8 is available here.

    Step 9 -- Test out the CSS

    We now need to make sure that if we use jQuery to animate the height of the top panel, it will work smoothly. Now that we have content, we are going to change the height of #panel to 200 and see what happens:

    Wonderful. You can view step 9 here. Now we're going to change it to 0:

    step9

    Perfect. Now we know that the design will work with JQuery.

    Step 10 -- Styling the Button

    If you examine the finished product, you can see that the button that slides the panel down, changes once you click it once. This means it toggles. Therefore, we need two buttons, and we will toggle their visibility. Before we hide one of them, though, we need to add CSS to them.

    If you remember, we added the class ".panel_button" to them. Here is the style information. I will explain it after:

    .panel_button {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 1px;
    width: 173px;
    height: 54px;
    background: url(images/panel_button.png);
    z-index: 20;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    -khtml-opacity: 0.70;
    opacity: 0.70;
    cursor: pointer;
}
.panel_button a {
    text-decoration: none;
    color: #545454;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: 5px;
    left: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
.panel_button a:hover {
color: #999999;
}
    10

    Step 10 Panel Buttons

  • First we center the button using the auto margin technique. Then we position it and add a background of the button. We also add all of that styling information to accodmodate for all of the different browser's preferences. And make the button seem clickable by making the cursor a pointer, when you hover over it. This just improves the usability.
  • We're also going to wrap the text in a link, to provide an on hover effect, as well as positioning.

    • Step 11 Button HTML

    Now, in preparation for the JQuery, we need to set up the buttons, with their HTML. First off we're going to add an image to each button, and position it with CSS, you'll see the HTML in a second:

    .panel_button img{
position: relative;   
top: 10px;
border: none;
}

    Now, we also need to hide the Hide button for now. As much as I hate, inline styling, I think it is just easier to add this CSS inline, so here is the new HTML code for the buttons, with the images:

        <div class="panel_button" style="display: visible;"><img src="images/expand.png"  alt="expand"/>
      <a href="#">Login Here</a>

      </div>
    <div class="panel_button" id="hide_button" style="display: none;"><img src="images/collapse.png" alt="collapse" />

      <a href="#">Hide</a>
      </div>

    Ok, so notice, right now, the hide button is hidden with inline styling. This will be toggled later with jQuery. Notice, I also added an ID to the second button, so we can target it later easily.

    11

    Step 11 Panel Button

    Step 12 Adding the Content

    This is a quick, but necessary step, adding content. I wrote one sentence and added one paragraph of dummy text. I centered it using the auto margin technique, and colored it a gray color:

    #content {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    position: relative;
    top: 90px;
    text-align: left;
    color: #545454;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-bottom: 30px;
}
    12

    See the text behind the panel in Step 12.

    Step 13 JQuery Time!

    Ok, now for the final part of the tutorial, JQuery! You can grab the latest JQuery at jQuery.com. If you're just beginning with it, be sure to check out this other Nettuts tutorial by Jeffrey Way, for great JQuery resources. I've already grabbed a copy from JQuery.com, and have already linked it to the page in Step 4.

    Step 14 Think about what we need

    Lets first think about what we need the JQuery to do, before we write the code.

  • We want to activate the animation on 'div.panel_button' click.
  • We then want to animate the height of the panel to 400px.
  • We then want to toggle the button.
  • Then we want to activate the reverse animation on 'div#hide_button' click.
  • Then we want to animate the height back to 0px

    • Step 15 Write the Code

    So first we start out by getting the script ready with the following JQuery:

    $(document).ready(function() {
});

Now we write the code that goes inside there:

$(document).ready(function() {
    $("div.panel_button").click(

        function(){ $("div#panel").animate({ height: "400px" }); $("div.panel_button").toggle();
            }); $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        });
   });       
});
    Before

    Panel in motion in Step 15.

    At first, when you examine the previous code, some of you might wonder why I only have toggle in the first action. Well, you need to remember that the hide button also has a class of panel_button. Therefore, when you click the 'Hide" button, you are actually applying both actions.

    Step 16 Making the animation look 'real'

    So now it's looking pretty good, but we can still do more; like making the animation look better. When animating, it's usually important to try to imitate real life as much as possible. In this case, I think of a real life example, like a pull-down projection screen. Remember when you pull those, you pull it further down then it will be, then it goes back up a little. In the same way, when you want to put it back up, you pull it down a little before it goes up very fast.

    Let's try to imitate that:

    $(document).ready(function() {
    $("div.panel_button").click(

        function(){ $("div#panel").animate({ height: "500px" }) .animate({
        height: "400px" }, "fast"); $("div.panel_button").toggle();
            }); $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"

        }, "fast"); 
      });       
});

    Notice that we animate the panel to a height of 500 before going to 400. We also added a difference of speed like in real life, by making certain parts slower. If you look at the demo you will see that when you hide the panel, it still goes to 500 first. Again, this is because both buttons have the same class. So really when you hide the panel, it goes through this process:

  • Animate to 500 and toggle
  • Animate back to 400 fast
  • Animate back to 0 fast

    • Now we have a working Sliding Panel using JQuery. Hope you found this tutorial to be useful! If so, please submit it to Digg, StumbleUpon, DZone, etc!


    Related Posts

    Check out some more great tutorials and articles that you might like

    Enjoy this Post?

    Your vote will help us grow this site and provide even more awesomeness

    Plus Members

    Source Files, Bonus Tutorials and
    More for $9 a month for all TUTS+
    sites in one subscription.

    Join Now

    User Comments

    ( ADD YOURS )
    1. PG

      Philo August 19th

      Great Tutorial!

      ( Reply )
    2. PG

      ebw August 19th

      wow. this is so good.

      ( Reply )
    3. PG

      Dewey August 19th

      Not bad. Shouldn’t this be a sliding jQuery shelf tutorial rather than a form tutorial?

      ( Reply )
    4. PG

      Javier Rios August 19th

      This was a nice tut, just kinda skimmed over it but will try it out.

      ( Reply )
    5. PG

      pickupjojo August 19th

      Woah, very nice result!
      I think I’ll use it on the website I’m currently doing. :)

      Thanks for sharing.

      ( Reply )
    6. PG

      Dan August 19th

      This looks very nice. I’m working on a site that I’m having a rough time finding a spot for the navigation on. What do people think about having the navigation in something like this? Annoying?

      ( Reply )
      1. PG

        PandaMaster October 2nd

        having to click to open the navigation is bad

        ( Reply )
    7. PG

      Corey August 19th

      Awesome tutorial but seriously it is time for something new! we all know jquery can slide so lets figure out something new it can do!!!

      ( Reply )
    8. PG

      Ben Griffiths August 19th

      This is great, one of my favourite so far :D

      ( Reply )
    9. PG

      Neil August 19th

      Nice!

      ( Reply )
    10. PG

      Dan Harper August 19th

      Great tutorial, and an awesome end result! :)

      ( Reply )
    11. PG

      AP August 19th

      Love you dudes. Great tutorial, keep inspiring us…

      ( Reply )
    12. PG

      Thomas Milburn August 19th

      An interesting tutorial. In terms of animation it’s really cool.

      I think that the buttons to hide and show the panel should be dynamically added by the Javascript and that the panel should be visible by default. This means that the those users who don’t have Javascript enabled will still have access to the same functionality.

      ( Reply )
    13. PG

      Connor August 19th

      Glad you all have found it useful!

      ( Reply )
    14. PG

      Connor August 19th

      @Thomas off the top of my head, you could also just make the button a link to a login page, then disable the default action of the link with javascript. Then when someone with javascript enabled would view the page, the button would activate that top panel. And then when someone without javascript enabled would view the page, they would just have a link to a login page.

      ( Reply )
    15. PG

      Taylor Satula August 19th

      *** Off Topic ***

      I’ve been getting a db error for the last hour.

      ( Reply )
    16. PG

      Taylor Satula August 19th

      Hurrah all the plus tuts will be on a seprate site. P.S good tut the dropdown’s a little jerky though

      ( Reply )
    17. PG

      Connor August 19th

      I’ve also been getting the db error…

      As far as the drop down being a little jerky, I think that’s an issue with your specific computer. ;)

      ( Reply )
    18. PG

      Jammin August 19th

      This is similar to the login box used on groove shark ( http://www.grooveshark.com/ then click login in the menu bar ), personally I prefer the way it works on groove shark but still nice.

      ( Reply )
    19. PG

      Dan August 19th

      This is pretty sweet, but it is busted in firefox 3.

      ( Reply )
    20. PG

      insic August 19th

      definitely its incredible. another great tutorial.

      ( Reply )
      1. PG

        vdubplate@gmail.com November 7th

        So pretty

        ( Reply )
    21. PG

      Connor August 19th

      What do you mean Dan? I primarily use FF3, and have no problems with it whatsoever.

      ( Reply )
    22. PG

      Craigsnedeker August 19th

      Totally incredible! This is more of what I’d like to see!

      ( Reply )
    23. PG

      swany August 19th

      thinking out loud…
      would this type of technique also be good for a sign up to the newsletter area? or would the question of javascript being turned on and off for some users be a problem that wouldn’t be worth all the trouble in the end?

      right now i have just a simple form on the right of the screen, with some design around it.. works great, have no problems with it…. However, I like the idea of maybe adding some animation to the pages, but wouldn’t want to make it harder for some people who didn’t have javascript on. The age of people going to the site range from 13-80.. It’s tricky to make something interesting yet easy for people within that age range to operate… plus the clients want to stay corporate yet be edgy and “green”… ahh i tell ya…

      if a user had javascript off then i would make a link to separate page with just the sign-up to the newsletter section?

      ( Reply )
    24. PG

      Craigsnedeker August 19th

      I don’t like it how it goes so far down it makes a scrollbar for that split second, ya know?

      ( Reply )
      1. PG

        Mike March 18th

        @Craigsnedeker : Just use a different Easing animation. There’s about 20 to choose from i think.

        ( Reply )
    25. PG

      godonholiday August 19th

      could this be implemented in the top of a wordpress theme? page? etc..

      ( Reply )
    26. PG

      Bob August 19th

      Cool tutorial although users without javascript can’t use it.

      A simple solution might be to link to a login page or have the menu automatically display when javascript is disabled.

      ( Reply )
    27. PG

      Chris Robinson August 19th

      eh…this one is ok…title is a little misleading as Dewey said this should be a jQuery slider tutorial not a “form” tutorial.

      when I first read the title I was thinking oh cool maybe a jQuery login form with validation, maybe some custom checkbox styling for a “remember me” and maybe even a little Ajax functionality…but i was disappointed to find just a slider.

      ( Reply )
    28. PG

      Dayton Nolan August 19th

      I’ll be the decenter and say that this is way too much production for a login box. This is bordering on “useless flash intro”. Animation is cool but let’s think about usability. Just because we CAN make elements fly all over the screen, doesn’t mean we SHOULD.

      ( Reply )
    29. PG

      Connor August 19th

      Dayton…did you even read the intro…? This isn’t useless. It’s whole focus is usability. Redundant information like a login form, make a page unnecessarily complex. A simpler page is easier to use, making it’s usability better.

      Chris, I know. It could be entitled “How to Make an Animated Top Panel” as well.

      godonholiday, yes it could. You could easily make it into a module, or just add this to your theme.

      ( Reply )
    30. PG

      Shane August 19th

      I’m still surprised how people write this:

      $(document).ready(function() {
      });

      when people could just write this:

      $( function() {
      });

      to do the same thing.

      Anyway, I must say thank you, but like a couple of other readers have said, we’re seeing too many jQuery tutorials that don’t really teach us anything new.

      I’m being quite harsh here, and it’s not on the tutorial writer. However, I’d also say that the slider down is ok, but the ‘bounce’ effect is a little over the top. Once again, the effect is a little ‘over-done’.

      ( Reply )
    31. PG

      basicxman August 19th

      I love jQuery! I would make the page scroll down though so you can see the entire panel.

      ( Reply )
    32. PG

      Jeffrey Way August 19th

      @Shane –

      Many people, including myself, would argue that writing it out the long way allows for more readable code. Either way works just fine – but I typically find myself writing out the full document.ready(function(){});

      Don’t worry. We’re done with jQuery tutorials until next week. Later this week, we’ll have a Facebook App tut, Shopping Cart tut, etc. Should be a good week!

      ( Reply )
    33. PG

      Jeff August 19th

      Quite similar to what was done on http://noahsclassifieds.org/.

      ( Reply )
    34. PG

      Connor August 19th

      Yeah…except that’s using mootools

      ( Reply )
    35. PG

      Jonathan August 19th

      Shopping Cart tut Jeffrey, now that is something to look forward too.

      Great Tut, I use the same approach to hide my wordpress admin panel and special user links, site stats etc. Basically everything I want to see on the fly within a hidden sliding panel so not to bother everyone else with my boring admin stuff.

      ( Reply )
    36. PG

      Jad Graphics August 19th

      Great tutorial. Don’t mind the other people’s comments, keep these jquery tutorials coming. Also, the Shopping Cart tutorial should be very interesting. I really am looking forward to it.

      ( Reply )
    37. PG

      Matt August 19th

      Doesn’t look as nice in IE6.

      ( Reply )
    38. PG

      Simon August 19th

      Nice little tute, however the sliding method in jQuery probably isn’t the right look for it. You’d be better off with a pulldown effect rather than a reveal.

      ( Reply )
    39. PG

      Rajeev August 19th

      Very nicely done. The never-ending quest for the right login form may be one step closer to the end.
      Thanks!

      ( Reply )
    40. PG

      Chris H August 19th

      Need some IE 6 “hacks”. It doesn’t look right in its present form.

      ( Reply )
    41. PG

      Bhaarat Sharma August 19th

      Nice tutorial but in real world users wont spend a lot of time on a site that opens up a whole new panel just for logging in.

      I think if you guys make a tut that asks for uname pwd and when users hit submit just shows the wheel and says ‘logged in’ would be much better. small and concise.

      ( Reply )
    42. PG

      insic August 19th

      @matt dump your IE6 man. or your that too old to keep that..lol

      ( Reply )
      1. PG

        shakil March 11th

        hey where are u fom?

        ( Reply )
    43. PG

      shelly August 19th

      ok. i am interested but have not yet tried it myself. i am tired of all the logins i have to do at all the different sites i go to. are you telling me that if i use this program i can make one popupbox that i can use to log into every site i go to. and then what will heppen when i dont login to the sites “login”panel? will i still get there. and how to erase a sites log in panel when it pops up?

      ( Reply )
    44. PG

      Shane August 20th

      @Jeffrey – just pointing out an alternative. I find my method more readable – it’s a question of what you’re used to seeing I suppose.

      good to hear that new stuff is coming. I appreciate all the good stuff! :)

      ( Reply )
    45. PG

      Christefano August 20th

      This is similar to the login form I see every day in Warehouse. I can’t remembec how many times I’ve forgotten that the Warehouse login form wasn’t actually a modal dialog in my browser.

      Here’s a demo:

      http://ar-code.wh.engineyard.com/

      ( Reply )
    46. PG

      Jay Salvat August 20th

      Great one and nice effect.
      Thanks Connor.

      ( Reply )
    47. PG

      BroOf August 20th

      Sounds very nice!

      ( Reply )
    48. PG

      Brian August 20th

      Great tutorial, but the form’s usability can be improved by adding the tag and “for” attribute to the field descriptions like this:

      Username:

      Password:

      The “for” attribute should equal the value of the “id” attribute of the related element. When the text within the label element is selected it will toggle the form field.

      ( Reply )
    49. PG

      Connor August 20th

      How do you mean that it looks weird in IE6? I’ve tested it in IE6, and I can’t see anything…unless you’re talking about that slight positioning of the button?

      ( Reply )
    50. PG

      Mark Bowen August 20th

      Great tutorial. Makes for a nice introduction to a nice effect made possible with jQuery.

      Would be nice to see an update to the tutorial though so that the button could have a link to a login-form so that users that have JS disabled can still use the page though. Can we get that added in to the tutorial perhaps?

      Best wishes,

      Mark

      ( Reply )
    51. PG

      Lamin Barrow August 20th

      Very nice but it’s not incredible in my onw opinion.

      ( Reply )
    52. PG

      Johnny Caraveo August 20th

      Great article, jQuery FTW!

      ( Reply )
    53. PG

      khai August 20th

      how do u use this form and add a simple image gallery

      ( Reply )
    54. PG

      Andrew Strachan August 20th

      Nice tutorial – some nice ideas but a little unorthodox in the implementation plus the code could be a whole lot leaner. It would definitely benefit from making the content available to all users, whether they had JavaScript enabled or not.

      ( Reply )
    55. PG

      James August 21st

      8-O Nice effect… Not to sure about it’s necessity in this situation though.

      ( Reply )
    56. PG

      Mike Bobiney August 21st

      very springy!

      when will we be expecting tutsplus.com? ;)

      ( Reply )
    57. PG

      Kevin Quillen August 22nd

      Pretty sweet. I am going to use a variation of this for the new Dogfish Head website.

      How about modifying this for another tutorial with something like Amazon or ZD Net’s extra navigations? (where they pop up a box with category links) – this can be engineered for that and is something I am working on.

      ( Reply )
    58. PG

      Ryan August 24th

      I like the functionality, but from a design standpoint, I would decrease the height of the login form div because when it is closed, there is no vertical scroll bar. But once you ‘open’ the form, a vertical scroll bar is required since the page is now much longer.

      While this depends on the browser, you may wish to decrease the height as this is true for the most common browser size.

      Otherwise very useful!

      ( Reply )
    59. PG

      Billy August 26th

      I don’t mean to be a wet blanket on this but:
      1.) This isn’t Ajax, there are no server side calls
      2.) How will this system handle an incorrect login attempt? Now to do it properly that would require Ajax.

      ( Reply )
    60. PG

      Corinne August 28th

      I really like the look and feel of the sliding panel. Great work! I was just wondering if there’s a work-around when the content beneath the slide-in panel is flash?

      Basically, when I slide the panel down over the flash sitting in my content section, the flash sits on top of the log in panel. This happens in both FF3 and IE7 on a windows platform… on a mac (in FF) however, the panel slides over the flash content perfectly.

      Suggestions?

      ( Reply )
    61. PG

      Jeffrey Way August 29th

      @Corinne – When you publish your swf file, there should be a “windowless” setting that you can check. This should allow the panel to show above it.

      ( Reply )
    62. PG

      Den August 29th

      i like it

      ( Reply )
    63. PG

      Forrest August 31st

      Your source code is missing the style.css document, I believe.

      ( Reply )
    64. PG

      Fabryz September 1st

      Nice! I was trying to do this during my sperimentations days ago :)

      ( Reply )
    65. PG

      cgitech September 3rd

      First…I like to say this is an excellent tutorial and further…an excellent website.

      I am trying to set up a sliding panel on a website I am developing. Only I want to have it at the bottom of the header and slide up (in stead of down). How should I go about this?

      Thanks for your help.

      ( Reply )
    66. PG

      Curtis September 11th

      Yes, very nice job, and Forest, you might grep the style.css here: http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/style.css

      ( Reply )
    67. PG

      Kali7 September 15th

      I love it…. now how to implement that into a Joomla site…..

      ( Reply )
    68. PG

      asp.net September 20th

      great code :)

      ( Reply )
    69. PG

      Thion September 29th

      Despite of my best efforts, I can’t make it work – not by following this tutorial, nor by using demo (FireFox 3.0) – it’s just not working, and demo zip file is missing style.css (which can be acquired here: http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/style.css) – I think someone mess up with this tutorial ;) .

      ( Reply )
    70. PG

      zac October 16th

      Hi.. another great little tut. I got mine working well and was all happy, everything validates, yipee! Then I loaded it in IE 7 and the expanding form unrolled behind my other divs in the content. Very weird that it reacts so differently (for me) in the latest FF and latest IE. Any ideas of what could be doing this? The other divs it is dropping behind do not have a z-index so I dont know what is going on. Thanks to anyone who has some ideas on this.

      ( Reply )
    71. PG

      deepu October 23rd

      this is really a wonderful tutorial…

      ( Reply )
    72. PG

      ScyberWolf October 28th

      Thanks for the tutorial i’ll definitely use it on my site. Thanks again

      ( Reply )
    73. PG

      owain Llewellyn November 4th

      Is it possible to make the animation move from right to left as opposed to top to bottom?

      I have a column with text in on the right that I want to slide out to produce 4 columns like a pull out..

      any one got any ideas?

      http://www.icomcreative.com

      ( Reply )
    74. PG

      Sal November 4th

      Hello admin, nice site you have!,

      ( Reply )
    75. PG

      Abhi.. November 4th

      Attractive and Usefull !!

      ( Reply )
    76. PG

      gil November 7th

      Can it be auto open onload?

      ( Reply )
    77. PG

      Devin Rajaram November 20th

      How would I add “Register Today!” to this whole script.
      Im building this for my school website Im working on

      ( Reply )
    78. PG

      Devin Rajaram November 20th

      Forgot to add, please email me how I can go about doing this and a link back to this topic because Im always on the go to learn new stuff

      ( Reply )
    79. PG

      Dragos December 13th

      :) very nice ! great tutorial !

      ( Reply )
    80. PG

      BAG December 15th

      Great post!

      ( Reply )
    81. PG

      Puneet Sahalot December 17th

      hey…!! good job…
      its really cool…
      keep it up..!!!

      ( Reply )
    82. PG

      Temur January 3rd

      Thanks for the tutorial. I have one question. What should I do to make it disappear after user logs in? After user logs in, he will be redirected to the file called home.php . But what if he tries to come back to the main website index.php ?

      Your help is appreciated!!!

      ( Reply )
    83. PG

      sean January 13th

      I have a question.

      what is the wbr tag for in the /script link?
      is that so people can’t just use the cut paste learn nothing?
      if so, good job :D

      ( Reply )
    84. PG

      abdullah January 14th

      great, thanks pro

      ( Reply )
    85. PG

      Todd January 15th

      Nice tutorial but the example didn’t work in Chrome.

      ( Reply )
    86. PG

      sealv January 16th

      不错 很有前瞻性

      ( Reply )
    87. PG

      Web Design Showroom January 16th

      Like that alot – especially the point about thinking ‘real life’ when doing the animations which makes the whole thing ‘gel’ a bit better.

      ( Reply )
    88. PG

      Kyle January 16th

      Truly incredible! I CANNOT believe my EYES!

      It *blew my mind* when the form slid down and bounced! Unbelievable!

      I cannot get over how stunning and breathtaking this login form is. So swift, so cunning. Truly a work of spectacular javascript art.

      ( Reply )
    89. PG

      Dave January 16th

      Love the tut. Thanks! I’m using it on our intranet to give the users access to a complicated search form from any page.

      Anyone know how i can make everything BUT the run the collapse animation?

      ( Reply )
    90. PG

      gautch January 16th

      Good question Gil. Can this be auto open onload?

      ( Reply )
    91. PG

      Harnish January 17th

      Incredible tutorial!!!! Thank you so much Connor.

      ( Reply )
    92. PG

      Harnish January 17th

      Does anyone know of a post of an AJAX jquery authentication for a logon form like the one presented in this post?

      If so please let me know: http://www.lotusboost.com

      ( Reply )
    93. PG

      Kevin Dalman January 31st

      The animation script can be simpler and much more versatile by utilizing jQuery UI Effects. This already has effects like the one simulated in this demo. The advantage is that it is much easy for developers to customize the effect for themselves.

      Here is an example of an effect similar to the one used above:

      $(”div#panel”).toggle(
      “slide”,
      {easing: “easeOutBounce”},
      “fast”
      );

      To use a different motion effect, just change the easing option:

      $(”div#panel”).toggle(
      “slide”,
      {easing: “easeInQuint”},
      “fast”
      );

      Or you can change the effect itself – like using ‘zoom’ instead of ’slide’…

      $(”div#panel”).toggle(”zoom”);

      Once you learn the basics, it becomes very easy to specify your own slick animations.

      Docs on using UI/Effect:
      http://docs.jquery.com/UI/Effects

      Docs detailing Effect Easing options:
      http://gsgd.co.uk/sandbox/jquery/easing/

      ( Reply )
    94. PG

      slaFFik February 3rd

      I like it! I’ll use it!

      ( Reply )
    95. PG

      Azman Ishak February 6th

      Nice, tutorial. I’ll definetly going to used it for one of my project. Once finished I’ll paste the link here.

      Thnx.

      ( Reply )
    96. PG

      Stephan February 7th

      I’ve seen this done on a firm’s corporate website about a year ago. It was the first time I’d ever seen it. Come to think of it, it was a contact form. I created my own contact/login implementation after seeing it.

      Perhaps the author might know the website I’m referring to? I’ve lost it long ago. They seemed like a great team of guys. I would love to work with them.

      ( Reply )
    97. PG

      didi February 8th

      thank you very much!

      ( Reply )
    98. PG

      nic February 9th

      this is awesome, thanks !!

      ( Reply )
    99. PG

      Ray February 10th

      why didn’t you hide the overflow

      ( Reply )
    100. PG

      that graphic guy February 13th

      This is great I’m using something a little different on my website but this is a lot smoother! Thanks can’t wait to give it a real go!

      ( Reply )
    101. PG

      the mentalist February 13th

      The file I downloaded does not look anywhere near what you had. Folder is missing css and when I add in the css from your walk through everything is out of place. Ugh. This looks cool on the site but does not work in dreamweaver CS3. Any ideas why?

      ( Reply )
    102. PG

      iguy February 16th

      dreamweaver…epic fail. tut also fails imo for not degrading nicely. obstrustive javascript ftl D:

      ( Reply )
    103. PG

      bopjo February 23rd

      This doesn’t align correctly in IE7. Looks fine in Firefox but in IE7 the interactive panel is a few pixels too high. It would be nice to see a solution for this so we could use it professionally.

      ( Reply )
      1. PG

        adam October 3rd

        just add a conditional css. you should know this if you’re a professional.

        ( Reply )
    104. PG

      bopjo February 23rd

      Ok, I’ve spent all day working on this, going step by step in the instructions and it flat out doesn’t work as written and that’s very sloppy of the author, IMO. He talks about a “wrapper” div for the panel and buttons but if you look at the source code for the demo, “wrapper” is nowhere to be found. Instead we have a div named “page_container” that – unlike “wrapper” – wraps around everything except the header and the . The CSS for the page_container div is crucial for getting the buttons aligned correctly. There were other little subtle changes that needed to be made to the CSS and the HTML to get the buttons to slide down with the panel.

      I challenge anyone to get this tutorials to work as written (2/23/09). Try it and you’ll see.

      This is a great technique and I’m very grateful for Nettuts and the author for providing it but why can’t they care enough to test it and make sure it works AS WRITTEN before they submit incomplete, erroneous instructions that only serve to confuse everyone? Sorry guys, that’s just lazy and sloppy and you can do better!

      And it still doesn’t align correctly in IE7…..

      ( Reply )
      1. PG

        adam October 3rd

        works just fine on explorer 5.5, 6 and 7. who’s an idiot?

        ( Reply )
    105. PG

      wagjie February 28th

      不错！我喜欢

      ( Reply )
    106. PG

      Sophie March 6th

      Great, i will use it for a guestbook! So you can first read the messages and slide the panel to add a message!
      thanks!!

      ( Reply )
    107. PG

      shakil March 11th

      Yeah dats ri8 its relally beautiful

      ( Reply )
    108. PG

      mufti March 15th

      awesome, but the tutorila is to long to me, need basic think

      ( Reply )
    109. PG

      Jakob March 15th

      Nice, nice.
      I am wondering, how the code would look like, if I want to use that technique to have a couple of buttons vertically aligned, which pop down to show their content.
      Can anyone help me finding the code for that?

      ( Reply )
    110. PG

      Vinay Vidyasagar March 15th

      Sweet.

      ( Reply )
    111. PG

      Faisii March 17th

      great code

      ( Reply )
    112. PG

      mikko March 21st

      nice.

      ( Reply )
    113. PG

      E11World March 25th

      Nice tutorial!!
      I’m wondering and I guess no one asked this, what would I need to change in the js code to make this work so that I don’t need to click the button for it to roll down (and up). I want to do it only on HOVER. I’m using the following and tried changing the click to hover but didn’t work.

      $(document).ready(function(){
      $(”.btn-slide”).click(function(){
      $(”#panel”).slideToggle(”slow”);
      $(this).toggleClass(”active”); return false;
      });
      });

      ( Reply )
      1. PG

        E11World March 25th

        Actually I just fixed it.. sorry I was testing the wrong file. Hover does work instead of click for anyone who needs this. Cheers!

        ( Reply )
      2. PG

        chromax September 3rd

        Thats what I want, but I don´t know how to insert you modification into the already one!

        ( Reply )
    114. PG

      Jakob March 25th

      Nobody can help me?

      I want to use that technique to have a couple of buttons vertically aligned, which pop down to show their content.

      Can anyone help me finding the code for that?
      Thanks in advance!

      ( Reply )
    115. PG

      Pop Stalin March 26th

      Just FYI, I haven’t addressed any of the other issues with this tut (IE7 & 6 issues, hover vs. click) but one thing I have noticed is that I use Zeldmans’ CSS code for Hover nav’s and this doesn’t seem to play right with it.

      In order to get the hover effect to take place, you have to place your pointer just underneath the navigation links and sometimes it takes a few tries. I like the idea but it doesn’t seem to be well executed.

      ( Reply )
    116. PG

      Chris March 26th

      Agree with bopjo that the tutorial as show does not work, and the demo code differs. Really requires a lot of modification to make changes.

      ( Reply )
    117. PG

      Dan March 28th

      I can’t get this working either, spent 5-6 hours on it and now I’m looking elsewhere.

      Hope this gets fixed soon – Thanks for the effort though.

      ( Reply )
    118. PG

      love you April 2nd

      bestter !!

      ( Reply )
    119. PG

      John April 4th

      Awesome! I absolutely love your tutorials!

      *Goes to subscribe for premium*

      Thanks much for all the great tuts.

      ( Reply )
    120. PG

      christian April 8th

      great, but the download is not complete one of the .js files is missing
      can you update please

      ( Reply )
    121. PG

      Nykeri April 12th

      wow a failed tutorial thats a first from this site, but thanks for idea though

      ( Reply )
    122. PG

      SohoInteractive April 14th

      It’s not as smooth as it should be on FF2 but it is a great script. Thank you.

      T.

      ( Reply )
    123. PG

      weberica April 18th

      you forgot to include css in your zip file for download

      ( Reply )
      1. PG

        John Doe November 7th

        view source, add the style.css to the end of the url and save it to the folder/

        ( Reply )
    124. PG

      Romulus April 20th

      Would have been nice if your jquery.js wasn’t encrypted. Other jquery.js will not wotk with your demo.

      ( Reply )
    125. PG

      Butch Decossas April 27th

      Thanks very much for this. Amazing site and tutorials !

      ( Reply )
    126. PG

      Michael Pope April 30th

      I like it, but is it hard to make it open from the horizontally, rather than vertically?

      ( Reply )
    127. PG

      Abdel May 4th

      cool effect. Thanks.

      ( Reply )
    128. PG

      Kiran May 13th

      very awesome boss thx for nice stuff we are using this our projects

      ( Reply )
    129. PG

      Parker May 14th

      How can i implement AJAX to handle errors on the form to prevent reloading if there is any

      ( Reply )
    130. PG

      Archimidis May 15th

      Excellent tutorials!!!!

      ( Reply )
    131. PG

      Hussain June 9th

      Very very nice and definitely its incredible post. i feel its good and another great tutorial for learning simple jQuery.

      ( Reply )
    132. PG

      Ric June 12th

      hi great tutorial. Please could you tell me how to disable the default action of the link for javascript users like you mentioned above so none javascript users can click to go to another page.

      very supprised nobody has added this so far.

      ( Reply )
    133. PG

      Nate June 19th

      Where are the PSD files? I don’t see them in the zip

      ( Reply )
    134. PG

      hatemgamil June 24th

      i have downloaded the source code but i cant find the css file:S:S,and i need it badly

      ( Reply )
    135. PG

      Marcelo July 2nd

      Can you please explain to us how to make it slide from de right insted of the top?

      ( Reply )
    136. PG

      Jonny July 7th

      No jquery.js or style.css files found in the demo folder. Anyone know why?

      ( Reply )
      1. PG

        Jonny July 7th

        Found how to get the two files not included. Go to the demo page at http://nettuts.s3.amazonaws.com/041_TopPanelWithJquery/demo/index.html then change the index.html to jquery.js and it will prompt you to download it. For the css file, replace the index.html for style.css and copy all text from the browser window to a new text file and change the name to style.css.

        ( Reply )
    137. PG

      Karar.A.R July 12th

      Very nice Thanks alot :)

      ( Reply )
    138. PG

      Rob T. July 17th

      I really liked it. As for the harsh responses about it “…not working…” , “sloppy”, “…doesn’t work in FF” , etc., I can’t find where it doesn’t work.

      If the Styles file is missing for CSS, just code it yourselves. This isn’t necessarily a site for people new to coding.

      Bottom line: I got it to work in both IE and FF; it slides well and functions to make more room; and it works to create something different.

      Kudos for the tut.

      (is it any wonder the author stopped posting replies…wouldn’t you?)

      Thanks, again, for this.

      ( Reply )
    139. PG

      Hendrik-Jan Francke July 19th

      Nice tutorials. Really working nicely for me. Thank you!

      ( Reply )
    140. PG

      Ben July 29th

      I never knew jquery was so simple, great tutorial

      ( Reply )
    141. PG

      ron August 17th

      very nice design but not to be used as is because javascript OFF means no login.
      if this were a requirement, it must be stated up front.
      (show javascript error)
      cheers!

      ( Reply )
    142. PG

      Durim Kelmendi August 17th

      I love it. Thanks!

      ( Reply )
    143. PG

      Durim Kelmendi August 17th

      To get the CSS, go to demo, and change index.html to style.css and copy that and make a new css. Then type jquery.js to get the JS file

      ( Reply )
    144. PG

      radek August 26th

      How can I do two buttons with diffrent panel??

      ( Reply )
    145. PG

      scabi September 2nd

      just animated,where the login???

      ( Reply )
    146. PG

      Lawk Salih September 23rd

      CSS file and jQuery.js missing!

      ( Reply )
    147. PG

      Seo Tampa Bay September 26th

      I like the idea as many have stated. But I am not a fan of JavaScript.

      Im Seo all the way.

      ( Reply )
    148. PG

      Karl October 7th

      Can I transform the panel to slide down/up on mouseover/mousedown ?? If yes what i got to do ??

      ( Reply )
    149. PG

      Ricardo October 21st

      The demo files don’t work…

      ( Reply )
      1. PG

        Ricardo October 21st

        I made it work, had to go to the Demo page of the website and save “jquery.js” and the CSS file “styles.css”.

        The Sliding Panel rocks, but please… test your demo files at least.

        Thanks.

        ( Reply )
    150. PG

      Rohan October 22nd

      hey great work!

      but i have a prob :-(
      i have flash in my page and the panel is is not working with swf.it comes behind the swf banner.

      help!

      ( Reply )
    151. PG

      Dave October 23rd

      Been trying to make the image and login box not having any opacity.
      Without luck tho. Anyone who knows how this is done?

      Thought i could just apply opacity: 1 to the img tag.

      ( Reply )
    152. PG

      Tom October 31st

      can someone plez help me by telling me what to do with the file

      where’s should i put it, in what folder

      plz rellay need this as fast a s possible

      ( Reply )
    153. PG

      John Doe November 7th

      Can someone help me out? I need this to animate up from the bottom of the page so the tab would animate towards the top of the page from the bottom. I can’t for the life of me flip this over and get it to animate up.

      I would really appreciate the help.

      ( Reply )
      1. PG

        vdubplate November 8th

        Anyone?

        ( Reply )
    154. PG

      pipiz November 14th

      wow, thanks for your great tutorial

      ( Reply )

    Add Your Comment

    ( GET A GRAVATAR )
    1. Arrow
      Gravatar

      Your Name
      November 14th