I want to put inside the image the code but I failed.What is the problem about that? I use microsoft word expression web 4.0. How to put text,buttons etc inside the picture?
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="name" /><br />
E-mail:<br />
<input type="text" name="mail" /><img
alt=""
height="724"
src="email-client-market-share-2019-blog.png"
width="1380"
/><br />
Comment:<br />
<input type="text" name="comment" size="50" /><br /><br />
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</form>
You can use z-index in the CSS to do that. Put the image on z-index: 1; and the elements you want to place over it to z-index: '>1';.
refer this code and see if it works for you, save this code as index.html and run on the browser to see the result !!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<div class="container">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
</body>
</html>
Hope it helps!!
Related
I have created a login and signup page with the help of youtube videos but i have written all login and signup page code in index.html but i want to create separate login and signup page but when i try to do so both page are not linked together i didn't know javascript i just copied the code can anyone help me how to separate index.html login and signup page
I tried to separate index.html login and signup page but stuck in it please anyone can help
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Login and Signup Form</title>
<!--CSS-->
<link rel="stylesheet" href="style.css" />
<!--Boxicons-->
<link
href="https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<!--login page-->
<section class="container forms">
<div class="form login">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<input type="email" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" placeholder="Password" class="password">
<i class="bx bx-hide eye-icon"></i>
</div>
<div class="form-link">
Forgot password?
</div>
<div class="field button-field">
<button>Login</button>
</div>
</form>
<div class="form-link">
<span>Don't have an account?
Signup</span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class="bx bxl-facebook facebook-icon"></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<img src="icons8-google-48.png" alt="" class="google-img" />
<span>Login with Google</span>
</a>
</div>
</div>
</body>
</html>
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup</title>
<!--CSS-->
<link rel="stylesheet" href="style.css" />
<!--Boxicons-->
<link
href="https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<section class="container forms">
<div class="form signup">
<div class="form-content">
<header>Signup</header>
<form action="#">
<div class="field input-field">
<input type="email" placeholder="Email" class="input">
</div>
<div class="field input-field">
<input type="password" placeholder="Create password" class="password">
</div>
<div class="field input-field">
<input type="password" placeholder="Confirm password" class="password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="field button-field">
<button>Signup</button>
</div>
</form>
<div class="form-link">
<span>Already have an account? Signup</span>
</div>
</div>
<div class="line"></div>
<div class="media-options">
<a href="#" class="field facebook">
<i class='bx bxl-facebook facebook-icon'></i>
<span>Login with Facebook</span>
</a>
</div>
<div class="media-options">
<a href="#" class="field google">
<img src="icons8-google-48.png" alt="" class="google-img" />
<span>Login with Google</span>
</a>
</div>
</div>
</section>
</body>
</html>
style.css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
column-gap: 30px;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
border-radius: 6px;
background: #fff;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
.forms.show-signup .form.signup{
opacity: 1;
pointer-events: auto;
}
.forms.show-signup .form.login{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: #232836;
text-align: center;
}
form{
margin-top: 30px;
}
.form .field{
position: relative;
height: 50px;
width: 100%;
margin-top: 20px;
border-radius: 6px;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
border-radius: 6px;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #CACACA;
}
.field input:focus{
border-bottom-width: 2px;
}
.eye-icon{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
font-size: 18px;
color: #8b8b8b;
cursor: pointer;
padding: 5px;
}
.field button{
color: #fff;
background-color: #0171d3;
transition: all 0.3s ease;
cursor: pointer;
}
.field button:hover{
background-color: #016dcb;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
color: #232836;
}
.form a{
color: #0171d3;
text-decoration: none;
}
.form-content a:hover{
text-decoration: underline;
}
.line{
position: relative;
height: 1px;
width: 100%;
margin: 36px 0;
background-color: #d4d4d4;
}
.line::before{
content: 'Or';
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
background-color: #fff;
color: #232836;
padding: 0 15px;
}
.media-options a{
display: flex;
align-items: center;
justify-content: center;
}
a.facebook{
color: #fff;
background-color: #4267b2;
}
a.facebook .facebook-icon{
height: 28px;
width: 28px;
color: #0171d3;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.facebook-icon,
img.google-img{
position: absolute;
top: 50%;
left: 15px;
transform: translateY(-50%);
}
img.google-img{
height: 20px;
width: 20px;
object-fit: cover;
}
a.google{
border: 1px solid #CACACA;
}
a.google span{
font-weight: 500;
opacity: 0.6;
color: #232836;
}
script.js
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {
eyeIcon.addEventListener("click", () => {
let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide", "bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show", "bx-hide");
})
})
})
links.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault(); //preventing form submit
forms.classList.toggle("show-signup");
})
})
There is no need of javascript to link 2 html pages. Simply HTML tags are enough.
Create 2 html files signup.html & login.html. Paste code for login in login.html and code of signup in signup.html
Add below code in login.html to link it to signup page
Signup</span>
Add below code in signup.html to link it to login page
Signup</span>
I am looking to create my own checkout button in checkout.liquid, we currently have a form checkout process but are running into and issue with getting our submit button to complete an order. We do not want to use the shopify standard checkout since this is a specialized store and everything is $0. Shipping and billing is done outside of shopify.
Here is our current layout for our form.
#textHead {
font-weight: bold;
padding-bottom: 8px;
padding-left: 5px;
padding-top: 10px;
}
#configHead{
padding-bottom: 8px;
padding-left: 5px;
font-weight: bold;
}
.textarea {
background: white;
border-radius: 8px;
padding-left: 5px;
padding-top: -10px;
border: solid 1px lightgray;
transition: all 0.3s ease 0s;
max-width: 100%;
}
.textarea:hover {
box-shadow: 2px 6px 25px 2px rgba(10,10,120,0.15);
transform: translateZ(-15px);
}
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
padding-bottom: 25px;
padding-top: 10px;
color: black;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: #0F4B97;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 10px;
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans:600');
.check {
bottom: 0;
display: flex;
left: calc(50% + 40px);
margin-bottom: 10px;
}
.containerOuter {
background: white;
border-radius: 8px;
}
.container {
position: relative;
margin: 20px;
overflow: visible;
width: 100px;
}
.hidden {
display: none;
}
.entry {
height: 25px;
position: absolute;
width: 160px;
}
.entry:nth-child(2) {
left: 8px;
top: 8px;
}
.entry:nth-child(4) {
left: 8px;
top: 58px;
}
.entry:nth-child(6) {
left: 8px;
top: 108px;
}
.circle {
border: 2px solid #545556;
border-radius: 50%;
cursor: pointer;
height: 20px;
position: absolute;
transition: border-color 300ms;
width: 20px;
}
.entry-label {
cursor: pointer;
margin-top: -3px;
padding-left: 40px;
user-select: none;
-moz-user-select: none;
}
.overlay {
background: #fff;
mask: url(#holes);
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACMCAYAAAAOc+uVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAItSURBVHic7ZnNjhJBFIVPA0txr0Iyw+tIdOXWaDRufZWZeYbZuMKOUV9Gg+HHGN/BHBcNcSBT1KVOEVycb0mq635UVd9U5zQkif+Y3rkFclhQxYIqFlQZiM8vALQAPgP4AWC1+X0E4ALAFMBzAOPiCixjRfIdyX5g/h7JFyTnJYVKBGckHxQsxJBke2rBK5LF55bdal6fSnCmyO1JhlcyKrhkwbYekBySXNcUfF1L7o7k20jhhsxetxYAJk3T/Kks2EfXmkaHxkXO1MfacgCwmbPNjYsIftV1knzJDYgIfqsgkuJ7bkBE8FcFkRTr3IBzXxay9SOCjyuIFM8dEZxUECmeOyL4tIJIimluQKRRLwFcnqBRDwDMUaFRjwG8quC0zxtk5ACEL6wrksNaZiQfkvwZKRxtM08AfGDgBh2Q6wG4BfAo+sAxXB/xp+6VI3lzTMGSK3/Lgu1mt62fji1W+tH0m+R7dm9iZNVeMnjm9om0mUOs8O+zc47dz84Juh76DJG3NYEqeHLOfVnIYkEVC6pYUMWCKhZUsaCKBVUsqGJBFQuqWFDFgipO3OnEfRcn7qWCTtxTOHFP4cS9Ek7cVZy4qzhxL4ZO3AXoxF2QoxP3DifuW5y4q1hQxYIqFlSxoIoFVSyoYkEVC6pYUMWCKhZUsaCKE3c6cd/FiXupoBP3FE7cUzhxr4QTdxUn7ipO3IuhE3cBOnEX5OjEvcOJ+xYn7ioWVLGgigVV/gKEL4RSyM8Z8wAAAABJRU5ErkJggg==);
height: 80px;
pointer-events: none;
transition: background 300ms;
width: 40px;
}
.highlight {
background: #4D98EF;
border-radius: 50%;
height: 12px;
left: 14px;
pointer-events: none;
position: absolute;
top: 14px;
transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.2);
transform: translateY(-50px);
width: 12px;
}
.hidden:nth-child(1):checked ~ .highlight {
transform: translateY(0);
}
.hidden:nth-child(3):checked ~ .highlight {
transform: translateY(50px);
}
.hidden:nth-child(5):checked ~ .highlight {
transform: translateY(100px);
}
.hidden:nth-child(1):checked + .entry .circle {
border-color: #4D98EF;
}
.hidden:nth-child(3):checked + .entry .circle {
border-color: #4D98EF;
}
.hidden:nth-child(5):checked + .entry .circle {
border-color: #4D98EF;
}
.check:checked ~ .containerOuter .overlay {
background: #ecf0f4;
}
</style>
<button type="submit" name="checkout" class="Cart__Checkout Button Button--primary Button--full">{{ 'cart.general.checkout' | t }}</button>
<form action="ecom#epcusa.com" method="get">
<div class="section1">
<div class="strike">
<span>LAB SERVICES</span>
</div>
<div id="textHead">Would you like to request lab services from our technology center?</div>
<div class="containerOuter">
<div class="container">
<input type="radio" class="hidden" id="input1" name="inputs">
<label class="entry" for="input1"><div class="circle"></div><div class="entry-label">No</div></label>
<input type="radio" class="hidden" id="input2" name="inputs" checked="checked">
<label class="entry" for="input2"><div class="circle"></div><div class="entry-label">Yes</div></label>
<div class="highlight"></div>
<div class="overlay"></div>
</div>
</div>
<svg width="0" height="0" viewBox="0 0 40 140">
<defs>
<mask id="holes">
<rect x="0" y="0" width="100" height="140" fill="white" />
<circle r="12" cx="20" cy="20" fill="black"/>
<circle r="12" cx="20" cy="70" fill="black"/>
<circle r="12" cx="20" cy="120" fill="black"/>
</mask>
</defs>
</svg>
<div id="box" class="config">
<p id="textHead">Lab Configuration Instructions</p>
<textarea class="textarea" name="config-instructions" cols="75" rows="5">Combine with order #[Y/N]:
Engineer Email:
Requester Email:
PM Email:
</textarea>
</div>
</div>
<div class="strike">
<span>SHIPPING</span>
</div>
<div>
<p id="textHead">Ship To MAC:Address</p>
<p>
<input type="text" class="textarea" name="shipping-search" placeholder="MAC:Address" />
</p>
<p id="textHead">Custom Address</p>
<p>
<textarea class="textarea" name="shipping-search" placeholder="Custom Adress" cols="75" rows="5"></textarea>
</p>
<p>
<p id="textHead">Shipping Instructions</p>
<!-- <p id="textSub">Provide any specific shipping requirements for your order.</p> -->
<p>
<textarea class="textarea" name="ship-instructions" cols="75" rows="4" placeholder="Example: Forklift driver, proof of insurance required, etc"></textarea>
</p>
<p>
<p id="textHead">Shipping Method</p>
</p>
<p>
<label for="ship-method" class="textarea">
<select name="shipping-method" id="ship-method" width="50px">
<option value="UPS Ground">UPS Ground</option>
<option value="Fedex Ground">Fedex Ground</option>
</select>
</label>
</p>
<p id="textHead">Requested Arrival Date</p>
<p>
<!-- <sub>Your order's request date may be based on pre-defined working days and service level agreements related to this store</sub> -->
</p>
<input type="date" class="textarea" name="arrival" />
<p>
<b>Ship To Contact</b> <!-- (Add API call for contact lookup here if can't integrate it into ship to address - Contact Email / Phone #) -->
<br /> <sub>Main point of contact for the delivery of your order.</sub>
</p>
<p>
<input type="search" class="textarea" name="shipping-contact" placeholder="Search Contact" />
</p>
</div>
<div class="strike">
<span>BILLING</span>
</div>
<label for="billing">
<b>PO Number</b>
<br />
</label>
<sub>Point of reference for your order.</sub>
<p>
<textarea class="textarea" name="po-number" cols="25" rows="1"></textarea>
</p>
<div class="strike">
<span>ORDER INFORMATION</span>
</div>
<label for="order-info">
<b>Ordered By Contact</b>
<br />
</label>
<sub>This contact will receive a confirmation email and order status notifications depending on store access and preferences.</sub>
<p>
{{ customer.name }} | {{ customer.email }}
</p>
<label for="additional-email">
<b>Additional Confirmation Email Recipients</b>
<br />
</label>
<sub>Add additional email recipients here</sub>
<p>
<textarea class="textarea" name="add-email" cols="75" rows="1" placeholder="Seperate with a "," for multiple addresses"></textarea>
</p>
<p>
<label for="reference-number">
<b>Customer Reference Number</b>
<br />
<sub>Add any additional order identiying reference numbers</sub>
</label>
</p>
<p>
<textarea class="textarea" name="reference-number" cols="25" rows="1"></textarea>
</p>
<div class="strike">
<span>COMPLETE CHECKOUT</span>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#input1").click(function(){
$("#box").slideUp("slow");
});
$("#input2").click(function(){
$("#box").slideDown("slow");
});
});
</script>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
var x = $("form").serializeArray();
$.each(x, function(i, field) {
$("#output").append(field.name + ":"
+ field.value + " ");
});
});
});
</script>
</head>
<body>
<div>
<button>Submit</button>
</div>
<div id="output"></div>
</body>
</html>```
<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)
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/
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