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 />
Related
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>
Basically, I am creating a form where the user clicks into a field and the label repositions to the top of the field.
I can get the label to move up when a user clicks into the field but when a user clicks out the field, the label doesn't go back to this correct position.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Thanks for your help in advance!
Cheers
Basically, you're not checking when shouldvthe label goes back to its default position. Logically that would be if the input field is empty the label goes back to its position. By attaching a blur event listener to the input field that has a class of .form-item__input then we can achieve the behaviour you want. So check this out:
$(".js-form-item").on("click", function () {
$(this).addClass('form-item--input-filled');
});
$(".form-item__input").on("blur", function () {
if($(this).val() === '') {
$(this).parent('.js-form-item').removeClass('form-item--input-filled');
}
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input, .form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1);
}
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
The label will get back to its default position only if the input field is empty, so if the input field has some value the label will stay on top.
In your case I think you don't need to track click outside the element, because you need an event when your input loses focus. For that you can add .blur() listener to your input and remove the class which you added previously.
https://api.jquery.com/blur/
Use .blur() and it will solve your issue.
$(".js-form-item").on("click", function() {
$(this).addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
But in my opinion you should use .focus() rather than your .click() function
$(".js-form-item > input").on("focus", function() {
$(this).parent().addClass('form-item--input-filled');
});
$(".js-form-item > input").on("blur", function() {
$(this).parent().removeClass('form-item--input-filled');
});
.form-item {
position: relative;
margin-bottom: 1em;
transition: color 0.4s ease;
color: #b4b4aa;
}
.form-item--with-scaling-label label {
top: 0;
left: 0;
position: absolute;
pointer-events: none;
transform-origin: 0 0;
z-index: 1;
padding: 17px 20px;
transition: transform 0.2s;
transition-timing-function: ease-out;
}
.form-item__label {
display: inline-block;
font-weight: normal;
vertical-align: middle;
color: #b4b4aa;
padding: 10px 10px 10px 0;
}
.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
padding: 15px;
border: 1px solid #d2d2c8;
background-color: #fff;
border-radius: 3px;
background-clip: padding-box;
width: 100%;
transition: 0.1s all linear;
}
.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
padding: 21px 20px 10px 20px;
}
.form-item--with-scaling-label.form-item--input-filled label {
transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
<label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
<input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
Hope this solved your issue.
Your code is ok, only change it similar this. It will works stylish!. simple and short:
$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
function(){
$(this).removeClass('form-item--input-filled');
}
);
Extra descriptions:
I have used focusout event that works fine always. I have tested it on my mobile and all things is fine.
I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`
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>
With JQM, I am trying to achieve the following header design
|[Home] Company------------------------------[Search][Filter]
[list of items]
Home button and company tille left aligned and the Search and Filter right aligned.
When the user clicks on the search icon, I want the following search bar to appear between the header and the list of items
<div data-role="fieldcontain">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
JQM docs guided me to collapsible headers. While this is good, its incredibly hard to accommodate other icons like the home, company text and filter in the same header if it is marked collapsible.
Is there any alternative to collapsible headers that I can use and still maintain status quo on the header?
The trickiest part is the header button/text alignment (please test my solution in all browsers). For the search bar I would just hide/show the main element on search button click.
Code -:
$(document).on("click", "#search-button", function(event)
{
$("#searchtickets").toggle();
});
.company
{
display: table-cell;
padding-left: 3em;
}
.spacerright
{
margin-right: 50px !important;
}
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1 class="company">Company</h1>
<a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a>
<a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>
<a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a>
</div>
<div data-role="content">
<div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;">
<label for="search">Search Input:</label>
<input id="search-tickets" type="search" name="search-mini" id="search-mini" data-mini="true" />
</div>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
I think u need not any JS or css library for this, u can do it with only some lines of pure CSS code ( like this tutorial ) -
body {
background: #fff;
color: #666;
font: 85%/140% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
/* reset webkit search input browser style */
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none; /* remove the search and cancel icon */
}
/* search input field */
input[type=search] {
background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #6dcff6;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
/* placeholder */
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* demo B */
#demo-b input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-b input[type=search]:hover {
background-color: #fff;
}
#demo-b input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-b input:-moz-placeholder {
color: transparent;
}
#demo-b input::-webkit-input-placeholder {
color: transparent;
}
<h3>Try this</h3><br/>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Or this</h3>
<form id="demo-b">
<input type="search" placeholder="Search">
</form>
And u can also do this by this way of using a small JS-
$(function() {
$('.srch-button').click(function(){
var $wrapper = $('.srch-wrapper'),
isOpen = $wrapper.hasClass('open');
$wrapper.toggleClass('open')
.find('.srch-input')[isOpen ? 'blur' : 'focus']();
// remove this - onyl for demo
return false;
});
})
body {
padding: 10px 20px;
background-color: #343434;
color: #fff;
}
.center {
padding: 60px;
max-width: 400px;
margin-left: 200px;
}
.srch-form {
position: relative;
width: 44px;
}
.srch-wrapper {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 40px;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.srch-wrapper.open {
width: 200px;
}
.srch-input {
position: relative;
background-color: transparent;
height: 44px;
line-height: 26px;
padding: 5px 10px 5px 32px;
box-sizing: border-box;
border: 2px solid #ddd;
border-radius: 100px;
margin: 0;
width: 100%;
}
.srch-input:focus {
outline: none;
border-color: #aaa;
}
.srch-button {
position: absolute;
top: 0;
left: 0;
border: 0;
padding: 0;
margin: 0;
background-color: transparent;
color: #ddd;
width: 44px;
height: 44px;
text-align: center;
}
.srch-button:focus {
outline: none;
}
.srch-input:focus + .srch-button,
.srch-button:hover {
color: #aaa;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<div class="center">
<form action="" class="srch-form">
<div class="srch-wrapper open">
<input type="text" class="srch-input" placeholder="Search..." />
<button class="srch-button" type="submit">
<em class="icon-search"></em>
</button>
</div>
</form>
</div>