I'm creating a login page where when I clicked on the input type="submit" [I'm a Student], I want to hide the div by slideDown effect and show another div by slideUp effect. I'm a little confident about my syntax at my jQuery but when I'm trying it at my localhost/folderName, sometimes it works but not showing effect and sometimes effect shows in a blink then back-to-normal(it's like only refreshing the page)
Here are my codes.
index.php :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="signInDiv">
<h2 id="signInBanner">Sign In</h2>
<form method="post">
<table id="signInTableField">
<tr><td><input id="signInField" type="text" name="username" placeholder="Username"/></td></tr>
<tr><td><input id="signInField" type="password" name="password" placeholder="Password"/></td></tr>
<tr><td><input id="loginButton" type="submit" value="Login" name="login"/></td></tr>
</table>
<hr id="horizontalLine">
<h2 id="signUpBanner">Sign up here!</h2>
<table id="accessTypeTableButtons">
<tr>
<td><input type="submit" value="I'm a Student" class="studentRegisterButton" id="accessTypeButtons" name="studentType"/></td>
<td><input type="submit" value="I'm an Officer" class="officerRegisterButton" id="accessTypeButtons" name="officerType"/></td>
</tr>
</table>
</form>
</div>
<!--Student Register Div-->
<div id="studentRegisterDiv">
<h2 id="studentSignUpBanner">Student Registration</h2>
<form method="post" action="">
<table id="registerStudentFields">
<tr><td><input id="studentField" type="text" name="firstname" placeholder="First Name"/></td></tr>
<tr><td><input id="studentField" type="text" name="lastname" placeholder="Last Name"/></td></tr>
<tr><td><input id="studentField" type="text" name="studentnumber" placeholder="Student Number"/></td></tr>
<tr><td><input id="studentField" type="text" name="emailaddress" placeholder="Email Address"/></td></tr>
<tr><td><input id="studentField" type="text" name="username" placeholder="Username"/></td></tr>
<tr><td><input id="studentField" type="password" name="password" placeholder="Password"/></td></tr>
<tr><td><input id="studentFieldButton" type="submit" name="submitStudent" value="Submit" />
<input id="studentFieldButton" type="submit" name="cncelStudentRegister" value="Cancel" /></td></tr>
</table>
</form>
</div>
</body>
</html>
layout.css :
/*------------Sign In Div------------*/
#signInDiv {
background: white;
width: 350px;
height: 350px;
position: absolute;
top: 25%;
left: 65%;
}
table#signInTableField {
border-collapse: seperate;
border-spacing: 10px;
}
#signInBanner {
position: absolute;
left: 25px;
top: 0px;
}
#signInTableField {
position: absolute;
left: 25px;
top: 50px;
cellspacing: 10px;
}
#signInField {
width: 275px;
height: 35px;
font-size: 20px;
}
#loginButton {
width: 280px;
height: 35px;
font-size: 20px;
}
#horizontalLine {
position: absolute;
top: 210px;
left: 25px;
width: 300px;
border: 1px solid white;
}
table#accessTypeTableButtons {
border-collapse: separate;
border-spacing: 10px;
}
#accessTypeTableButtons {
position: absolute;
top: 260px;
left: 25px;
}
#signUpBanner {
position: absolute;
left: 25px;
top: 210px;
}
#accessTypeButtons {
width: 135px;
height: 35px;
font-size: 15px;
}
/*------------Student Register Div------------*/
#studentRegisterDiv {
width: 350px;
height: 470px;
position: absolute;
top: 15%;
left: 65%;
display: none;
}
#studentSignUpBanner {
position: absolute;
top: 10px;
left: 30px;
}
table#registerStudentFields {
border-collapse: separate;
border-spacing: 10px;
}
#registerStudentFields {
position: absolute;
left: 25px;
top: 70px;
}
#studentField {
font-size: 20px;
width: 275px;
height: 35px;
}
#studentFieldButton {
font-size: 20px;
width: 138px;
height: 35px;
}
jquery.js :
$(document).ready(function(){
$(".studentRegisterButton").click(function(){
$("#signInDiv").slideDown(500);
$("#studentRegisterDiv").slideUp(500);
});
});
Sorry for the codings. Hope someone can help me.
Your Student and Officer buttons have the same id, 'accessTypeButtons'. Also your tags with the id's of 'signInField' is duplicated. This is not allowed. Change them to have unique id's.
Your Student and Officer buttons have a type of 'submit' and since these tags/buttons are inside of a form tag, it will postback to the server which might be the reason why you see the page refresh. The jquery onclick event is fired first then the postback event is fired. If you don't need to postback, change the type to 'button'
FYI...this is not a php specific issue. It's a html and jQuery issue
Related
I wrote a simple input field with a button in it. Code is as given below.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
As you can see, when I click in input field, button disappears. When I click outside that form, it reappears. But I don't want it to disappear when clicked on input field. How can I do that?
Set z-index: 1 on #srch-term element
use z-index while focus
input:focus ~ .btn-primary {
z-index: 100;
}
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
input:focus ~ .btn-primary {
z-index: 100;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
Change the z-index in the .add-on button CSS rule to 3.
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 3;
font-size: 14px;
padding: 5px;
}
Just give a higher value to the z-index of your button. Probably the input highlight that places a div upon it
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 5;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
You should set position: relative to the button
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: relative;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
As others are saying, the input field covers the button when it is focused.
Try to set a permanent z-index on your input and button and make the z-index for button higher than the input's.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
z-index: 1020;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
z-index: 1021;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
Problem goes away if i add z-index: 1 to input and z-index: 3 to button. Can't figure out why but z-index: 2 on button doesen't seem to work.
simply add z-index to input. the value is more than -1 and less than the button z-index
/* Style the search field */
.add-on input {
width: 100%;
border-radius: 0;
z-index: 0
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 2;
font-size: 14px;
padding: 5px;
}
Solution 1 - Change z-index: 2 to z-index: 3 in .add-on button, but if your content increase the search button will overlap with content.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
position: absolute;
border-radius: 0;
top: 2px;
right: 3px;
height: 33px;
width: 60px;
z-index: 3;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
Solution 2 - Remove position: absolute, top: 2px, right: 3px, z-index: 2 from .add-on button and update height: 33px; to height: 38px; in .add-on button, it'll display search next to input field and it'll not overlap content.
form {
width: 50%;
}
/* Style the search field */
.add-on {
position: relative;
}
.add-on input {
width: 100%;
border-radius: 0;
}
.add-on button {
border-radius: 0;
height: 38px;
width: 60px;
font-size: 14px;
padding: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
<div class="input-group add-on">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
<html>
<head>
<style>
#outer
{
height:100%;
margin:0px auto;
border: 1px solid;
background: url("https://preview.ibb.co/gYykLn/images.jpg");
height: auto;
width:auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#form
{
position: relative;
height: auto;
width: 250px;
left: 70%;
bottom: 10%;
background-color: rgba(0,0,0,0.6);
border-color: #ffa200;
border-width: 50px;
border-radius: 20px;
padding-bottom:10px;
}
.logo
{
height: 32px;
width: 32px;
position: relative;
top: 10px;
left:0px;
margin-left: 10px;
}
.lgo
{
position: absolute;
right: 215px;
top: 56px;
}
.first
{
height: 40px;
background-color: rgba(0,0,0,0.8);
color: white;
width: 180px;
border-radius:5px;
margin-top:40px;
}
.a
{
height: 40px;
background-color: rgba(0,0,0,0.8);
color: white;
width: 180px;
border-radius:5px;
margin-top:20px;
}
.a:hover
{
border-color: #ffa200;
}
.first:hover
{
border-color: #ffa200;
}
.b
{
font-size: 20px;
color: white;
height: 40px;
width: 180px;
border-radius:5px;
background-color: #ffa200;
border-radius: 5px;
margin-top:10px;
margin-left:30px;
}
.b:hover
{
background-color: #dd8c00;
}
</style>
</head>
<body>
<div id="outer">
<div id="form">
<form>
<img class="logo" src="https://image.ibb.co/bAvSi7/download.png" >
<input class="a first" type="text" name="regno" required/>
<img class="logo" src="https://image.ibb.co/jpgGRS/l1.png" >
<input class="a " type="text" name="name" placeholder="Enter your name" required/>
<img class="logo" src="https://image.ibb.co/cSWuD7/l3.png" >
<input class="a" type="email" name="email" placeholder="Enter your email" required/>
<img class="logo" src="https://image.ibb.co/eeGSY7/l2.png" >
<input class="a" type="password" name="pass" placeholder="Enter your password" required/>
<img class="logo" src="https://image.ibb.co/eeGSY7/l2.png" >
<input class="a" type="password" name="password" placeholder="Confirm your password" required/>
<img class="logo" src="https://image.ibb.co/bKqX0n/l4.jpg" >
<input class="a" type="tel" name="mobile" placeholder="Enter your mobile number" required/>
<input class="b" type="submit" value="Register"/>
</form>
</div>
</div>
</body>
</html>
I have a registration page designed that looks like ABOVE html
I want a pop-up window to be displayed as soon as we land up on page and it request to 'scan the barcode to continue' and
It will get the value from barcode using desktop/laptop webcam (The bar code is actually on our college ID card, which has the value that is OUR registration Number) and put the value on the ID textfield (which is disabled i.e. user cannot edit that textbox)
Everything in my code works so far except the jQuery function. It works completely fine in jsfiddle, but the function does not work in my html file for some reason. I don't think it's that extra characters are appearing when I'm copying because from the HTML file. I haven't changes the HTML file at all i just copy/pasted the code from it to jsfiddle and it started working. Here is a link to the jsfiddle and the code for my html document. If you want to open the program the way it's meant to be, copy/paste the code into the developer tools in a google chrome tab that has all of the elements deleted. The big gap with black squares is where an image is that is based from a local file. The jQuery function is directly above my body element. Also, I am pretty new to coding so the mistake is probably a very obvious one to someone who has been doing this for years.
https://jsfiddle.net/Lukkuss/dshcp1f2/2/
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link class="" crossorigin="anonymous" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Is it a good team comp?</title>
<style>.body-size {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
width: px;
height: 800px;
background-color: #09c1a9;
}
h3 {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
h1 {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
h2 {
height: 610px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
p {
color: yellow;
width: 650px;
background-image: url("rift map.PNG");
height: 650px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.img-size {
width: 670px;
height: 670px;
}</style>
<style>
#map-container {
position: relative;
}
</style><style>
#toplane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 150px;
left: 100px
}</style>
<style>
#jungle {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 300px;
left: 200px;
}
</style>
<style>
#midlane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 325px;
left: 290px;
}
</style><style>
#botlane {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 520px;
left: 450px;
}
</style><style>
#support {
background-color: #0e1821;
position: absolute;
width: 60px;
height: 60px;
top: 520px;
left: 360px;
}
</style>
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$(this).css("background-color", "#4c6ccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
});
</script>
</head>
<body class="body-size">
<h1 class="text-center" style="color: #78ff00;">Is it a good team composition?
</h1>
<div class="row">
<div id="map-container">
<p class="col-md-6">Images of the selected champions will appear within the lanes that they are assigned. The program will not functon properly if you do not reset the lane assignments before entering a new team. </p>
<div id="toplane"></div>
<div id="jungle"></div>
<div id="midlane"></div>
<div id="botlane"></div>
<div id="support"></div>
</div>
<h2 class="col-md-4">
Insert the names of the champions on your team into their respective lanes.
<form>
<input id="lane-assignment" type="text" placeholder="Top Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Jungle" required=""><br>
<input id="lane-assignment" type="text" placeholder="Middle Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Bottom Lane" required=""><br>
<input id="lane-assignment" type="text" placeholder="Suppport" required=""><br>
<button type="submit">Enter lane assignments
</button>
<button>
Reset lane assignments
</button></form>*IMPORTANT* The program will not function properly if the champions' names are not spelled correctly.
</h2>
<h3 class="col-md-4">
Pros:
Cons:
</h3>
</div>Specific comments about your team will appear here.</body></html>
Works fine to me as per written javascript / jquery. Have you checked following URL is accessible from your browser?
https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js
I am new to CSS animations and have very little knowledge with animations specifically. My intention is to have the grey box come down from the top line above the login / register section. At the moment I have only got it fading in. If anybody can help that would be great.
Please run the code in your own browser to see how it's supposed to run.
P.S. The animation runs when the button is clicked.
If anybody can help that would be great.
var regbutton = document.getElementById('Register_Button');
var regpopup = document.getElementById('cover_for_register');
regbutton.onclick = function () {
"use strict";
regpopup.style.display = "block";
}
body{
margin: 0px auto;
}
button, input, p, h1, h2, h3, h4, h5, a{ /* State that these particular elements be "fantasy" */
font-family: Tahoma;
}
#home_container{
margin: 0px auto;
}
#home_left_section{
float: left;
height: 100%;
width: 55%;
background:-webkit-linear-gradient(#2aefff, #ffffff);
}
#home_right_section{
float: right;
height: 100%!important;
width: 45%;
box-shadow: 0px 0px 14px #888;
z-index: 10000;
background-color:aliceblue;
}
#home_right_section h1{
padding-bottom: 25px;
padding-top: 25px;
font-size: 60px;
margin: 0px;
text-align: center;
}
#home_right_section h2{
margin: 0px;
}
#home_right_section hr {
margin: 0px;
}
#login_register_container{
display:inline-block;
width: 100%;
}
#login_container{
text-align: center; /* If border is created, width must be changed */
float: left;
padding-right:50px;
padding-left: 30px;
padding-top: 20px;
margin-right: 0px auto;
background-color: aqua;
}
.login_input_fields{
border-radius:5px;
width: 200px;
padding: 5px;
border: 1px solid #bfbfbf;
font-size: 15px;
}
.register_popup_foot{
}
#register_container{
width: 50%;
float: right;
margin: 0px auto;
text-align:left;
}
#cover_for_register{
display: none;
position:fixed;
height: 52%;
width: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: animateone;
-webkit-animation-duration: 1s;
}
#-webkit-keyframes animateone {
from {min-height:200px; opacity:0}
}
#Register_Button{
z-index: 10000;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
width:100px;
height: 50px;
color: white;
text-align: center;
margin-top: 80px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
}
#Register_Button_Container{
width: 50%;
float: right;
margin: 0px auto;
text-align:center;
background-color: aqua;
height: 217px;
}
<html>
<body>
<head>
<title>Home</title>
<link rel="stylesheet" href="PTrainMeCSS.css">
<meta name="viewpoint" content="width=deive-width" />
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</head>
<div id="home_container">
<section id="home_left_section">
<h1></h1>
</section>
<section id="home_right_section">
<h1>GetFit</h1>
<hr />
<h3 id="welcome_text">Here you can find whatever service you may want throughout the fitness industry</h3>
<hr />
<div id="login_register_container">
<section id="login_container">
<h2>Login</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username / E-Mail" /><br /><br />
<input class="login_input_fields" type="password" name="Password" maxlength="20" placeholder="Password" />
<br />
<br />
<input type="submit" value="Login" />
</form>
<footer class="register_popup_foot">
<a class="register_loginform_foot_text" href="Forgot Password.html">Reset Password</a>
<br />
</footer>
</section>
<div id="Register_Button_Container">
<section>
<button id="Register_Button">Register</button>
</section>
</div>
<div id="cover_for_register">
<section id="register_container">
<h2>Register</h2>
<form>
<br />
<input class="login_input_fields" type="text" name="Username" maxlength="10" placeholder="Username"/>
<br /><br />
<input class="login_input_fields" type="text" name="E-Mail" placeholder="E-Mail"/>
<br /><br />
<input class="login_input_fields" type="password" name="Password" placeholder="Password"/>
<br /><br />
<label>Age:</label>
<br /> <select type="option" name="Age">
<option></option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
</select><br /><br />
Security Question: <br /><select type="select" name="Security Question">
<option>Please select one.</option>
<option>What was my school teachers first name?</option>
<option>Whats my favourite chip flavour?</option>
<option>What type was my first car?</option>
<option>What was the name of my first school?</option>
<option>What are my parents names?</option>
<option>How many siblings do i have?</option>
<option>What was the address of my first house?</option>
</select><br /> <br />
Answer: <br /> <input type="text" name="Answer">
Why<br /><br />
<input type="submit" value="Submit">
</form>
</section>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="PTrainMeJavascript.js"></script>
</body>
</html>
Here is the quick solution,
make #cover_for_register = z-index highest from others and change your animation to
#-webkit-keyframes animateone {
from { top:-52%;}
to {top: 5%;}//desired margin from top to cover your login page.
}
it will work fine.
Only thing you have to change is as
#-webkit-keyframes animateone {
from { height:0%;}
to {height: 100%;}
}
AND add below point in CSS...
add top:0; position:absolute; to #cover_for_register
add position:relative; #login_register_container
Look at this : https://jsfiddle.net/dkrvl2011/se93orog/10/show/
for some reason my search box is stuck right under my logo every time I try to move it. Here is my code
.searchbox{
position: absolute;
top:50px;
right: 50px;
}
And my HTML
<div class="headerMenu">
<div id="wrapper"">
<div class="logo">
<img src="./img/logo.png" />
<div class="seachbox">
<p style="margin-right: 1px;"></p>
<form action="search.php" methond="GET" id="search" >
<input type ="text" name="q" size"60" placeholder="Find Surfers...">
My logo css doesn't have position: relative
.logo{
width: 125px;
}
.logo img{
width: 150px;
height: 38px;
padding-top: 5px;
}
That's probably because .logo has position: relative;. Throw out the searchbox from the .logo div. That isn't a part of the logo, is it?
Do something like this
header{
width: 100%;
height: 70px;
background-color: #eee;
position: relative;
padding: 25px 0;
}
header #logo{
width: 150px;
height: 60px;
background-color: orange;
line-height: 60px;
}
header #searchbox{
position: absolute;
top: 50px;
right: 50px;
}
<header>
<div id="logo">Logo</div>
<input type="text" id="searchbox" value="Search...">
</header>