LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Input login details
Login
Checking
Success!
CSS
body{
  font-family: Roboto, sans-serif;
  background:#f9f9f9;
}

.textHold{
  position: relative;
  margin:30px auto;
  width:40%;
  height:20px;
  -webkit-user-select: none;
}

input[type=button]{
  background: #e6e6e6;
  color:#333;
  padding: 10px 0px;
  font-weight:600;
  border-collapse: collapse;
  width:100%;
  -webkit-appearance: none;
  border:1px solid #d0d0d0;
}
.btnHold{
  position: absolute;
  bottom:5%;
  left:40%;
  width:20%;
}
.input{
  font-size: 15px;
  width: 100%;
  height:30px;
  border:0;
  margin-bottom:10px;
  border-bottom:1px solid #cccccc;
  outline: none; 
}
.text {
  position: absolute;
  top: 40%;
  left: 0;
  font-size: 14px;
  color: #999;
  transition: 0.1s all linear;
  cursor: text;
}

.active{
  top:-15px;
  font-size:17px;
  left:0;
  padding:3px 0px;
  color:#666;
}
input[type=button]:hover{
  background: #98D99B;
  cursor: pointer;
  color:#3C823F;
}
#holder{
  border: 1px solid #cccccc;
  box-shadow: 0px 0px 5px 1px #ccc;
  background:#FFF;
  width:100%;
  height:70%;
  min-height:200px;
  max-height:300px;
  position: relative;
}
#error{
  text-align:center;
  padding:7px 0px;
  width:100%;
  border:1px solid #C25353;
  background:#C25353;
  display: none;
  color: white;
  font-size:18px;
  position: relative;
  z-index:8;
  box-shadow: 0px 2px 6px 0px #C25353;
  
}
.main{
  position: relative;
  width:80%;
  min-width:400px;
  max-width:600px;
  margin:40px auto;
}
.headDIV{
  position: absolute;
  text-align:center;
  top:0px;
  left:0px;
  background: #cccccc;
  border:1px solid #ccc;
  color:#333333;
  padding: 10px 12px 12px 0px;
  letter-spacing:1px;
  width:100px;
  font-size:20px;
}
#check,#success{
	text-align:center;
  position: absolute;
  top:0;
  left:0;
  width:100px;
  background:#ebebeb;
  display: none;
  color: #333;
  border: 1px solid transparent;
  padding: 12px 12px 12px 0px;
  z-index: 1;
  font-size:18px;
}
#success{
	color:#fff;
  background:#5FB862;
  border: 1px solid #5FB862; 
}
JS
//some login data
var loginARR = new Array();
loginARR[0] = "fred01";
loginARR[1] = "password";


$(function(){
  $('#btn').click(function(){
    var wait = Math.floor(Math.random() * 2) + 1 +"000";
    var data = new Array();
    data[0] = $.trim($('#User').val());
    data[1] =  $.trim($('#Pass').val());
    
    $('#error').slideUp(100);
    
    showCheck(wait);
    setTimeout(function(){check(data);},wait)
  });
  $('a').click(function(){
    $('.input').each(function(i){
      $(this).focus();
      $(this).val(loginARR[i]);
    });
  });
  $('.input').keyup(function(){
    $('#error').slideUp(100);
  });

  //placeholder events
  $('.text').click(function(){
    $(this).parent().children('.input').focus();
  });
  
  $('.input').focus(function() {
      $(this).parent().children('.text').addClass('active');
    });
  
   $('.input').blur(function() {
      if ($(this).val().length == 0) {
        $(this).parent().children('.text').removeClass('active');
      }
    });
});

//Display errors
function error(msg){
  $('#error').html(msg);
  $('#error').slideDown(100);
  $('.input').val("");
  $('.text').removeClass('active');

}

//Display check slide in
function showCheck(wait){
 $('#check').delay(200).animate({width:'toggle'},60).delay(wait-200).animate({width:'toggle'},60);
 $('#btn').attr('disabled','disabled');
}

//correct login
function login(){
 $('#success').animate({width:'toggle'},60);
  setTimeout(function(){$('#success').animate({width:'toggle'},60);
   $('#btn').removeAttr('disabled');                     
   },2000);
}

//Validation for form
function check(data){
  var err = 0; 
  $('.input').each(function(i){
    if(data[i] != loginARR[i]){
      err++;
    }
   }); 
   if(err > 0){
     error("Incorrect login");
     $('#btn').removeAttr('disabled');
   }else{
     login();
   }
}
Host Instantly Drag and Drop Website Builder

 

Description

Login in with slide in notifications - error, checking, success pop up. Animated text placeholders. Random waiting (check) times
Term
Wed, 11/29/2017 - 11:23

Related Codes

Pen ID
Pen ID
Pen ID