CSS Animation Creation

CSS Animation Creation - javascript

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/

Related

How to remove the label when user typed in their input?

I would like to ask for help on how I can remove the label when the user has typed in their input. When I tested my code, the label overlaps the input that was typed by the user, and that is not what I wanted to happen. I am assuming I'll have to use JavaScript, an event listener? but I am new to coding, the code structure and syntax is really new and what I can only understand are basic logic from how I read codes in html. Would really appreciate the help!
Here is my code
.centered-container-form {
padding-bottom: 25%;
font-size: 18px;
display: flex;
flex-direction: column;
width: 300px;
}
.form-container {
width: 100%;
}
.container{
position: relative;
max-width:245px;
width: 100%;
border-radius:6px;
background-color: #fff;
}
.container .input-box{
position:relative;
height: 50px;
background-color: red;
}
.input-box input{
position:absolute;
outline:none;
height:100%;
width:100%;
border: 2px solid #ccc;
padding: 0 35px 0 15px;
transition: all 0.2s linear;
border-radius:6px;
}
.input-box :is(label, img){
position:absolute;
top: 50%;
transform: translateY(-50%);
color:#999;
transition: all 0.2s linear;
}
.input-box label{
left: 15px ;
pointer-events: none;
font-size: 16px;
font-weight:400;
padding:0px 5px;
}
.input-box img {
right:15px;
height: 20px;
}
input:is(:focus) ~ img{
color:#0890EB;
}
input:is(:focus) ~ label{
color:#0890EB;
background-color: #fff;
top:0;
padding:0px 5px;
font-size: 12px;
}
input:is(:focus){
border-color: #0890EB;
<div className="centered-container-form">
<form onSubmit={handleSubmit}>
<div className='form-container'>
<div className='container'>
<div className='input-box'>
<input type="email" value={email} onChange=
{handleEmailChange} />
<label>
Email/username
</label>
</div>
</div>
<br></br>
<div className="container">
<div className='input-box'>
<input
type="password"
value={password}
onChange={handlePasswordChange}
/>
<label>
Password </label>
</div>
</div>
</div>
</div>
</form>

Try adding placeholder to both your inputs and then add this snippet to your css
HTML:
<div className='container'>
<div className='input-box'>
<input placeholder="email" type="email" value={email} onCh} />
<label>
Email/username
</label>
</div>
</div>
<br></br>
<div className="container">
<div className='input-box'>
<input
placeholder="password"
type="password"
value={password}
onChange={handlePasswordChange}
/>
<label>
Password </label>
</div>
</div>
Css:
input:not(:placeholder-shown) ~ label{
display: none;
}
input:placeholder-shown ~ label{
display: inline;
}

If i correct understood your question, you dont need labelyou need placeholder
so just replace your input like:
<input type="password" placeholder={password} />

I have solved my problem. Just used placeholder and brought back my initial code and replacing type into text/password. Thank you everyone for answering!

How to put text,buttons etc inside the picture

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!!

Read Barcode [Live] On Desktop Browser and get the value

<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)

Replace DIV contents with DIV contents JavaScript (No jQuery)

I am currently working on a form for a page in MOSS 2007 and am forced to use a lot of JavaScript in place of CSS3 and jQuery due to government restrictions. I come from the C# world and JavaScript is still somewhat new to me.
My current objective is to replace the contents of a stationary div element with the contents of another that is hidden on the page. I'm coming to my wits end trying resolve this only remaining issue on this page. Currently I'm using a simple (pseudo: doc.getbyid(id).innerhtml = newdiv) to replace the contents of the div, now my two theories are that either 1) the onclick event isn't calling the function, or 2) the replace just isn't working.
(function() {
document.getElementById("currentSlide").innerHtml = document.getElementById("contactSlide").innerHtml;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHtml = document.getElementById(eIDs[id]).innerHtml;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
The only other thing I can think to do is to store the inner html in a var and just assigning it as needed. Please help!

There are 2 things why it's not working
change innerHtml to innerHTML
add a load handler so DOM is ready before you target its elements
I also chose to drop the unnecessary document.getElementById() statement and simpy call the nextSlide function with its first item index
window.addEventListener('load', function(e) {
nextSlide(0);
})
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>

Your code is ok, but replace innerHtml with innerHTML, JavaScript is case sensitive.
(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(var id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}

(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
You had an issue with the param in your nextSlide function, you were passing var id, when it should just be id. and your var eIDs was missing an = so your array was never declared in the variable. the gentleman above is still using the incorrect code. Do you have a click handler? can we see it?

The issue was with placement of the script itself; moved to the end of the body and worked like a charm! The little issues such as innerHTML and the equals sign for eids and the var id were just little oversights; of course I had to add the additional handlers for onclick once I got the load to work. It's now working like a charm. Thank you all for being such great help!

Align cursor to placeholder starting position

I have the following HTML and CSS code and the output.
When I click the input boxes I want my cursor to be exactly just on the left of the placeholder text. But when I click the input the box the cursor shows up at the very start of the the input box.
How can i align the cursor to the placeholder starting character on focus.
Thanks
HTML
<head>
<title>AUMC-Student Portal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css2/paper.css" rel="stylesheet" media="screen">
<link href="css2/myCSS.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="Login-Form-Container">
<form class="Inner-Portion">
<div>
<input class="form-control" type="text" placeholder="Username" />
</div>
<br>
<div>
<input class="form-control" type="password" placeholder="Password" />
</div>
<br>
<select class="form-control controls">
<option selected>Laptop</option>
<option value="">Mouse</option>
<option value="">Keyboard</option>
<option value="">Monitor</option>
<option value="">Hello World</option>
</select>
<br>
<br>
<button type="button" class="btn btn-default">Forgot</button>
<button type="button" class="btn btn-primary">Login</button>
<form/>
</div>
</body>
</html>
CSS
body {
background-color: #293037;
background-size: 1500px;
}
.Login-Form-Container {
background-color: dodgerblue;
width: 400pt;
height: 310pt;
text-align: center;
margin: 0 auto;
}
.Inner-Portion {
background-color: whitesmoke;
width: 400pt;
height: 300pt;
padding-top: 57pt;
}
.controls , .Inner-Portion div{
margin: 0px auto;
width: 300px;
}
.form-control::-webkit-input-placeholder {
padding: 55px;
}
.Inner-Portion div{
border: solid 1px #DDDDDD;
}
.btn-default , .btn-primary {
width: 150px;
}
OUTPUT

You can use text-indent property.
input.form-control {
box-sizing: border-box;
width: 100%;
text-indent: 30px;
}
jsFiddle
Or just set some padding-left for it.
input.form-control {
box-sizing: border-box;
width: 100%;
padding-left: 30px;
}
jsFiddle

You may add:
input.form-control {
width: 100%;
padding-left: 55px;
}
and remove .form-control::-webkit-input-placeholder.
The snippet:
body {
background-color: #293037;
background-size: 1500px;
}
.Login-Form-Container {
background-color: dodgerblue;
width: 400pt;
height: 310pt;
text-align: center;
margin: 0 auto;
}
.Inner-Portion {
background-color: whitesmoke;
width: 400pt;
height: 300pt;
padding-top: 57pt;
}
.controls , .Inner-Portion div{
margin: 0px auto;
width: 300px;
}
input.form-control {
width: 100%;
padding-left: 55px;
}
.Inner-Portion div{
border: solid 1px #DDDDDD;
}
.btn-default , .btn-primary {
width: 150px;
}
<div class="Login-Form-Container">
<form class="Inner-Portion">
<div>
<input class="form-control" type="text" placeholder="Username" />
</div>
<br>
<div>
<input class="form-control" type="password" placeholder="Password" />
</div>
<br>
<select class="form-control controls">
<option selected>Laptop</option>
<option value="">Mouse</option>
<option value="">Keyboard</option>
<option value="">Monitor</option>
<option value="">Hello World</option>
</select>
<br>
<br>
<button type="button" class="btn btn-default">Forgot</button>
<button type="button" class="btn btn-primary">Login</button>
</form>
</div>

This Code is enough.
input {
padding-left: 10px;
}

you should make the padding to target the input and not the placeholder.
try something like this
.form-signin input[type="email"], .form-signin input[type="password"]{
padding: 14px 16px !important;
margin: auto;
font-size: 17px;
}

Don't apply styles to the placeholder rather make it global to the input the placeholder will apply automatically
.form-control{padding:14px 16px;}

We Keep Coding

JavaScript is the programming language of the Web.

CSS Animation Creation - javascript

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.

Related

How to remove the label when user typed in their input?

How to put text,buttons etc inside the picture

Read Barcode [Live] On Desktop Browser and get the value

Replace DIV contents with DIV contents JavaScript (No jQuery)

Align cursor to placeholder starting position

Categories

Resources