Learning jQuery: Click Event with Locked Page likes Mac
Have you ever used DeskShade in Mac? It cures boring and cluttered desktops. The feature of DeskShade that I love most is locked screen. It’s so awesome. Today, I write this tutorial to help you build the locked page for login with same feature of that DeskShade. In this tutorial, I’m using basic jQuery code. So if you’re new to jQuery, it’ll help you so much to understand Click event. Furthermore, with CSS, your login page is not gonna be boring likes before.
Part 2: Learning jQuery: Submit form PHP Mac style Modal window
Before start this tutorial, I would like to forward you a link to this demo. You can download this source code to see how simple it is.

This tutorial focus on CSS make up and Javascript. jQuery code is so basic, but at least, it’ll help you learn how work with Click event of jQuery.
1. Create the background
I’m just kidding 😉 I’m not gonna tell you how to make the background like that above. You can easily get any Mac style wallpaper by searching with google by keywords: “Mac background”, “Mac Wallpaper” … Or just use the wallpaper that I’m using. Download it. In this tutorial, I’ll help you create the full page background, always center the locked icon and the login form.
The full page background technique I love and currently use it is Perfect Full Page Background Image. Now begin with the center position.
2. Always Center Position
In this demo, you can see the locked icon and the form always get center position even when re-size the browser or displayed at any screen solution. The code should be:
HTML code:
Create the HTML page with codes same as below:
<div id="cont"> <div class="box lock"> </div> <div id="loginform" class="box form"> <h2>Authorization Required <a href="" class="close">Close it</a></h2> <div class="formcont"> <fieldset id="signin_menu"> <span class="message">Please verify your account before continue</span> <form method="post" id="signin" action=""> <label for="username">Username or email</label> <input id="username" name="username" value="" title="username" class="required" tabindex="4" type="text"> </p> <p> <label for="password">Password</label> <input id="password" name="password" value="" title="password" class="required" tabindex="5" type="password"> </p> <p class="clear"></p> <a href="#" class="forgot" id="resend_password_link">Forgot your password?</a> <p class="remember"> <input id="signin_submit" value="Sign in" tabindex="6" type="submit"> <input id="cancel_submit" value="Cancel" tabindex="7" type="button"> </p> </form> </fieldset> </div> <div class="formfooter"></div> </div> </div> <!-- Begin Full page background technique --> <div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td><img src="images/bg.jpg" alt=""/> </td> </tr> </table> </div> </div> <!-- End Full page background technique -->
CSS code:
With the Full page background technique, I have no idea. If you want your form or locked icon showed as demo is always get center of screen position even when you re-size the browser or displayed in any screen solution, you have to follow these steps below.
[+] Get the width and height of your icon and form.
I will do the center position for Login Form. The locked icon, you can do as the same.

[+] When you’ve already got the size of your form by your hand. Let’s work with CSS:
.form { display: none; width: 388px; padding: 0px; position: absolute; left: 50%; top: 50%; /* Half the width of the DIV tag which is 388 pixels */ margin-left: -194px; /* Half the height of the DIV tag which is also 216 pixels */ margin-top: -108px; margin-right: auto; margin-bottom: 0; }
CSS code for the locked icon:
.lock { margin: 0 auto; width: 198px; height: 198px; padding: 0px; background-image: url(images/lock.png); background-repeat: no-repeat; background-position: center center; position: absolute; left: 50%; top: 50%; margin-left: -99px; /* Half the width of the DIV tag which is 198 pixels */ margin-top: -99px; /* Half the height of the DIV tag which is also 198 pixels */ }
3. Make Up the Form
CSS to make up the form, make the form more attractive than before
#signin_menu { height: 160px; border:none; text-align:left; margin: 0px; color:#333; font-size:12px; background-image: url(images/form-bg.png); background-repeat: repeat-y; background-position: center bottom; overflow: hidden; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; } #signin_menu input[type=text], #signin_menu input[type=password] { float: right; -moz-border-radius:4px; -webkit-border-radius:4px; border:1px solid #C6C6C6; font-size:13px; margin:5px 0px 5px; padding:5px; width:180px; } #signin_menu p { margin:10px 0 10px; *margin:5px 0 5px; clear: both; } #signin_menu a { color:#6AC; } #signin_menu label { margin:10px 0px 0px; float: left; font-weight:normal; } #signin_menu p.remember { float: right; clear: none; padding:0; } #signin_menu a.forgot { margin-top: 10px; float: left; display: inline; line-height: 24px; color: #666666; text-decoration: none; background-image: url(images/reset.png); background-repeat: no-repeat; background-position: left center; padding-left: 18px; font-weight: bold; } .remember input { -moz-border-radius:4px; -webkit-border-radius:4px; background:#39d url('images/bg-btn.png') repeat-x scroll 0 0; border:1px solid #B5B5B5; color:#222; text-shadow: 0px 1px 1px #FFF; *filter: Shadow(Color=#FFFFFF, Direction=180, Strength=1); padding:4px 10px 5px; font-size:11px; margin: 0 0px 0 3px; font-weight:bold; } #signin_submit::-moz-focus-inner { padding:0; border:0; } #signin_submit:hover, #signin_submit:focus { background-position:0 -5px; cursor:pointer; } #focus-stealer { position: absolute; left: -9999px; }
Remember: Always set clear both for tag <p> inside the form to make it goes straight at horizontal.
IE Browser and this form
At this moment, this form display correct all browsers. But with IE, this form can not displayed correctly the rounded corner. I’m not gonna write a long tutorial to talk about this. Because there are lots of tutorials on web show you how to make a rounded corner to cross browser. In my blog, I wrote Interesting list of tutorials and codes to build a rounded corners with Javascript and CSS. Check it out.
4. Working with Javascript
Now, we’re on the important part of tutorial. The javascript I’m using is very simple. This tutorial focus on beginners. If you’re cool at jQuery, you don’t need to reed this part.
Add jQuery library to your webpage:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
You need to add toggle function to show up and hide the form when you click everywhere on your webpage:
<script type="text/javascript"> Â Â Â Â $(document).ready(function() { Â Â Â Â Â Â $(document).mouseup(function() { Â Â Â Â Â Â Â Â $("#loginform").toggle(); Â Â Â Â Â Â }); Â Â Â Â }); </script>
Do nothing, it means the form will not be hide when click or working with form.
        $("#loginform").mouseup(function() {           return false         });
Create close button at the top right of form. In this code, close button will be disable anchor and form will hide when click on close button. By the way, locked icon will fade in when this form was hide. It’s a nice effect!
       $("a.close").click(function(e){           e.preventDefault();           $("#loginform").hide();           $(".lock").fadeIn();         });
Code below will check if the form is hide or not and add the fade in/ fade out effect when the form hide and show. The second code block is used for submit and cancel button. That code help you work with button of form.
        if ($("#loginform").is(":hidden"))         {           $(".lock").fadeOut();         } else {           $(".lock").fadeIn();         }             // I dont want this form be submitted       $("form#signin").submit(function() {        return false;       });       // This is example of other button       $("input#cancel_submit").click(function(e) {           e.preventDefault();           $("#loginform").hide();           $(".lock").fadeIn();       });
Conclusion:
All the code above is just simple as click and execute. You can create same effect with many of jQuery plugins as: Boxy, LightBox, FancyBox … But with my tutorial, you’re not also create a same box effect, but also learn how click event of jQuery works.
This tutorial is a part of jQuery Learning series. I’ll continue to work on this series. Next tutorial, I’ll help you work with jQuery and PHP to submit a form.
Thanks for reading, feel free to comment if you think it’s helpful. I’ll appreciate all your suggestions.
Pingback: Learning jQuery: Click Event with Locked Page likes Mac | Aphichat.com | webdesigner's blog
Niccceee job! Thanks
(first!!)
Pingback: Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET
Pingback: Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET « Netcrema
Pingback: popurls.com // popular today
un buen aporta man gracias
I just know the last word in your comment 😉
Gracias 😀
Pingback: Trackbacks for Learning jQuery: Click Event with Locked Page likes Mac on Topsy.com
Pingback: CSS Brigit | Learning jQuery: Click Event with Locked Page likes Mac
what a loser, dont like hearing the truth?
1- You should read the book: “How to win friends and influence people†by Dale Carnegie. That’s why I deleted your comment.
2- I’m learning English Writing skill. The best why for me to improve English Writing Skill is write blog. But it does not mean I dont have the right to write blog.
3- What I wrote is my thinking. No one can be perfect at the beginning.
3- You should give me suggestion instead of abuse me.
4- Please leave a valid email address next time. If not, I’ll delete your comment.
That’s all reasons I approved your comment this time.
Pingback: Twitted by NicholasPatten
The term you were searching for while writing the title of this post is “Modal window“.
cu, w0lf.
oh, it’s really my abstraction. Thank you wOlf!
Hi Lam, I was wondering about your spelling, but if English is not your first language then, I must say you’re doing well. To help, correct the words “bakground”, “toogle” and “face” as in “fade in/ face out”.
I look forward to trying out this tutorial, hope I get it right and it all works, but I don’t see where the form results are sent or where the database with usernames/passwords is located.
Thanks again for this brilliant tutorial.
Oh my god, I can believe that I could spell incorrect these words. That mistakes caused by my typing. I’m sorry. Spell incorrect means not respect to readers. Thank you, and I’ll improve my spelling.
Oh, I almost forget one more thing.
Form submit will be mentioned in next part. Because I want to write a tut step by step, but it will be very long if I combine all the parts into one. Hope see you in the next part.
Thanks again!
Thanks for the tut, looking forward to the next part
Next part is available now, hope see you there! 😀
Pingback: Click Event with Locked Page likes Mac | AJAX Collection & Research
Pingback: Learning jQuery: Submit form PHP Mac style Modal window | AEXT.NET
Pingback: » Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET - Yee Torrents News 4
Ouch, the artifacts on the background were a bit of an eyesore on the demo. Be careful for larger monitors. Nice effect though, keep it up.
do not work
action=”http://mysite/auth.php?auth=login”
when press submint bootton
whiy ???????
Pingback: Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI | AEXT.NET
Lam. You’re good.
Pingback: Web Development & Design Tutorials – 34Ways.com » Blog Archive » A Million Track Mind: Learning How To Tame Your Creativity
thanks for informing. its truly nice post.
Pingback: wp-popular.com » Blog Archive » Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET MAGAZINE
Pingback: BEST AJAX EXAMPLES - Nagpur
Pingback: Best Tutorials for Web Development » Blog Archive » Display Delicious Bookmark Count on Your Web Page
Hi, thanks for your design, i’ve implement it into the joomla administration with some other design i prefer more. If you would like i can post it somewhere for downloading. Check it out here for example… http://www.graciebarranitra.sk/administrator