Super Animated AJAX Login using jquery
Published on May 21, 2013
Login into an account without page refresh has become very common in almost all websites. Today I will share you same concept script with you. Besides Log In functionality, I added a nice animation. When we click on click here to Log IN button and nice animated popup will appear and you can log in there. I also used custom HTML5 Validations(click here for more).
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="http:/www.techumber.com">
<h1>Techumber<h1>
</a>
</div>
<div id="login-box">
<button id="loginitBtn">+Click Here to Log in</button>
</div>
<p>Use Test credentials User:"user" Password:"pass"</p>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="process.js"></script>
</body>
</html>Process.js
$(function() {
var o = {
popupDiv: "loginDiv"
};
var SuperLogin = function() {
$("#" + o.popupDiv + "Form").html(
'<img src="loader.gif style="text-align:center;" />'
);
this.login = function(dataString) {
$.ajax({
type: "POST",
url: "login.php",
data: dataString,
success: function(response) {
$("#" + o.popupDiv + "Form").html(response);
}
});
return false;
};
//call mbox
this.PopBox = function(e, $this) {
var l = $($this).offset().left;
var t = $($this).offset().top;
$("body").append('<div id="mask" />');
$("#mask").css({
position: "fixed",
left: "0",
top: "0",
"background-color": "#000",
opacity: "0.5 !important",
display: "none"
});
$("body").append('<div id="' + o.popupDiv + '" />');
$("#" + o.popupDiv).css({
position: "absolute",
border: "5px solid rgba(51, 51, 51,1.2)",
width: "300px",
"z-index": "999",
"border-radius": "5px",
padding: "20px",
"background-color": "#fff",
left: l,
top: t,
opacity: "0"
});
$("#" + o.popupDiv).append('<div class="close" />');
$("#" + o.popupDiv + " .close").css({
background:
"url(//labs.techumber.com/LABS/js/FbSubscribe/x.png) no-repeat",
width: "25px",
height: "29px",
display: "inline",
"z-index": "3200",
position: "absolute",
top: "-15px",
right: "-16px",
cursor: "pointer"
});
$("#" + o.popupDiv).append(
'<form id="' +
o.popupDiv +
'Form" method="post" action="login.php">' +
'User: <input type="text" name="user" id="user" required="required" />' +
'Password: <input type="password" name="pass" id="pass" required="required"/>' +
'<input type="submit" value="Log in" id="Loginsbt">' +
"</form>"
);
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$("#mask").css({
width: maskWidth,
height: maskHeight
});
//transition effect
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow", 0.5);
var wid = "600px";
//Simple Zoom animation
$($this).css({
position: "fixed",
height: "60px",
width: 300,
top: t,
left: l
});
$("#" + o.popupDiv).animate(
{
width: wid,
opacity: "1",
left: l - 150,
top: "100px"
},
1000
);
$($this).animate(
{
position: "fixed",
width: wid,
left: l - 150,
top: "100px"
},
1000
);
};
};
//Events and Excuting Plugin
//***************************//
var sl = new SuperLogin();
//will triger on crop button click
$("body").on("submit", "#" + o.popupDiv + "Form", function(e) {
//Cancel the link behavior
sl.login($(this).serialize());
e.preventDefault();
});
$("#loginitBtn").click(function(e) {
sl.PopBox(e, $(this));
});
$("body").on("click", "#" + o.popupDiv + " .close", function(e) {
//Cancel the link behavior
e.preventDefault();
$("#mask").remove();
$("#" + o.popupDiv).remove();
$("#loginitBtn").css({
position: "relative",
height: "60px",
width: "300px",
top: "0",
left: "0"
});
});
$("body").on("click", "#mask", function(e) {
//Cancel the link behavior
e.preventDefault();
$("#mask").remove();
$("#" + o.popupDiv).remove();
$("#loginitBtn").css({
position: "relative",
height: "60px",
width: "300px",
top: "0",
left: "0"
});
});
});login.php
<?php
if ($_POST)
{
extract($_POST);
// Retrieving username and password form DB
if ($user == "user" && $pass = "pass") echo "<h2 style='color:green'>Success!</h2>";
else echo "<h2 style='color:red'>Please Enter Correct credentials!</h2>";
}
CSS
body {
font: 16px/24px "Myriad Pro", Georgia, san-serif;
}
.container {
width: 940px;
margin: 0 auto;
}
a {
text-decoration: none;
}
.logo {
float: left;
}
.header {
border: 1px solid #ddd;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
margin-bottom: 20px;
padding: 9px;
width: 900px;
margin: 0 auto;
height: 100px;
}
input,
button {
padding: 5px 20px;
background: #333;
color: #fff;
border: 0;
border-radius: 4px;
outline: none;
}
h1 {
color: #0089ca;
}
#login-box {
width: 300px;
height: 60px;
text-align: center;
margin: 0 auto;
}
#login-box button {
height: 100%;
width: 100%;
}
::-webkit-validation-bubble-message {
color: #eee;
background: #000;
border: 1px solid #a90000;
}
::-webkit-validation-bubble-arrow {
background: #000;
border: 1px solid #a90000;
}