I have the following code:
/* Contact Form */
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
background: var(--bgFormElsFocus);
transform: scale(1.02);
transition: transform 0.2s ease-in-out;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
.shakingErr {
border-color: red;
animation: shake 0.82s forwards;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="https://formspree.io/f/xr123gjbqpq" id="my-form" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
I would like a text animation on the input fields. For example, I would like my expected output to be like this:
https://watch.screencastify.com/v/3mlMie2rx0UzhdymHYCR
As you can see, I would like the text such as "First Name" to be inside the input field, and when the user clicks the input field, the text should animate and be at the top. How can I achieve this task? Any suggestions?
There are a lot of variants how to do that, one of them is to use extra-div for input & label, and role of floating text will be played by label:
.wrapper {
padding: 20px;
}
.input-data {
height: 40px;
width: 100%;
position: relative;
}
.input-data input {
height: 100%;
width: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid silver;
transition: border-color .4s;
outline: none;
}
.input-data input:focus~label,
.input-data input:valid~label {
transform: translateY(-20px);
font-size: 13px;
color: #4158d0;
}
.input-data label {
position: absolute;
bottom: 10px;
left: 0;
color: grey;
pointer-events: none;
transition: all 0.3s ease;
}
.input-data input:focus,
.input-data input:valid {
border-color: #4158d0;
}
<div class="wrapper">
<div class="input-data">
<input type="text" required>
<label>Name</label>
</div>
</div>
I tried to create a Beta for you, using the video you linked as a reference
using HTML and CSS only...
the trick here is creating an Extra Div as a Parent, so we can put the label and input inside.
now set the parent to have a position: relative; so the label will be absolute
now successfully we can use TOP, LEFT, RIGHT, BOTTOM and that's it (position the label as the place-holder)
the logic
I put the logic here .input-container input:focus~label
make sure that the label is after the input in HTML, and inside the parent
delete the border on focus
remember that the input if focused it will have like a border automatically...
to delete this border use outline: none; because that border CAN'T be deleted with border: none;
that's it, test the code I write for you! and I hope this will helps
here the code
* {
--input-height: 3rem;
--light-black: rgba(0, 0, 0, 0.3);
--medium-black: rgba(0, 0, 0, 0.6);
}
section {
height: 100vh;
width: 100vw;
display: grid;
place-content: center;
}
.input-container input {
height: var(--input-height);
width: 80vw;
font-size: 2rem;
border: none;
border-bottom: 2px solid var(--light-black);
}
.input-container {
position: relative;
display: grid;
place-items: center start;
}
.input-container label {
position: absolute;
left: 1rem;
font-size: 1.5rem;
color: var(--medium-black);
transition-duration: 0.5s;
}
.input-container input:focus~label {
position: absolute;
font-size: 1rem;
top: -1rem;
left: 0;
transition-duration: 0.2s;
z-index: 2;
}
.input-container input:focus {
outline: none;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form action="">
<div class="input-container">
<input type="text" name="" id="my-input">
<label for="my-input">name</label>
</div>
</form>
</section>
</body>
</html>
Related
I have an HTML page responsible for creating new users on my website.
After creating the user, the website must show a pop-up saying the user was created successfully.
Everything works fine, except that I had to configure an "onsubmit= return false" because I didn't find any other way to display the pop-up without the page redirecting immediately after the submission.
Now the form doesn't save the new users that are being created, so I'm trying to change the form value to true...
How can one do that? returning true after the pop-up closes.
Here is my code so far-
document.getElementById("accountForm").addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup() {
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
document.getElementById("accountForm").setAttribute("onsubmit", "true");
window.location.replace("/login/");
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" onsubmit="return false" method="post" id="accountForm">
<form onsubmit="return false" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
You have invalid HTML, nested form tags with duplicate IDs
You need to submit the form, but if you you actually submit the form, why not show the popup when you return
Here is how to stop and submit when the form is closed
const form = document.getElementById("accountForm")
form.addEventListener("submit", openPopup);
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function openPopup(e) {
e.preventDefault(); // stop submission
blur.classList.toggle('active')
popup.classList.add("open-popup");
}
function closePopup() {
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.submit();
}
/* General Styling */
* {
box-sizing: border-box;
}
body {
background: #f7f7f7;
margin: 0px;
overflow: scale;
}
#blur {
position: relative;
background: white;
margin: auto;
width: 70vw;
height: 120vh;
}
.text {
position: relative;
font-family: Arial;
top: 5vh;
left: 10vw;
color: black;
}
p[id="create_account"] {
color: #b3b3b6;
font-size: 1vw;
}
p {
font-size: 0.8vw;
color: dimgray;
}
/* Pop-up Styling*/
h2 {
position: relative;
top: 12vh;
margin: auto;
font-size: 2vw;
text-align: center;
color: #4897d8;
}
h4 {
position: relative;
top: 15vh;
margin: auto;
color: lightslategray;
font-size: 1vw;
text-align: center;
}
button[id="ok"] {
position: relative;
top: 23vh;
margin: 0 auto;
display: block;
width: 20vw;
height: 10vh;
background-color: #4897d8;
border: white;
color: white;
cursor: pointer;
font-size: 1.1vw;
}
.close {
position: relative;
top: -26.5vh;
left: 34vw;
cursor: pointer;
transform: translate(0%, -50%);
color: lightslategrey;
font-size: 1.5vw;
}
.popup-container {
visibility: hidden;
position: absolute;
margin-left: 30vw;
margin-top: 10vw;
height: 30vw;
width: 40vw;
font-family: Arial;
color: white;
background: white;
border-radius: 3px;
z-index: 1;
animation: ease-in;
}
.open-popup {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 500ms;
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container#blur.active {
filter: blur(20px);
}
.popup.active {
filter: blur(20px);
}
/* Create Account Styling */
input {
box-sizing: border-box;
border: 2px solid lightgray;
border-radius: 5px;
padding: 0.5vw;
margin-bottom: 0.5vw;
width: 20vw;
height: 5vh;
}
input[type=text] {
color: #4897d8;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: lightgray;
opacity: 1;
/* Firefox */
}
input[type="submit"] {
width: 19.5vw;
height: 6vh;
background-color: #4897d8;
color: white;
border-radius: 5px;
font-size: 1.1vw;
cursor: pointer;
border: none;
}
<body>
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
<div class="container" id="blur">
<div class="text">
<h1>Create Account
<link rel="stylesheet" href="{% static 'css/recruiters/create_account.css' %}">
</h1>
<p id="create_account">Create an account and let us find the best sales<br>talent that satisfy your company's requirements</p>
<form action="create/created_user" method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
</div>
</div>
</body>
Finally, I found a solution.
Used an event listener on the submit button to prevent the default course of action, then showed the pop-up.
Afterward, removed the pop-up and told the form what action needs to be done and to submit.
This is how it looks!
<script>
const form = document.getElementById("accountForm");
let popup = document.getElementById("popup");
let blur = document.getElementById("blur")
function closePopup(){
document.querySelector('.active').classList.remove('active')
popup.classList.remove("open-popup");
form.action = "/create/created_user";
form.submit()
}
document.getElementById("accountForm").addEventListener("submit", function(event){
event.preventDefault();
blur.classList.toggle('active');
popup.classList.add("open-popup");
});
</script>
# POPUP HTML CONFIGURATION
<div class="popup-container" id="popup">
<img src="../../static/images/green_tick.png" alt="user created" style="position:relative; margin: 0 auto; top: 7vh; display: block; width:5vw;height:10vh;">
<h2>Account Creation Succesfull</h2>
<h4>Thanks for registering with the job portal. Your account <br>has been created.</h4>
<button type="button" id="ok" onclick="closePopup()">Start Recruiting</button>
<ul class="close" onclick="closePopup()">X</ul>
</div>
#FORM CONFIGURATION
<form method="post" id="accountForm">
<p>Recruiter Name*</p>
<input type="text" name="fullname" placeholder="Full Name" required>
<p>Phone Number</p>
<input type="text" name="phone" placeholder="Phone Number">
<p>Email*</p>
<input type="text" name="email" placeholder="Enter Email Address" required>
<p>Location</p>
<input type="text" name="location" placeholder="Address">
<p>Company Name</p>
<input type="text" name="company" placeholder="Company Name">
<p>Password*</p>
<input type="text" name="passwd" placeholder="Password" required>
<br><br>
<input type="submit" value="Create Account">
</form>
.toggle-switch input[type=checkbox] {
display: none
}
.toggle-switch label {
cursor: pointer;
}
.toggle-switch label .toggle-track {
display: block;
height: 10px;
width: 85px;
background: #eee;
border-radius: 20px;
position: relative;
margin-bottom: 5px;
border: 1px solid #ccc;
}
.toggle-switch .toggle-track:before{
content:'';
display:inline-block;height:18px;width:18px;background:blue;
border-radius:20px;
position:absolute;
top:-5px;
left:0;
transition:left .5s ease-in;
}
.toggle-switch input[type="checkbox"]:checked + label .toggle-track:before {
background:green;
left:70px;
}
<div class="col-12">
<div class="row">
<div class="col-3 col-md-3" >ENABLE</div>
<div class="col-3 col-md-3">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
</div>
</div>
<div class="col-3 col-md-3">DISABLE</div>
</div>
</div>
The color of text changing according to the witching toggled button.
When it click on toggle button text color will change according to the switch button color is changing the text color will change too.
You can add an event listener when click the switch to define your changing color logic.
const checkbox = document.getElementById('chkTest');
const enableText = document.getElementById('enable');
const disableText = document.getElementById('disable');
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) {
enableText.classList.add("green-text");
disableText.classList.remove("blue-text");
}
else {
disableText.classList.add("blue-text");
enableText.classList.remove("green-text");
}
})
.toggle-switch input[type=checkbox] {
display: none
}
.toggle-switch label {
cursor: pointer;
}
.toggle-switch label .toggle-track {
display: block;
height: 10px;
width: 85px;
background: #eee;
border-radius: 20px;
position: relative;
margin-bottom: 5px;
border: 1px solid #ccc;
}
.toggle-switch .toggle-track:before {
content: '';
display: inline-block;
height: 18px;
width: 18px;
background: blue;
border-radius: 20px;
position: absolute;
top: -5px;
left: 0;
transition: left .5s ease-in;
}
.toggle-switch input[type="checkbox"]:checked+label .toggle-track:before {
background: green;
left: 70px;
}
.green-text {
color: green;
}
.blue-text {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<div class="row">
<div id="enable" class="col-3 col-md-3">ENABLE</div>
<div class="col-3 col-md-3">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
</div>
</div>
<div id="disable" class="col-3 col-md-3">DISABLE</div>
</div>
</div>
CSS only version
My first thought was to use javascript to switch the styles. To be honest, I prefer to use javascript. But some people try to avoid javascript because they are not familiar with it. Then you can only use css. The only disadvantage of css is that the slibing selector is like a waterfall and you can't slide up. So in my case I had to work with negative margins. It works well, but you have to compromise with the margins to position the text elements.
#nocheck {
margin-top: -45px;
margin-bottom: 30px;
}
.toggle-switch {
padding:50px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
.toggle-switch input[type=checkbox] {
display: none
}
.toggle-switch label {
cursor: pointer;
}
.toggle-switch label .toggle-track {
display: block;
height: 10px;
width: 85px;
background: #eee;
border-radius: 20px;
position: relative;
margin-bottom: 5px;
border: 1px solid #ccc;
}
.toggle-switch .toggle-track:before{
content:'';
display:inline-block;height:18px;width:18px;background:blue;
border-radius:20px;
position:absolute;
top:-5px;
left:0;
transition:left .5s ease-in;
}
.toggle-switch input[type="checkbox"]:checked + label .toggle-track:before {
background:green;
left:70px;
}
<div class="col-3 col-md-3">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="col-3 col-md-3" id="nocheck">ENABLE</div>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
Let me help too
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
// do this
document.getElementById("myH2").style.color = "#ff0000";
document.getElementById("myH1").style.color = "black";
console.log('Checked');
} else {
// do that
document.getElementById("myH2").style.color = "black";
document.getElementById("myH1").style.color = "#ff0000";
console.log('Not checked');
}
});
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<h2 id="myH2">Toggle Switch</h2>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
<h2 id="myH1" style="color:red">Toggle Switch</h2>
Somehow when I try to use JS to show hidden content (the login formular when clicking the login-button) my formular gets deformed. Espescially the "register" Button is too long and I can't locate my problem properly.
When I'm deleting the JS and the display:none attribute in #login-fenster it shows up as I wanted to. I've tried to copy the neccessary code to JSfiddle, I hope it worked. Until now I havn't any clue about responsive design so you have to max the output window i think. sorry for that!
I have deleted diverse parts of the code and tried to locate the problem but only found a connection to JS
https://jsfiddle.net/vz2jfmkc/1/
function myFunction() {
var x = document.getElementById("login-fenster");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
body, main{
background-color: #000000;
overflow-x: hidden;
}
nav {
background: #0d0d0d;
width: 100vw;
top: 0;
}
.nav {
display: flex;
justify-content: flex-end;
list-style: none;
height: 3vw;
text-align: center;
align-items: center;
padding: 0 2vw 0 0;
}
nav ul {
padding: 0px;
margin: 0;
right: 0;
}
nav ul li a {
color: #fff;
background-color: #262626;
text-decoration: none;
padding: 12px;
font-size: 1.2rem;
padding-right: 10px;
border-radius: 5px 5px;
border: #262626 1px solid;
transition: 0.5s;
transition: background 1s ease-in-out;
}
nav ul li a:hover {
color: #ffffff;
text-decoration: none;
font-weight: 100;
background: linear-gradient(#262626, #595959);
}
nav button {
color: #fff;
background-color: #262626;
text-decoration: none;
padding: 12px;
font-size: 1.1rem;
padding-right: 10px;
border-radius: 5px 5px;
border: #262626 1px solid;
transition: 0.5s;
transition: background 1s ease-in-out;
}
#login {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
#login:active {
transform: scale(0.9);
}
.news {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.news:active {
transform: scale(0.9);
}
.tests {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.tests:active {
transform: scale(0.9);
}
.community {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.community:active {
transform: scale(0.9);
}
.index {
margin-right: 1rem;
transition: transform 0.1s ease-in-out;
}
.index:hover {
transform: scale(0.9);
}
.search {
margin-right: 1rem;
}
#login-fenster {
right: 0;
margin-top: 0rem;
margin-right: 19rem;
z-index: 100;
justify-content: center;
align-content: center;
align-items: center;
display: inline-flex;
flex-direction: column;
height: 30vh;
width: 18vw;
background-color: black;
color: white;
position: absolute;
border: 3px solid white;
border-radius: 20px 20px;
}
.login-form {
margin-top: 10px;
}
#login-fenster input[type="text"]{
font-size: 1.3rem;
border-radius: 8px 8px;
}
#login-fenster input[type="password"]{
font-size: 1.3rem;
border-radius: 8px 8px;
}
.register {
margin-top: 10px;
background: #262626;
border: 1px solid white;
border-radius: 15px 15px;
transition: transform all 0.2s;
}
.register a {
text-decoration: none;
color: white;
font-size: 1.3rem;
transition: transform all 0.2s;
}
.register:active {
transform: scale(0.95);
}
button {
cursor: pointer;
color: white;
background-color: #262626;
padding: 0.5rem;
border-radius: 15px 15px;
border: 1px solid white;
font-size: 1rem;
transition: transform 0.2s;
}
button:active {
transform: scale(0.95);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Koop_bude</title>
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" media="screen" />
</head>
<header>
<nav>
<ul class="nav">
<button id="login" onclick="myFunction()">Login</button>
<li class="news">News</li>
<li class="tests">Tests</li>
<li class="community">Community</li>
<li class="search"><input type="search" placeholder="Suche..." /></li>
</ul>
</nav>
<div id="login-fenster" style="display:none;">
<input class="login-form" type="text" placeholder="Username" name="username" required />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />
<button class="login-form" type="submit">Login</button>
<label>
<input class="login-form" type="checkbox" checked="checked" name="remember">Eingeloggt bleiben
</label>
<div id="forgot-password">
<button class="forgot-password-button">Passwort vergessen?</button>
</div>
<div class="register">Registrieren
</div>
</div>
</header>
<body>
<script>
function myFunction() {
var x = document.getElementById("login-fenster");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
I want the content to show up on a line under the login button. I gave that content specific parameters which looked good to me for a newbie and I don't want JS to deform it.
Thanks for that JSFiddle - though I'm still a little confused about what you're hoping to accomplish. From what I understand, your issue is more of a CSS issue than a JavaScript issue. If your issue is that the white border cuts through your content:
then removing
#login-fenster {
...etc...
height: 30vh; <----- Remove this to keep everything inside regarding Y-Axis
width: 18vw; <----- Remove this to keep everything inside regarding X-Axis
...etc...
}
and now all of your items will always be inside your white border
If you want the different input fields to be on different lines, just add a <br /> tag between your inputs:
<input class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input class="login-form" type="password" placeholder="Passwort" name="password" required />
On the other hand, if you really want the boxes to grow/shrink, and you want to leave width: 18vw; (I still highly recommend you get rid of the height: 30vh;... that's not helping you at all) then just set the width attributes to be 100% of the parent-div (the white box).
<input style="width: 100%;" class="login-form" type="text" placeholder="Username" name="username" required />
<br />
<input style="width: 100%;" class="login-form" type="password" placeholder="Passwort" name="password" required />
This question already has answers here:
Add and remove a class on click using jQuery?
(8 answers)
Closed 4 years ago.
I am trying to add the toggleClass but it's not working. i also tried to add or remove the class using the hasClass. there is also same problem.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
You .box is sitting on top of your button, so the function is never getting called. Even the though your box opacity is 0, it's still 'there', and it's what you're clicking (note the cursor is not a pointer when hovering over the button).
You'll either want to find a different position for your .box, or place it's z-index lower than 0. I've made the latter change in the snippet below.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
z-index: -1;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
To achieve expected reult, use below option of z-index , as input and button are overlapped
.srch-btn{
position:relative;
z-index:9999
}
https://codepen.io/nagasai/pen/EQqYJL
remove position: absolute from .box class.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
});
});
.box {
width: 300px;
max-width: 100%;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
}
.srch-inpt.expanded {
width: 100%;
opacity: 1;
}
button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
It was because your button was underneath the text input field. Giving the button a value of 'relative' to the 'position' property and the setting its 'z-index' slightly higher than the text field will make the button clickable. Adding a transition would make the animation go fluid.
$(document).ready(function() {
$(".srch-btn").click(function() {
$(".srch-inpt").toggleClass("expanded");
var widthbtn=$(".srch-inpt").width();
$("button").css({"margin-left":widthbtn+"px","transition":"all 0.1s ease"});
});
});
.box {
width: 300px;
max-width: 100%;
position: absolute;
top: 0;
}
.srch-inpt {
height: 38px;
box-sizing: border-box;
transition: all 0.5s ease;
color: #fff;
opacity: 0;
padding: 10px 38px;
width: 0;
background: rgba(166, 166, 166, 0.48);
border: none;
border-bottom: 2px solid #ddd;
cursor: pointer;
}
.srch-inpt.expanded {
width: initial;
opacity: 1;
}
button {
cursor: pointer;
position: relative;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="searchform" method="get" action="">
<button type="button" class="srch-btn">search</button>
<div class="box">
<input type="text" name="s" value="" id="s" class="srch-inpt">
</div>
</form>
I have a form which currently works fine, only thing I would like it to do is when I fill the text, the placeholder also should show whatever I type in the field.
Lets say if I am filling First Name:
Bob The Builder, the place holder should also show the same 'Bob The Builder' instead of 'First Name'.
Below is the related code to it:
Form-rise-click here for fiddle
HTML:
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool"/>
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool"/>
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool"/>
</div>
</div>
CSS:
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
jQuery:
$('input').on('focusin', function() {
$(this).parent().find('label').addClass('active');
});
$('input').on('focusout', function() {
if (!this.value) {
$(this).parent().find('label').removeClass('active');
}
});
I have just used keyup() of jquery. It is basically an event handler to the keyup of javascript event.
$('input').keyup(function(){
$(this).parent().find('label').text($(this).val())
});
Please check in the JSFiddle for any doubts.
Here is a small suggestion for a better UX.
When the input value is empty you can give a small if condition to show its former placeholder. And we can mange that placeholder with the help of an attribute. for e.g here i'm using name to retrieve the placeholder.
Please check in the JSFiddle for any doubts.
Hope this is helpful. Thank you.
Yes, it is possible. Use the following jQuery code as an example for the rest of your inputs.
$("#fname").keyup(function() {
$("label[for='fname']").html($(this).val());
});
Description: You select the ID input (e.g. #fname) for which you want to change the value of the label that moves to top (e.g. label fname) to the value that you are currently typing.
Check the updated JSFiddle here: https://jsfiddle.net/NikolaosG/tyowcgut/3/
Yes, the keyup event is the best way to handle this. But additionally, you use multiple event handlers for each input -- here's an alternate way to handle that scenario. Not that one is better or preferred, simply an option.
$('input').on({
focusin: function() {
$(this).parent().find('label').addClass('active');
},
focusout: function() {
if (!this.value) {
$(this).parent().find('label')
.removeClass('active');
}
},
keyup: function() {
var newText = $(this).val();
$(this).parent().find('label').text(newText);
}
});
body {
font-family: 'Lato', sans-serif;
color: black;
background-color: white;
}
h1 {
font-size: 60px;
margin: 0px;
padding: 0px;
}
h3 {
margin: 0px;
padding: 0px;
color: #999;
}
div.wrap {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
vertical-align: middle;
}
div.wrap div {
position: relative;
margin: 50px 0;
}
label {
position: absolute;
top: 0;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: white;
-webkit-transition: top .2s ease-in-out,
font-size .2s ease-in-out;
transition: top .2s ease-in-out,
font-size .2s ease-in-out;
}
.active {
top: -25px;
font-size: 20px;
}
input[type=text] {
width: 100%;
padding: 20px;
border: 2px solid black;
font-size: 20px;
background-color: white;
color: black;
}
input[type=text]:focus {
outline: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wrap">
<div>
<label for="fname">First Name</label>
<input id="fname" type="text" class="cool" />
</div>
<div>
<label for="lname">Last Name</label>
<input id="lname" type="text" class="cool" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" class="cool" />
</div>
</div>