Twitter Like Login Screen

June 7th, 2010 by aditia rahman / No Comments  

     

I like twitter, almost everyday I connected to twitter, in this post I created the Twitter Like Login Screen, not really the same but at least as similar as Twitter (without server side processing). Let’s start, first we have to prepare the folder, you can see the image on the right, that how my folder look like and as usual I’m using Netbeans so not to worry about the nbproject folder, the html, javascript and css code will be posted here, and you don’t worry about the image because I include it in downloadable source code and then create the html code first

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Twitter Like Login Screen</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="divcontent">
    <div id="divlink">
        <span class="spLeft">Have an account?</span>
        <span class="spUnclicked" id="spLink">
            <a href="" id="textSignin" class="text_link" onclick="showHideLogin(); return false;">
                Sign In
            </a>
        </span>
    </div>

    <div style="clear:both;"></div>

    <div id="divlogin">
        <form action="" method="post">
            <label for="username" class="formLabel">Username or Email</label>
            <input type="text" name="username" class="field"/>
            <label for="password" class="formLabel">Password</label>
            <input type="password" name="passord" class="field"/>
            <div class="submit">
                <input type="submit" value="Sign In" id="signin_submit"/>
                <input type="checkbox" name="remember" id="remember"/>
                <label for="remember" id="labelInline">Remember Me</label>
            </div>
            <div class="forgot">
                <a href="" class="link_bottom">Forgot Password?</a>
                &nbsp;
                <a href="" class="link_bottom">Forgot Username?</a>
            </div>
            <div class="forgot">
                <a href="" class="link_bottom">Already using Twitter on your phone?</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

To separate the div Sign In link and the div login i’m using another div with css style clear:both because I want to put the login screen exactly on the bottom of div Sign In, the real twitter is using absolute position for login form, because they have the content to show, but not here. So the complete css file look like this

* { font-family: "Arial" }
body {
    background: #dbe9ed;
}
#divcontent {
    width: 800px;
    margin: 0 auto;
}
#divlink {
    text-align: left;
    float: right;
    font-size: 11px;
    background: #fff;
    padding: 5px 0 5px 8px;
    color: #666;
    /* mozilla firefox */
    -moz-border-radius: 5px;
    /* google chrome & safari*/
    -webkit-border-radius: 5px;
    /* opera */
    border-radius: 5px;
}
#divlink a {
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    padding: 0 18px 0 0;
}
.spLeft {
    float: left;
}
.spUnclicked {
    padding: 5px 7px 5px 5px;
    margin-left: 5px;
    /* mozilla firefox */
    -moz-border-radius: 5px;
    /* google chrome & safari*/
    -webkit-border-radius: 5px;
    /* opera */
    border-radius: 5px;
}
.spClicked {
    padding: 5px 7px 5px 5px;
    background: #ccc;
    margin-left: 5px;
    /* mozilla firefox */
    -moz-border-radius: 5px 5px 0 0;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    /* google chrome & safari*/
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 3px 3px;
    /* opera */
    border-radius: 5px 5px 0 0;
    box-shadow: 0px 3px 3px #666666;
}
.text_link {
    padding-right: 15px;
    color: #7fb3cc;
    background: url(../images/toggle_down_dark.png) no-repeat scroll right center;
}
.text_link_clicked {
    color: #000;
    background: #ccc;
    background: url(../images/toggle_up_dark.png) no-repeat scroll right center #ccc;
}
#divlogin {
    float:right;
    background: #fff;
    border: 5px solid #ccc;
    background-color: #ffffff;
    /* mozilla firefox */
    -moz-border-radius: 5px 0 5px 5px;
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    /* google chrome & safari*/
    -webkit-border-radius: 5px 0 5px 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 3px 3px;
    /* opera */
    box-shadow: 0px 3px 3px #666666;
    border-radius: 5px 0 5px 5px;
}
#divlogin form {
    margin: 0;
    padding: 5px 8px;
}
.formLabel {
    font-size: 11px;
    color: #666;
    display: block;
    padding: 10px 0 7px 0;
}
#divlogin {
    width: 245px;
    display: none;
}
#divlogin form .field {
    border: 1px solid #ddd;
    padding: 5px;
    width: 218px;
}
#signin_submit {
    background: url(../images/bg-btn-blue.png) repeat-x scroll 0 0 #3399dd;
    /* mozilla firefox */
    -moz-border-radius: 4px 4px 4px 4px;
    /* google chrome & safari*/
    -webkit-border-radius: 4px;
    /* opera */
    border: 1px solid #3399dd;
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
    margin: 0 5px 0 0;
    padding: 4px 10px 5px;
    text-shadow: 0 -1px 0 #3399dd;
}
#signin_submit:focus, #signin_submit:hover {
    cursor: pointer;
    background-position: 0 -5px;
}
#signin_submit:active {
    background-image: none;
}
.submit {
    color: #666;
    font-size: 11px;
    margin: 12px 0 12px 0;
}
.submit #remember {
    position: relative;
    top: 3px;
}
.submit .labelInline {
    display: inline;
}
.link_bottom {
    color: #CC3366;
    font-size: 11px;
    text-decoration: none;
}
.link_bottom:hover {
    text-decoration: underline;
}
.forgot {
    margin-bottom: 5px;
}

As you can see on the code above the css code to creating rounded corner and shadow is different, it depend on the browser engine, but it wont work on IE, the “Sign In” button style I copied from the Twitter site it self. There are two unused css style like .spClicked and .text_link_clicked, but they will be used when we call using javascript, and here the complete javascript code

document.onclick = check;
function Flag() {
    this.init = 1;
}

flag = new Flag;

function check(e) {
    var target = (e && e.target) || (event && event.srcElement);
    var objDiv = document.getElementById('divlogin');
    var objLink = document.getElementById('textSignin');
    var objSpan = document.getElementById("spLink");
    var parent = checkParent(target);
    if (flag.init == 1) {
        if (parent) {
            objDiv.style.display = 'none';
            objLink.className = 'text_link';
            objSpan.className = 'spUnclicked';
        }
        if (target == objLink) {
            objDiv.style.display = 'block';
            objLink.className = 'text_link_clicked';
            objSpan.className = 'spClicked';
        }
    }
    flag.init = 1;
}

function checkParent(t) {
    while (t.parentNode) {
        if (t == document.getElementById('divlogin')) {
            return false;
        }
        t = t.parentNode;
    }
    return true;
}

function showHideLogin() {
    var display = document.getElementById("divlogin").style.display;
    if (display == 'none' || display == '') {
        document.getElementById("divlogin").style.display = 'block';
        document.getElementById("textSignin").className = 'text_link_clicked';
        document.getElementById("spLink").className = 'spClicked';
        flag.init = 1;
    } else {
        document.getElementById("divlogin").style.display = 'none';
        document.getElementById("textSignin").className = 'text_link';
        document.getElementById("spLink").className = 'spUnclicked';
        flag.init = 0;
    }
}

The last file is the javascript, so the javascript code have to handle the users event this is what I have try with the real twitter, the login form shows when users clicks on the sign in link (so now the login form is visible). When the login form is visible there is two event that can close the login screen, first when users click outside the form, and second when users click again the sign in link (like toggle button). Now you can see the two css class .spClicked and .text_link_clicked are used when the login form visible. Here the result

DOWNLOAD SOURCE

.spClicked.
        submit to reddit Delicious

No Comment Leave a Comment Subscribe RSS

Leave a Comment