Build An Incredible Login Form With jQuery
Tutorial Details
- Technology: jQuery, HTML, CSS
- Difficulty: Intermediate
- Completion Time: 2-3 hours
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.
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.
width="600" height="400">
Here you can see what the demo will look like in its normal state.
width="600" height="400">
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?
until we insert the JQuery.
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.
width="600" height="400">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.
width="472" height="269">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:
width="438" height="233">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;
}
width="600" height="399" />
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.
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.
the panel buttons.
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.
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>
width="600" height="409">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:
height="269">
Wonderful. You can view step 9 here.
Now we're going to change it to 0:
width="600" height="241">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;
}
width="414" height="247">Step 10 Panel Buttons
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.
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.
width="381" height="313">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;
}
width="498" height="257">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.
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"
});
});
});
width="600" height="300">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:
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Connor Zwick
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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.
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
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.
Anyone?
hey, i think what you want to do is animate the box’s y-position instead of its height attribute. So you would give the box a css attribute of “bottom:0px;”, that would sit the box on the bottom,
then give it a negative margin-bottom amount equal to the height of the box, that will make the top of the box sit bellow the page, eg “magin-bottom:-200px;”
then just animate the margin-bottom attribute back to 0 and the box should slide up.
hope that helps.
wow, thanks for your great tutorial
This is perfect! Thanks for the jquery help!
Nice, but need more smooth effect…
I would like to add a form to the panel that has three steps, could I add pagination within the panel?
Nice work ….
I’ve build it in my joomla page and have a little problem. When opening the page the panel is allready open.
I’ve followed the instruction above but can’t find where I did it wrong. I’ve done it several times.
I’ve downloaded Jquery 1.3.2
Anybody???
Nice Topics. Keep it up.
nice jQuery effect but your form mark-up really needs work, no no no . I understand this is a demo of jQuery effects but if you’re going to put a form in there you might as well code it properly.
comment system stripped the HTML tags from that, should read no no no
and again. ‘fieldset’, ‘legend’ and ‘label’ tags.
Wow, do you not realize the thing won’t even go anywhere, as there is no action attribute? Come on man!
Really interesting Tutorial.
Can I use this form to replace my default WordPress Blog? If so, where do I go and what codes should I change or add?
I love the look of this . Ultra 2.0.
However, i need the script that controls usernames/passwords so i can create login for my clients to access their info, and have the ability to add users when needed.
thnx
nice keep on going
Beautiful!
How do I get this working even with JavaScript disabled? So clicking on the login will take the user to a login page instead?
Many thanks,
Emma
This isn’t so incredible. Learn to describe your articles better
323232
This is very cool! I have been working on a couple of login screens / pages, but I need to come up with something that looks nice and clean. So far it’s a toss up between this one and a script I located on Dynamic Drive. Either one will do, but this one looks the coolest. Thanks a great deal for the post!
Thank you for your tutorial, its beautiful panel..
How do you set user names and passwords?
Hi
I think this is awesome and have actually been using it form company.
Now we have changed to ext js and im a bit lost in terms of how to make these 2 technologies work together.
Anyone available to give me a hand?
Rubish its not valid css
i hate the people seeing its clean and markup when its not
rubish work
fuck of
the file jquery.js is not here
Hey Connor,
You never got back to me about the problem I am having with your top-nav menu. It does not work correctly in FF and Chrome…it blocks all the links in the page below.
I’m hoping you can get back to me sooner than later.
I know you added the Wrapper to keep the page content from pushing down… but I need the content to push down. I tried changing the position a variety of ways, added clear, etc… I can’t get it to push the page content down when it opens.
How would I do it? Add something to the JS code?
Thanks.
Really nice tutorial.
I will replace it with the Loginbox from my WordPress Adminpanel, i hope that works.
Greatings
What a useless tutorial. Most of what you tell the recipient in the different steps does not coincide with the content of the examples you are referring to. Get a fucking job, idiot.
This is very nice example! THX!
nice little piece of code… will use it in my next login page…
the code shared here is very useful and lucidly explained… thanks for sharing this. i would be using it often.
A couple files are missing from the source code, namely the “style.css” file and the “jquery.js” file.
1.) Simply direct your browser to the following URL:
http://cdn.net.tutsplus.com/041_TopPanelWithJquery/demo/style.css
2.) Now copy and paste the content of the above style.css to the new file you have to create in the demo directory (yes, name it “style.css”)
3.) Now direct your browser to the following URL:
http://cdn.net.tutsplus.com/041_TopPanelWithJquery/demo/jquery.js and save the file to the demo directory (or copy and paste the content to jquery.js file in the demo folder just like you did for the style.css file in step 2 (this time name it “jquery.js”).
Now your demo should work.
how do you make this work with coldFusion? may be it is just me but it doesn’t go anywhere even if you have a complete form tag…can someone guide? thx
Really nice tutorial, Thanks for sharing the code!
Any ideas what I need to adjust to get this to work with jquery 1.4.2 ?
It’s really interesting tutorial……..it teaches more & more.
Can anyone help me I have two panels I’m using on one page and I only want one to show at a time so I made an adjustment to the js but it doesn’t seem to be adding the class. Can anyone help?
$(document).ready(function() {
$(“div.panel_buttonGal”).click(function(){
$(“div#panelGal”).animate({
height: “150px”
})
.animate({
height: “140px”
}, “slow”);
$(“div.panel_buttonGal”).toggle();
$(“div#panelGal”).addClass(“open”);
});
$(“div#hide_buttonGal”).click(function(){
$(“div#panelGal”).animate({
height: “0px”
}, “slow”);
$(“div#panelGal”).removeClass(“open”);
});
$(“div.panel_buttonAbt”).click(function(){
$(“div#panelGal.open”).animate({
height: “0px”
}, “fast”);
});
});
Hey, can anyone update the code.It’s cool, but It conflicts with the Cycle plug-in big time.
Or does anyone know of a similar plug-in that doesn’t conflict as much?
whay dont work this? please sent me work samles. thks.
very helpful and knowledgeable, I’m new to JQUERY but the code will help me to do short cut.
the demo don’t work and the source code is broken
code doesn’t work i ask for help for my friend. but doesn’t work as well. do you have this code turn into wordpress plugins? anyway this is a great effort! Good work!
thanks for all tuts you shared with us.
i have question about this tut. i did every steps that the author said, but i could not get the animation when i click on button.(i think i could not find jquery file or if author said i donot know how to save it.)
can you help me and tell me how to get the animation for this tut?
Hey ! It works perfect for me .. Download the demo from above and get the latest jquery from http://www.jquery.com/ and rename the file as jquery.js and place the file in the demo folder that you just downloaded (where the index.html is located). Now, see the live demo from above on this page and take a look at the source of the page (right click on the page and select “view source”) and see that the CSS included in it is something like @style.css. Here’s what you need to do to get the css :
1. On the address bar, you’ll see
http://d2o0t5hpnwv4c1.cloudfront.net/041_TopPanelWithJquery/demo/index.html
replace it with
http://d2o0t5hpnwv4c1.cloudfront.net/041_TopPanelWithJquery/demo/style.css
2. Now you see the css of the page. copy all the text and save it as style.css in the demo folder (again, the the same place where your index.html is located).
Now, open the index.html ! Voila ! It works just as you expected !!!
For further details, clarifications, suggestions, ideas or collaborations, reach me at gkthegr8(at)gmail(dot)com
A couple files are missing from the source code, namely the “style.css” file and the “jquery.js” file.
Get the CSS as follows :
1.) Type the following URL on your browser:
http://d2o0t5hpnwv4c1.cloudfront.net/041_TopPanelWithJquery/demo/style.css
2.) Now copy and paste the whole code on the page and save it as style.css (at the location where the index.html is located in the demo folder)
Get the latest jquery from:
http://www.jquery.com/ and save it as jquery.js, again at the location where the index.html is located in the demo folder.
Now open the index.html. VOILA ! It works !
For any queries, suggestions, comments, ideas or collaborations, please feel to contact me at :
gkthegr8(at)gmail(dot)com
I will try to reply asap, allow a max of 6 hrs ! !
It’s magic !!
Thanks for this tuto !
Note: Your source zip doesn’t have the style.css, javascript.js or jquery.js included.
Read other comments they show the solution, live the one above you.
cheers
$(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”);
});
});
theres a problem with this code that u have provided can u help me pleaseeeee
The code is working, if need help let me know.
That part of the code is inside the javascript.js and its called on the index file
is there a way to specify a link that the user is taken to if they have javascript turned off??
otherwise if they do, there would be no way of accessing the info in the panel!!
cheers
craig
I would have used this but I didnt because the panel is ALREADY OPEN when you go to the page. If it was one that was already closed, I would have used it.. Oh well.
thank you a lot for this tutorial it was so helpful for me……
Your Source didnt work….
It’s because you don’t have Javascript and jquery
”
@import url(style.css);
“
Does anyone know of a If statement to use, so if i’m using two buttons with panels and only want to allow the user to open one panel at a time… any ideas of how this can be done? anyone? Javascript guru’s?