Learning jQuery: Click Event with Locked Page likes Mac

by Lam Nguyen on Aug 28
25 Comments

Spread it!

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.

Author: Lam Nguyen

I'm Lam Nguyen, a 21 year old web developer writing about everything related to web design. I am owner of AEXT.NET and WhoFreelance.com Web Community News. You can catch me on twitter or follow AEXT.NET.

Posted in: Tutorials
Tags: Click, CSS & XHTML, Event, HTML, Javascript, jQuery, Learning jQuery, MAC, Modal Window, Web Design

25 User Comments

Alex 29. Aug, 2009 at 3:54 am #

Niccceee job! Thanks

(first!!)

Reply
sdarknot 29. Aug, 2009 at 9:36 am #

un buen aporta man gracias

Reply
- Lam Nguyen 29. Aug, 2009 at 9:40 am #
  
  I just know the last word in your comment
  Gracias
  
  Reply
wow 30. Aug, 2009 at 12:14 pm #

what a loser, dont like hearing the truth?

Reply
- Lam Nguyen 30. Aug, 2009 at 1:53 pm #
  
  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.
  
  Reply
fwolf 30. Aug, 2009 at 6:04 pm #

The term you were searching for while writing the title of this post is “Modal window“.

cu, w0lf.

Reply
- Lam Nguyen 30. Aug, 2009 at 7:20 pm #
  
  oh, it’s really my abstraction. Thank you wOlf!
  
  Reply
Ian 30. Aug, 2009 at 10:23 pm #

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.

Reply
- Lam Nguyen 30. Aug, 2009 at 10:36 pm #
  
  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.
  
  Reply
- Lam Nguyen 30. Aug, 2009 at 10:41 pm #
  
  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!
  
  Reply
Adeline 30. Aug, 2009 at 11:51 pm #

Thanks for the tut, looking forward to the next part

Reply
- Lam Nguyen 05. Sep, 2009 at 10:07 am #
  
  Next part is available now, hope see you there!
  
  Reply
David B. 27. Sep, 2009 at 10:44 pm #

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.

Reply
serg 29. Nov, 2009 at 9:02 am #

do not work

action=”http://mysite/auth.php?auth=login”

when press submint bootton

whiy ???????

Reply

Trackbacks/Pingbacks

Learning jQuery: Click Event with Locked Page likes Mac | Aphichat.com | webdesigner's blog - 29. Aug, 2009
[...] http://aext.net/2009/08/learning-jquery-click-event-with-locked-page-likes-mac/ [...]
Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET - 29. Aug, 2009
[...] Read more here: Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET [...]
Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET « Netcrema - 29. Aug, 2009
[...] Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NETaext.net [...]
popurls.com // popular today - 29. Aug, 2009
popurls.com // popular today…

story has entered the popular today section on popurls.com…
Trackbacks for Learning jQuery: Click Event with Locked Page likes Mac on Topsy.com - 29. Aug, 2009
[...] Learning jQuery: Click Event with Locked Page likes Mac [...]
CSS Brigit | Learning jQuery: Click Event with Locked Page likes Mac - 29. Aug, 2009
Learning jQuery: Click Event with Locked Page likes Mac…

A tutorial how to work with jQuery and make up the login form likes Mac DeskShade Locked page. This tutorial is on the Learning jQuery series.

…
Twitted by NicholasPatten - 30. Aug, 2009
[...] This post was Twitted by NicholasPatten [...]
Click Event with Locked Page likes Mac | AJAX Collection & Research - 02. Sep, 2009
[...] check it out [...]
Learning jQuery: Submit form PHP Mac style Modal window | AEXT.NET - 05. Sep, 2009
[...] read it first before continue because I’m not gonna talk about that again. Check this post Learning jQuery: Click Event with Locked Page likes Mac! then come back [...]
» Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET - Yee Torrents News 4 - 27. Sep, 2009
[...] Source:Learning jQuery: Click Event with Locked Page likes Mac | AEXT.NET [...]
Learning jQuery: Optimize Using Modal Window or Dialog Box in JQuery UI | AEXT.NET - 18. Dec, 2009
[...] of AEXT.NET and also Whofreelance Web Community News. You can also catch me on twitter. In the post that I published couple of months ago, I explained how to create a Modal window by using jQuery but [...]

Learning jQuery: Click Event with Locked Page likes Mac

1. Create the background

2. Always Center Position

3. Make Up the Form

4. Working with Javascript

Conclusion:

Related Posts

Author: Lam Nguyen

25 User Comments

Trackbacks/Pingbacks

Leave a Reply

About AEXT.NET

Categories

Friends

WHOFREELANCE

1080px wide 18 Column Grid PSD

30 Twitter Hacks and Plugins to Spice Up Your Wordpress Blog

27 Beautiful Inspiring Header Designs

Common questions of a drupal beginner

Web Hosting Layout Tutorial in Adobe Photoshop

Interview with Photomanipulation Master, Erik Johansson

43 In-Browser Web Development Tools That Will Make You A Better Web Developer

50+ Essential Techniques and Tools for Visualizing your Data

Design a clean business layout in Photoshop

Fun Online Tools for Freelancers

Contribute To AEXT.NET

Latest Tweets