Learning jQuery: Click Event with Locked Page likes Mac

written by aext on August 28, 2009 in Javascript with 32 comments

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.

tags: Click CSS & XHTML Event HTML Javascript jQuery Learning jQuery MAC Modal Window Web Design

---

Related Articles