I have a login jsp page where users can login in to my web application, I have also a sign Up form where user can register if they are not members. I'm trying to do the login and sign up forms in one JSP called login.jsp. Login part works fine However, I am unable to display the sign up form when a user clicks on the signup button. I've used the CSS from this tutorial
http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/
However, I am trying to implement the CSS in to login form and a signup form in to my JSP file I've downloaded all the CSS files required but for some reason the effects aren't taking place for when signup button is clicked
Here is the code for the login.jsp
<%@page import="java.util.Enumeration"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
<meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
<script type="text/javascript">
function submit(){
if(validateForm()) {
document.loginForm.submit();
}
}
function checkSubmit(e)
{
if(e && e.keyCode == 13)
{
document.forms[0].submit();
}
}
function validateForm()
{
var c=document.forms["loginForm"]["name"].value;
if (c==null || c=="")
{
alert("Username must be filled out");
return false;
}
var d=document.forms["loginForm"]["password"].value;
if (d==null || d=="")
{
alert("Password must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="">
<strong>« Previous Demo: </strong>Responsive Content Navigator
</a>
<span class="right">
<a href=" http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1> Login to view Cricket Fixtures and scores</h1>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="/CricketWebApplication/jsp/login.jsp" class="current-demo">Demo 3</a> <!-- index.html3 b4 need to change to login.jsp -->
</nav>
</header>
<section>
<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<form method="get" id = "loginForm" name="loginForm" action="/CricketWebApplication/LoginServlet" autocomplete="on">
<h1>Log in</h1>
<p>
<label for="username" class="uname" data-icon="u" > Your username </label>
<input id="username" name="name" onKeyPress="javascript:return checkSubmit(event)"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<input id="password" name="password" onKeyPress="javascript:return checkSubmit(event)"/>
</p>
<p class="keeplogin">
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
<label for="loginkeeping">Keep me logged in</label>
</p>
<p class="login button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
Not a member yet ?
<a href= "" class="to_register">Join us</a>
</p>
</form>
</div>
<div id="register" class="animate form">
<form action="/CricketWebApplication/SignUpServlet" autocomplete="on">
<h1> Sign up </h1>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Your username</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
</p>
<p>
<label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/>
</p>
<p>
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
</p>
<p class="signin button">
<input type="submit" value="Sign up"/>
</p>
<p class="change_link">
Already a member ?
<a href="#tologin" class="to_register"> Go and log in </a>
</p>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
In the CSS file animate-custome I am hiding the second form by setting the opasity to 0 as follows
#register{
z-index: 21;
opacity: 0;
}
The login form has a z-index of 22 and therefore I've made the register form to have a z-index of 22 to put it under the login form.
So this is what should happen : when the Join us button is clicked , this should trigger the #toregister. the animation is done by using the sibling selector ~ to find the #register element.then I used use an animation called fadeInLeft. Since the form is hidden using zero opacity, I used an animation that fades in, to make it appear.
Here's the CSS code block where this animation take place:
.animate{
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
