html - Manage signup, login and forgot password divs with jQuery -
i want create animated login, sigup , forgot password jquery.
i found idea in http://vox.io
i created hard work still unable show div of forgot password.
i have 3 div : login, signup , forgot ;
here's full code :
<!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".login").hide(); $(".forgot").hide(); $(".show_hide").show(); $('.show_hide').click(function(){ $(".login").slidetoggle("slow"); }); $('.show_hide').click(function(){ $(".signup").slidetoggle("slow"); }); }); </script> <style type="text/css"> .login, .signup, .forgot { height:300px; width:400px; padding:20px; margin-top:10px; } .show_hide { display:none; } </style> </head> <body> <div class="signup"> <form id="login_voxio" method="post" action="http://vox.io/auth.localauthentication/authenticate"> <div> <h2>new vox.io? <a href="#" class="show_hide">sign up</a></h2> <h3>login</h3> </div> <fieldset> <div> <span class="input">username or email</span> <input class="input" type="text" id="username" name="username" value="" autocomplete="off" /> </div> <div class="l"> <span class="input">password</span> <input class="input" type="password" id="password" name="password" value="" autocomplete="off" /> </div> <input type="submit" class="mac_arrow" id="signin" name="signin" value="sign in" /> <input type="hidden" id="type" name="type" value="local" /> </fieldset> <a href="#" class="show_hide">forgot password?</a> </form> <div class="forgot" id="#forgot"> <form id="login_forgot" method="post" action="http://vox.io/authentication/forgot"> <div> <h2>new vox.io? <a class="show_hide">sign up</a></h2> <h3>your recovery email address</h3> </div> <fieldset> <div class="l"> <span class="input">email address</span> <input class="input" type="text" id="femail" name="femail" value="" /> </div> <input class="mac_arrow" type="submit" id="send-instructions" name="send-instructions" value="send instructions"> </fieldset> </form> </div> </div> <div class="login"> <form id="login_register" method="post" action="http://vox.io/signup/saveaccount"> <div> <h2>already member? <a href="#" class="show_hide">log in</a></h2> <h3>sign up</h3> </div> <fieldset> <div class="login_register_anim"> <span class="input">full name</span> <input class="input" type="text" id="name" name="acc.name" value="" maxlength="36" autocomplete="off" /> </div> <div> <span class="input">username</span> <input class="input" type="text" id="username_register" name="acc.username" value="" maxlength="16" autocomplete="off" /> </div> <div> <span class="input">password</span> <input class="input" type="password" id="password1" name="acc.password" value="" autocomplete="off" /> </div> <div class="login_register_anim"> <span class="input">email address</span> <input class="input" type="text" id="email" name="acc.emails[0].email" value="" autocomplete="off" /> </div> <div class="l login_register_anim"> <select class="select selectbox" id="country" name="acc.country"> <option value="af" title="+93" class="af">afghanistan</option> <option value="al" title="+355" class="al">albania</option> <option value="dz" title="+213" class="dz">algeria</option> <option value="as" title="+1684" class="as">american samoa</option> <option value="ad" title="+376" class="ad">andorra</option> <option value="tn" title="+216" class="tn" selected="selected">tunisia</option> <option value="tr" title="+90" class="tr">turkey</option> <option value="tm" title="+993" class="tm">turkmenistan</option> <option value="tc" title="+1649" class="tc">turks , caicos islands</option> <option value="tv" title="+688" class="tv">tuvalu</option> </select> </div> <input class="login_register_anim button_blue" type="submit" id="register_submit" name="register_submit" value="sign up" /> </fieldset> </form> </div> </body> </html> and how can change animation (like fade in) ??
on site liked, there non-obfuscated file site uses achieve functionality want (http://vox.io/public/a0ea2e1a63/static/js/authentication/login.js)
so have javascript of working example. start over!
just use source code site example. should easy reverse engineer - start scratch on sample app... , move key parts of source code app. piece piece. test in iterations.
1) add form 2) add animation 3) etc.
in particular search .animate , watch how doing it:
here code:
(function($) { $('.selectbox').customstyle(); $('#username_register').blur(function() { var value = $.trim($(this).val()); if (value !== '') { $('#username').attr('value', value).blur(); } }); $('#username').blur(function() { var value = $.trim($(this).val()); if (value !== '') { $('#username_register').attr('value', value).prev().hide(); } }); /* * landing animations */ var forms = $('#landing_forms > div > form'); var animstarted = false; // animation signup process vox.io login $('#change_login').click(function(ev) { if (animstarted === true) { return false; } animstarted = true; // hide fields $('> div, > fieldset, > a', '#login_voxio').css('opacity', 0); $('#login_voxio #username').prev().css('opacity', 0); // show form $('#login_voxio').show(); // hide h1 , h2 $('> div', '#login_register').animate({ 'opacity': 0 }, 'fast', function() { var = 1, x = $('.login_register_anim').length; // hide input fields $('.login_register_anim').animate({ 'opacity': 0 }, 'fast', function() { if (i >= x) { // push username , password $('#name').parent().slideup('fast', function() { // hide label $('#login_register #username_register').prev().animate({ 'opacity': 0 }, 'fast'); // show label $('#login_voxio #username').prev().animate({ 'opacity': 1 }, 'fast', function() { // hide form $(forms).hide(); // show form $('#login_voxio').show(); $('#login_voxio #username').focus(); // show , animate fields $('> fieldset', '#login_voxio').css('opacity', 1); $('> a', '#login_voxio').animate({ 'opacity': 1 }, 'fast', function() { animstarted = false; }); }); }); } = + 1; }); }); // show h1 , h2 $('> div', '#login_voxio').animate({ 'opacity': 1 }, 'normal'); }); // animation vox.io login signup process $('#change_signup').click(function(ev) { if (animstarted === true) { return false; } animstarted = true; // hide fields $('> div', '#login_register').css('opacity', 0); $('> a', '#login_voxio').animate({ 'opacity': 0 }, 'fast'); // show form $('#login_register').show(); // hide h1 , h2 $('> div', '#login_voxio').animate({ 'opacity': 0 }, 'normal', function() { // hide label $('#login_voxio #username').prev().animate({ 'opacity': 0 }, 'fast'); $('> fieldset', '#login_register').css('opacity', 1); // show label $('#login_register #username_register').prev().animate({ 'opacity': 1 }, 'fast', function() { // hide form $(forms).hide(); // show form $('#login_register').show(); $('#name').parent().slidedown('fast', function() { var = 1, x = $('.login_register_anim').length; $('.login_register_anim').animate({ 'opacity': 1 }, 'fast', function() { if (i >= x) { animstarted = false; } = + 1; }); }); }); }); // show h1 , h2 $('> div', '#login_register').animate({ 'opacity': 1 }, 'normal'); }); // animation vox.io login social login $('#change_social').click(function(ev) { if (animstarted === true) { return false; } animstarted = true; // hide fields $('> div, > a', '#login_social').css('opacity', 0); $('> fieldset', '#login_social').css('opacity', 1); $('#landing_forms > div > form img').css({ 'top': 20, 'left': 20, 'width': 0, 'height': 0 }); // show form $('#login_social').show(); $('> a, > fieldset', '#login_voxio').animate({ 'opacity': 0 }, 'fast'); // hide h1 , h2 $('> div', '#login_voxio').animate({ 'opacity': 0 }, 'normal', function() { $('> a', '#login_social').animate({ 'opacity': 1 }, 'fast'); $('> div', '#login_social').animate({ 'opacity': 1 }, 100, function() { // hide forms $(forms).hide(); // show form $('#login_social').show(); var x = $('#landing_forms > div > form ul li img').length - 1; $.each($('#landing_forms > div > form ul li img'), function(i, img) { settimeout(function() { $(img).animate({ 'width': 43, 'height': 43, 'top': 0, 'left': 0 }, 300, 'easeoutcubic', function() { $(this).animate({ 'width': 41, 'height': 41, 'top': 0, 'left': 0 }, 250, 'easeoutcubic', function() { if (i >= x) { $('> div, > a, > fieldset', '#login_voxio').css('opacity', 1); animstarted = false; } }); }); }, * 80); }); }); }); // show h1 , h2 $('> div', '#login_social').animate({ 'opacity': 1 }, 'normal'); }); // animation social login signup process $('#change_signup_social').click(function(ev) { if (animstarted === true) { return false; } animstarted = true; // hide fields $('> div, > fieldset', '#login_register').css('opacity', 0); $('#login_register #username_register').prev().css('opacity', 1); // show form $('#login_register').show(); // hide fields $('> a, > fieldset', '#login_social').animate({ 'opacity': 0 }, 'fast'); // hide h1 , h2 $('> div', '#login_social').animate({ 'opacity': 0 }, 'normal', function() { $('#name').parent().show(); $('.login_register_anim').css('opacity', 1).show(); $('> fieldset', '#login_register').animate({ 'opacity': 1 }, 'fast', function() { // hide forms $(forms).hide(); // show form $('#login_register').show(); animstarted = false; }); }); // show h1 , h2 $('> div', '#login_register').animate({ 'opacity': 1 }, 'normal'); }); // animation social login vox.io login $('#change_voxio').click(function(ev) { if (animstarted === true) { return false; } animstarted = true; // hide fields $('> div, > a, > fieldset', '#login_voxio').css('opacity', 0); // show form $('#login_voxio').show(); // hide fields $('> a, > fieldset', '#login_social').animate({ 'opacity': 0 }, 'fast'); // hide h1 , h2 $('> div', '#login_social').animate({ 'opacity': 0 }, 'normal', function() { // hide forms $(forms).hide(); // show form $('#login_voxio').show(); $('> a', '#login_voxio').animate({ 'opacity': 1 }, 'fast'); $('> fieldset', '#login_voxio').animate({ 'opacity': 1 }, 'fast', function() { animstarted = false; }); }); // show h1 , h2 $('> div', '#login_voxio').animate({ 'opacity': 1 }, 'normal'); }); // animation vox.io login forgot password process $('#change_forgot').click(function(ev) { if (animstarted === true) { return false; } animstarted = true; // hide fields $('> div, > fieldset, > p, #send-instructions', '#login_forgot').css('opacity', 0); $('#login_forgot #femail').prev().css('opacity', 0); // show form $('#login_forgot').show(); // hide fields $('> a', '#login_voxio').animate({ 'opacity': 0 }, 'fast'); // hide h1 , h2 $('> div', '#login_voxio').animate({ 'opacity': 0 }, 'normal', function() { $('#password').parent().slideup('fast', function() { $('#send-instructions').css('opacity', 1); $('> p', '#login_forgot').animate({ 'opacity': 1 }, 'fast'); $('#signin').animate({ 'bottom': 21 }, 50, function() { $('> fieldset', '#login_forgot').css('opacity', 1); // hide forms $(forms).hide(); // show form $('#login_forgot').show(); $('#login_forgot #femail').focus(); $('#signin').css('bottom', 8); // hide label $('#login_voxio #username').prev().animate({ 'opacity': 0 }, 'fast'); // show label $('#login_forgot #femail').prev().animate({ 'opacity': 1 }, 'fast', function() { animstarted = false; }); }); }); }); // show h1 , h2 $('> div', '#login_forgot').animate({ 'opacity': 1 }, 'normal'); }); // animation forgot password process signup process $('#change_signup_forgot').click(function(ev) { if (animstarted === true) { return false; } animstarted = true; // show fields $('#name').parent().show(); $('#password').parent().show(); $('> fieldset > div, #register_submit', '#login_register').css('opacity', 1); $('#login_register #username_register').prev().css('opacity', 1); // hide fields $('> div, > fieldset', '#login_register').css('opacity', 1); // show form $('#login_register').show(); $('> p, > fieldset', '#login_forgot').animate({ 'opacity': 0 }, 'fast'); // hide h1 , h2 $('> div', '#login_forgot').animate({ 'opacity': 0 }, 'normal', function() { // hide forms $(forms).hide(); // show form $('#login_register').show(); $('> fieldset', '#login_register').animate({ 'opacity': 1 }, 'fast', function() { animstarted = false; }); }); // show h1 , h2 $('> div', '#login_register').animate({ 'opacity': 1 }, 'normal'); }); /* * end of animations :) * other stuff have handle */ // sign process var profile_form_data = function(input, status, pending) { $(input).data({ 'status': status, 'pending': (pending !== undefined ? pending : false) }); }; $.each($('#login_register input.input'), function(i, input) { profile_form_data(input, false, false); }); var form_validators = { email: function(value) { var email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/; return email.test(value); }, username: function(input, value) { profile_form_data(input, false); if ($(input).data('status') === false && $(input).data('pending') === false) { profile_form_data(input, false, true); var div = $(input).parent(); div.find('p').remove(); $(input).removeclass('valid invalid'); if (0 < value.length && value.length < 3) { $(input).addclass('invalid'); div.append('<p>username requires @ least 3 characters.</p>'); } else { $.ajax({ 'url': voxiourls.ajaxvalidationusername, 'cache': false, 'data': { 'username': value }, 'success': function(data) { if (data === 'true') { profile_form_data(input, true); $(input).addclass('valid'); div.append('<p class="success">success</p>'); if ($('#login_register').data('submitted') === true) { $('#login_register').data('submitted', false).submit(); } } else if (data === 'false') { profile_form_data(input, false); $(input).addclass('invalid'); div.append('<p>huh, username in use.</p>'); } else if (data === 'short') { profile_form_data(input, false); $(input).addclass('invalid'); div.append('<p>username requires @ least 3 characters.</p>'); } } }); } } } }; // name // var name_value = $.trim($('#login_register #name').val()); $('#login_register #name').blur(function(e) { var value = $.trim($(this).val()); var div = $(this).parent(); div.find('p').remove(); profile_form_data(this, false); $(this).removeclass('valid invalid'); if (value !== '') { $(this).addclass('valid'); div.append('<p class="success">success</p>'); profile_form_data(this, true); var v = $.trim($('#login_register #username_register').val()); if (v === '' && value.length >= 3) { $.ajax({ 'url': voxiourls.ajaxrecommendusername, 'cache': false, 'data': { 'name': value }, 'datatype': 'json', 'success': function(response) { if (response.username !== '' && $.trim($('#login_register #username_register').val()) === '') { $('#login_register #username_register').attr('value', response.username).keyup(); } } }); } } }).focus(function() { $(this).removeclass('valid invalid').parent().find('p').remove(); profile_form_data(this, false); }); // email $('#login_register #email').blur(function(e) { var value = $.trim($(this).val()); var div = $(this).parent(); div.find('p').remove(); $(this).removeclass('valid invalid'); profile_form_data(this, false); if (form_validators.email(value) === true) { $(this).addclass('valid'); div.append('<p class="success">success</p>'); profile_form_data(this, true); } else if (value !== '') { $(this).addclass('invalid'); div.append('<p>this not appear valid email.</p>'); } }).focus(function() { profile_form_data(this, false); }); // password $('#login_register #password1').blur(function(e) { var value = $.trim($(this).val()); var div = $(this).parent(); div.find('p').remove(); profile_form_data(this, false); $(this).removeclass('valid invalid'); if (value !== '') { if (value.length < 4) { $(this).addclass('invalid'); div.append('<p>too short. enter @ least 4 characters. it’s safer.</p>'); } else { $(this).addclass('valid'); div.append('<p class="success">success</p>'); profile_form_data(this, true); } } }).focus(function() { $(this).removeclass('valid invalid').parent().find('p').remove(); profile_form_data(this, false); }); // username $('#login_register #username_register').keyup(function(ev) { var div = $(this).parent(); var p = div.find('p'); if (p.hasclass('loading') === false) { p.remove(); } $(this).removeclass('valid invalid'); }).blur(function(e) { $(this).removeclass('valid invalid'); this.value = $.trim(this.value.replace(/[^a-za-z0-9\_\-]/ig, '')); if ($(this).val() !== '' && $(this).data('status') === false && $(this).data('pending') === false) { $(this).parent().append('<p class="loading">loading ...</p>'); form_validators.username(this, $(this).val()); } else if ($(this).val() !== '') { $(this).addclass('valid'); } }).focus(function() { $(this).removeclass('valid invalid').parent().find('p').remove(); profile_form_data(this, false); }); $('#login_register').data('submitted', false); $('#login_register').ajaxform({ 'beforeserialize': function() { var nextstep = false, emptyinput = null; $.each($('#login_register input.input'), function(i, input) { var value = $.trim($(input).attr('value')); if (value !== '') { if ($(input).data('status') === false) { nextstep = false; if ($(input).data('pending') === true) { $('#login_register').data('submitted', true); return false; } else if ($(input).data('status') === false) { $('html, body').animate({ 'scrolltop': $(input).position().top }, 250, function() { $(input).focus(); }); return false; } } nextstep = true; } else { if (emptyinput === null) { emptyinput = input; nextstep = false; return false; } } }); if (emptyinput !== null && nextstep === false) { $('html, body').animate({ 'scrolltop': $(emptyinput).position().top }, 250, function() { $(emptyinput).focus(); }); } return nextstep; }, 'datatype': 'json', 'success': function(response) { if (response.status === false && response.errors !== undefined) { $.each(response.errors, function(i, error) { var input = $('input[name="' + error.key + '"]'); if (input.length === 1) { input.addclass('invalid'); var div = input.parent(), message = error.message; div.find('p').remove(); try { message = input.attr('id').tolowercase() === 'email' ? 'huh, email in use.' : message; } catch (e) { } div.append('<p>' + message + '</p>'); } }); } else if (response.status === true && response.url) { voxioajax.response(response, true); } } }); // login process $('#login_voxio').submit(function() { var = this; if ($(that).data('submitted') === true) { return false; } $(that).data('submitted', true); $('#password').parent().find('p').remove(); var username = $('#username'), password = $('#password'), valid = true; if ($.trim(username.val()) === '') { username.focus(); valid = false; } else if ($.trim(password.val()) === '') { password.focus(); valid = false; } if (valid === true) { $('#signin').addclass('loading'); $.ajax({ 'url': $(this).attr('action'), 'cache': false, 'data': { 'username': username.val(), 'password': password.val() }, 'datatype': 'json', 'method': 'post', 'complete': function() { $(that).data('submitted', false); }, 'success': function(response) { $('#signin').removeclass('loading'); if (response.status === true && response.url !== undefined) { voxioajax.redirect(response.url); } else if (response.status === false && response.message !== undefined) { var div = $('#password').parent(); div.find('p').remove(); div.append('<p>' + response.message + '</p>'); } }, 'statuscode': { 302: function() { voxioajax.redirect('/'); } } }); } else { $(that).data('submitted', false); } return false; }).data('submitted', false); // forgot password $('#femail').bind('focus blur', function() { var value = $.trim($(this).val()), valid_email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/.test(value); $(this).removeclass('valid invalid'); if ($(this).data('valid') === false) { $('#login_forgot > p').remove() } if (value !== '') { if (valid_email === false) { $(this).addclass('invalid'); $('#login_forgot').append('<p class="invalid">please enter valid email address.</p>'); } else if ($(this).data('valid') === true) { $(this).addclass('valid'); } } }).data('valid', false); $('#login_forgot').ajaxform({ 'beforesubmit': function() { var value = $.trim($('#femail').val()), valid_email = /^([^@]+)@([^\s@.]([^\s@.]*\.[^\s@.]+)+)$/.test(value), valid = false; $('#femail').removeclass('valid invalid'); $('#login_forgot > p').remove() if (value !== '') { if (valid_email === false) { $('#login_forgot').append('<p class="invalid">please enter valid email address.</p>'); $('#femail').addclass('invalid').focus(); } else if (valid_email === true) { $('#send-instructions').addclass('loading'); valid = true; } } return valid; }, 'success': function(response) { $('#send-instructions').removeclass('loading'); $('#login_forgot > p').remove(); $('#femail').removeclass('valid invalid'); if (response === 'success') { $('#femail').addclass('valid'); $('#login_forgot').append('<p>recovery link sent email.</p>'); $('#femail').data('valid', true); settimeout(function() { if (animstarted === true) { return false; } animstarted = true; // hide fields $('> div, > fieldset, > a', '#login_voxio').css('opacity', 0); // show fields $('#login_voxio #username').prev().css('opacity', 1).show(); $('#password').parent().show(); // show form $('#login_voxio').show(); $('> p, > fieldset', '#login_forgot').animate({ 'opacity': 0 }, 'fast', function() { $('> p', '#login_forgot').remove(); }); // hide h1 , h2 $('> div', '#login_forgot').animate({ 'opacity': 0 }, 'normal', function() { // hide forms $(forms).hide(); // show form $('#login_voxio').show(); $('#login_voxio #username').focus(); $('> fieldset', '#login_voxio').animate({ 'opacity': 1 }, 'fast', function() { animstarted = false; $('#femail').attr('value', '').data('valid', true); }); $('> a', '#login_voxio').animate({ 'opacity': 1 }, 'fast'); }); // show h1 , h2 $('> div', '#login_voxio').animate({ 'opacity': 1 }, 'normal'); }, 2500); } else { $('#femail').addclass('invalid'); if (response === 'invalid') { $('#login_forgot').append('<p class="invalid">are sure right email address?</p>'); } else if (response === 'error') { $('#login_forgot').append('<p class="invalid">sorry error occured :( try again later.</p>'); } } } }); })(jquery); $(document).ready(function() { var check_inputs = { check: function(input) { var value = $.trim($(input).attr('value')); var span = $(input).prev(); if (value !== '') { $(span).hide(); } else { $(span).show(); } }, init: function() { $.each($('div input', '#landing_forms > div > form'), function() { check_inputs.check(this); $(this).blur(function() { check_inputs.check(this); }).keyup(function() { check_inputs.check(this); }).focus(function() { check_inputs.check(this); }); }); } }; check_inputs.init(); $('div span', '#landing_forms > div > form').click(function() { $(this).next().focus(); }); });
Comments
Post a Comment