Techumber
Home Blog Work

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).

Demo Download

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;
}