I have custom CSS for an input type file. This works fine but whenever I am selecting any file its name is not getting displayed, any suggestions or any help please?
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
/* Example stylistic flourishes */
.fileContainer {
background: #049fd9;
color: #ffffff;
border-radius: 30px;
padding: .5em;
padding-left: 20px;
padding-right: 20px;
text-align: center;
font-size: 0.875rem;
height: 30px;
vertical-align: middle;
min-width: 100px;
max-width: 200px;
}
.fileContainer [type=file] {
cursor: pointer;
}
<label class="fileContainer">
Choose file
<input type="file"/>
</label>
You can use this code
$("input[type=file]").change(function() {
$(".fileContainer").text($('input[type=file]').val().replace(/C:\\fakepath\\/i, ''))
})
Demo:
$("input[type=file]").change(function() {
$(".fileContainer").text($('input[type=file]').val().replace(/C:\\fakepath\\/i, ''))
})
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
/* Example stylistic flourishes */
.fileContainer {
background: #049fd9;
color: #ffffff;
border-radius: 30px;
padding: .5em;
padding-left: 20px;
padding-right: 20px;
text-align: center;
font-size: 0.875rem;
height:30px;
vertical-align: middle;
min-width: 100px;
max-width: 200px;
}
.fileContainer [type=file] {
cursor: pointer;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="fileContainer">
Choose file
<input type="file"/>
</label>
To achieve this you'll first need to add an element to the DOM to store the file names. Then you can loop through the files collection of the input and append the file names to that element. Try this:
$('input').change(function() {
var html = '';
for (var i = 0; i < this.files.length; i++) {
html += '<p>' + this.files[i].name + '</p>';
}
$('#filelist').html(html);
});
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.fileContainer {
background: #049fd9;
color: #ffffff;
border-radius: 30px;
padding: .5em;
padding-left: 20px;
padding-right: 20px;
text-align: center;
font-size: 0.875rem;
height: 30px;
vertical-align: middle;
min-width: 100px;
max-width: 200px;
}
.fileContainer [type=file] {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="fileContainer">
Choose file
<input type="file"/>
</label>
<div id="filelist"></div>
Related
I have created a loading page with css and html. I would like to display a loading bar to display when the page is loading, between 0% to 100%.I have used justify-content:space-between to solve this but I can't seem to make this work. I have read previous posts on this in the forum but am still stuck. here is my code, both html and css
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
base.scss
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
```
loader.scss
```
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "Orbitron", sans-serif;
&__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c7a;
border-bottom: 3px solid #6cff8c7a;
}
&__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
&--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
}
&__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
&--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
}
&--border {
width: 85%;
height: 1px;
background: #6cff8c7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
}
&__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100px;
display: flex;
justify-content: space-between;
padding-left: 10px;
}
}
```
you need to edit you .loading__counter:
width: 100%;
box-sizing: border-box;
padding: 0 10px;
See the working example below:
body {
margin: 0;
box-sizing: border-box;
&::after,
&::before {
box-sizing: border-box;
}
}
html, body {
overflow-x: hidden;
}
body{
font-family: 'Poppins', sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
z-index: 99;
background: #0b134f;
place-items: center;
display: grid;
font-family: "
Orbitron"
, sans-serif;
}
.loading__box {
position: relative;
width: 500px;
height: 200px;
border: 3px solid #6cff8d;
border-top: 3px solid #6cff8c 7a;
border-bottom: 3px solid #6cff8c 7a;
}
.loading__bar {
width: 90%;
height: 10%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
background: #ccc;
border-radius: 2px;
}
.loading__bar--inner {
height: 100%;
width: 50%;
border-radius: 2px;
background: #6cff8d;
}
.loading__text {
position: relative;
color: #fff;
padding: 1rem;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.loading__text--dot {
width: 15px;
height: 15px;
margin: 0 3px;
border-radius: 50%;
animation: pulse 1s infinite;
background: #fff;
}
#keyframes pulse {
from {
opacity: 0;
background: #6cff8d;
}
to {
opacity: 1;
}
}
.loading__text--border {
width: 85%;
height: 1px;
background: #6cff8c 7a;
position: absolute;
bottom: 0;
left: 50px;
transform: translateY(-50%);
}
.loading__counter {
position: absolute;
top: 70%;
left: 0;
color: #fff;
font-size: 20px;
font-weight: 700;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
}
<body>
<div class="loading">
<div class="loading__box">
<div class="loading__text">
<div class="loading__text--border"></div>
L
<div class="loading__text--dot"></div>
OADING EXPERIENCE
</div>
<div class="loading__bar">
<div class="loading__bar--inner"></div>
</div>
<div class="loading__counter">
<span>0%</span>
<div class="loading__counter--number">100%</div>
</div>
</div>
</div>
</body>
So I need some help with overlapping content on page when a button is being pressed. Right now I have a function for an active button which helps me with opening a div(div panel) and closing it. I just want to know how you would go about making this div panel stetch across the page, when the button is being pressed.
I made it work with the overlap with a function by making my container active but I realised that it was completely wrong and had to change it. So right now (as I said before) I have active buttons.
Try to make it work through my current function with the buttonS, but nothing really changed. Maybe some z-index? Check the code out.
Any suggestions?
Thanks!
Here's the code:
<!--Accordion script-->
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.classList.toggle("show");
}
}
//active container overlap
$('button').click(function(event) {
$(this).toggleClass('active');
})
//onClose function and refresh function
//var inFormOrLink;
//$('a').on('click', function() { inFormOrLink = true; });
//$('form').on('submit', function() { inFormOrLink = true; });
//$(window).on("beforeunload", function() {
//return inFormOrLink ? "Do you really want to close?" : null;
//})
body {
width: 100% margin: 0 auto;
}
.container {
width: 45%;
height: 90%;
position: absolute;
margin-top: 2%;
margin-left: 27%;
background-color: #FAF3E9;
}
#header {
width: 100%;
height: 10%;
background-color: #fff;
}
/*Del 1*/
.d1knapp button {
background-color: #fff;
cursor: pointer;
padding: 18px;
width: 70%;
border: none;
text-align: left;
outline: none;
align-items: center;
margin-top: 3%;
margin-left: 15%;
}
.nextstep button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/*Del 1 slut*/
/*Del 2*/
.box {
width: 70%;
font-size: large;
color: #17202A;
outline: none;
border: none;
padding: 12px;
border: 1px solid grey;
margin-left: 11%;
margin-top: none;
border-radius: 8px;
}
#datum {
width: 80%;
margin: -2% 11%;
}
.datumStart {
width: 30%;
float: left;
padding: 1px;
}
.datumSlut {
width: 30%;
padding: 1px;
float: left;
margin-left: 35%;
}
.skapa button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 5%;
}
/*Del 2 slut*/
/* Del 3 */
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-top: 2%;
}
button,
.accordion h3 {
text-align: center;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
}
div.panel.show {
opacity: 1;
max-height: 700px;
}
.container div.active {
height: 91%;
margin-top: 9%;
margin-bottom: 5%;
background-color: #FAF3E9;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition-duration: 0.2s;
align-items: center;
text-align: center;
}
#savechanges button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 45%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
position: fixed;
}
#addfiles button {
background-color: #158F49;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/* Del 3 slut */
/* Media del 1 */
#media only screen and (max-width: 768px) {
body {
width: 100%;
margin: 0 auto;
}
.container {
width: 80%;
margin: 7% 11%;
}
/* Del 1 */
.d1knapp button {
width: 100%;
align-items: center;
margin-left: 0;
margin-top: 6%;
position: relative;
}
.nextstep button {
position: relative;
width: 100%;
margin-top: 17%;
}
/* Del 1 slut */
/* Del 2 */
#datum {
float: left;
}
.skapa button {
position: relative;
width: 100%;
margin-top: 10%;
}
/* Del 2 slut */
/* Del 3 */
/* Del 3 slut */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="header">
<img class="logo" src="logo.png">
<!--<span style="color: blue; float: right; text-decoration: underline; text-align: center; margin-right: 5%; margin-top: 0.5%; font-family:Arial,serif;"><h3>English</h3></span>-->
</div>
<div class="dokumentation">
<button class="accordion"><h3>Dokumentation</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="rättigheter">
<button class="accordion"><h3>Rättigheter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="aktiviteter">
<button class="accordion"><h3>Aktiviteter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div id="savechanges">
<button><h2>Spara ändringarna</h2></button>
</div>
</div>
Firstly you have an error in your css, please change body to this:
body {
width: 100%;
margin: 0 auto;
}
Next, Change your container class to this:
.container {
width: 100%;
height: 90%;
position: absolute;
margin-top: 2%;
background-color: #FAF3E9;
}
By setting width:100% each element takes up the entire width of it's parent. So setting the width to 100% for body and container should solve your problem.
As the previous answer stated, you have an error in the definition of the body style. There is a ; missing after width: 100%;
As for your question, you could solve your problem by adding position: absolute to your panels, like so:
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
left: 0;
box-sizing: border-box;
position: absolute;
}
You also need to remove the max-height:0 property, to allow the div to expand to the maximum height.
Adding box-sizing: border-box; prevents the panel from adding margings or paddings to the 100% width and in so becoming bigger than their parents.
Also, adding width and height of 100% to your panels when active, makes them fill up the page:
div.panel.show {
opacity: 1;
width: 100%;
height: 100%;
}
How to achieve the carousel of multiple divs after clicking on add button? For each loop will repeat the div for every click of Add button. After click, multiple divs to be placed side by side and when it is overflow we need to do the carousel functionality for it with arrow marks as next and prev. Any Ideas on how to solve this?
.small-header {
min-height: 124px;
background-position: center right;
text-align: center;
display: table;
width: 100%;
padding: 22px 20px 0;
background: #fff;
box-sizing: border-box;
}
.small-header .vertical-align {
display: table-cell;
vertical-align: middle;
}
.component-carousel {
width: 530px;
display: block;
margin: 0 auto;
position: relative;
margin-bottom: 40px;
}
.component-carousel:before {
left: 0;
}
.component-carousel:after, .component-carousel:before {
content: "";
display: block;
position: absolute;
top: 0;
width: 20%;
height: 100%;
z-index: 1;
}
.component-carousel .outer-content {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.component-carousel .items {
position: relative;
height: 190px;
left: 145px;
}
.component-carousel .items .item {
top: 0;
left: -50px;
height: 190px;
box-sizing: border-box;
float: left;
margin: 0 20px 0 0;
position: relative;
display: table;
}
.your {
display: block;
height: 290px;
border: 2px solid #5e6a71;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
padding: 15px 0 0 0;
width: 244px;
position: relative;
background: #fff;
}
.component-carousel .bullets {
position: absolute;
bottom: -25px;
width: 100%;
text-align: center;
z-index: 3;
}
.component-carousel .bullets li {
transition: all .15s ease-out;
display: inline-block;
margin: 0 3px;
}
.your>p.card-number {
margin-top: 95px;
margin-bottom: 10px;
position: relative;
color: #5e6a71;
}
.your .infonumber {
display: block;
}
.your p.card-number:after {
content: "";
display: block;
width: 70%;
height: 1px;
background: #bec3c6;
margin: 0 auto;
margin-top: 7px;
}
.card-left:after {
content: "";
display: block;
position: absolute;
width: 1px;
height: 95px;
background: #cecfd1;
right: -15px;
top: 0;
}
.card-detail-container {
display: block;
position: absolute;
width: 100%;
height: 80px;
left: 0;
top: 180px;
color: #5e6a71;
}
.card-left {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 18px;
}
.card-right {
display: block;
float: left;
width: 50%;
position: relative;
padding:0 35px;
}
.card-detail-container p {
line-height: 14px !important;
}
.component-carousel.show-two .controls {
display: none;
}
.component-carousel .controls {
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
}
.component-carousel .controls li.disabled {
opacity: .2;
cursor: pointer;
}
.component-carousel .controls li:first-child {
left: 0;
}
.component-carousel .controls li {
transition: all .15s ease-out;
position: absolute;
top: 0;
cursor: pointer;
background: url(/image/component/carousel/arrows.png) no-repeat center left;
height: 100%;
width: 19px;
}
.component-carousel .controls li:last-child {
right: 0;
background-position: center right;
}
.button {
border: 1px solid #a8a8a8;
font-size: 14px;
font-weight: 600;
background: #FFFFFF;
position: relative;
text-decoration: none;
white-space: normal;
cursor: pointer;
color: #292929;
}
.btn {
position: relative;
color: #4f4f4f;
left: 38%;
width: 25% !important;
max-width: 580px;
text-transform: capitalize;
}
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-horizontal" }))
{
if (Model.Details != null && Model.Details.Count() > 0)
{
<div class="small-header">
<div class="vertical-align">
<div class="component-carousel">
<div class="outer-content">
<div class="mask">
<ul class="items" style="transform: matrix(1, 0, 0, 1, 0, 0);">
<li class="item">
#foreach (var item in Model)
{
<div class="your">
<p class="card-number">
<span class="infonumber">123456</span>
</p>
<div class="card-detail-container">
<div class="card-left">
<p class="card-shape-title">Circle</p>
<p class="card-barcode-title">24242</p>
</div>
<div class="card-right">
<p class="card-carat-title">222</p>
<p class="card-certificate-title"></p>
</div>
</div>
</div>
}
</li>
</ul>
</div>
</div>
<ul class="controls">
<li class="prev disabled"></li>
<li class="next"></li>
</ul>
</div>
</div>
</div>
}
<div class="btns">
<button type="submit" id="addinfo" class="btn button" value="Add">Add<span></span><span></span></button>
</div>
}
I'm pretty new to Javascript and I have an issue checking if an input is filled or not.
So here is the problem: I have a label which is over the input (position: absolute). On focus and when the input is filled the label go to the top of the input. But if I remove the text on the input, the label stay on the top of the input.
So I need something to check if the input is filled but my solution isn't working. (the label should go back to the center of the input)
Any help will be appreciate :)
document.querySelector('.form__input').addEventListener('blur', onInputBlur);
function onInputBlur(ev) {
if (ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper {
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input {
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus {
outline: none;
}
.form__input:focus+.form__label,
.input--filled+.form__label {
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus+.form__label::after,
.input--filled+.form__label::after {
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label {
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after {
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
Just remove the class in your event listener again.
document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );
function onInputBlur( ev ) {
if(ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
} else {
console.log('is-empty');
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper{
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input{
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus{
outline: none;
}
.form__input:focus + .form__label,
.input--filled + .form__label{
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus + .form__label::after, .input--filled + .form__label::after{
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label{
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after{
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
You have to remove the class if the the input is empty - see demo below:
document.querySelector('.form__input').addEventListener('blur', onInputBlur);
function onInputBlur(ev) {
if (ev.target && ev.target.value.trim().length > 0) {
ev.target.classList.add('input--filled');
} else {
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper {
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input {
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus {
outline: none;
}
.form__input:focus+.form__label,
.input--filled+.form__label {
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus+.form__label::after,
.input--filled+.form__label::after {
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label {
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after {
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
You should add ev.target.classList.remove('input--filled'); if your field is empty
document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );
function onInputBlur( ev ) {
if(ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
} else {
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper{
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input{
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus{
outline: none;
}
.form__input:focus + .form__label,
.input--filled + .form__label{
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus + .form__label::after, .input--filled + .form__label::after{
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label{
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after{
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
you need a else to remove the class
document.querySelector('.form__input').addEventListener( 'blur', onInputBlur );
function onInputBlur( ev ) {
if(ev.target && ev.target.value) {
console.log('is-full');
ev.target.classList.add('input--filled');
} else {
console.log('is-empty');
ev.target.classList.remove('input--filled');
}
}
/* FORM WRAPPER */
.form__input--wrapper{
width: 250px;
position: relative;
height: 2rem;
margin: 3rem 0;
}
/* FORM INPUT */
.form__input{
position: relative;
background-color: transparent;
width: 100%;
margin: 0;
height: 100%;
padding: 0;
border: 0;
border-bottom: 1px solid deeppink;
font-size: 15px;
}
.form__input:focus{
outline: none;
}
.form__input:focus + .form__label,
.input--filled + .form__label{
top: -100%;
align-items: flex-end;
text-transform: uppercase;
font-size: 11px;
}
.form__input:focus + .form__label::after, .input--filled + .form__label::after{
width: 100%;
bottom: calc(-100% - 0.2rem);
}
/* FORM LABEL */
.form__label{
position: absolute;
top: 0;
left: 0;
color: #404d5b;
display: flex;
align-items: center;
transition: 0.3s;
z-index: -1;
line-height: 1;
font-family: Raleway;
font-weight: 500;
font-size: 15px;
height: 100%;
width: 100%;
}
.form__label::after{
width: 0;
height: 0.2rem;
background-color: deeppink;
position: absolute;
transition: 0.3s;
content: '';
left: 0;
bottom: -0.2rem;
}
<form class="form-wrapper">
<div class="form__input--wrapper">
<input type="text" class="form__input">
<label for="name" class="form__label" id="a">My awesome label</label>
</div>
</form>
The context :
Im using a on/off switch button, where i would like the help-text to be on the same line as the switch.
It look's like this right now:
I would like it to look like this:
I've googled that i can use this is my div-style:
display:inline-block;
My code :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
My question :
Where should i put display:inline-block; in my div-style?
Both p and div should have inline-block style.
Of course, in real project I'd not put style attribute - use css classes instead.
<p style="display: inline-block">
Help Text
</p>
<div class="onoffswitch" style="display: inline-block">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Use both display : inline-block; & vertical-align : middle; on both your p element and your .onoffswitch class. That should produce the desired effect!
A demo :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
p {
display : inline-block;
vertical-align : middle;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
display : inline-block;
vertical-align : middle;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Try this Fiddle.
Note :
It's a VERY BAD idea to set display : inline-block; & vertical-align : middle; for all p elements.
It's a MUCH, MUCH better idea to add a class to your p element, like this :
<p class="help">
Help Text
</p>
Now, you can set the styles for that element like this :
p.help {
display : inline-block;
vertical-align : middle;
}
This prevents these styles from being applies to all p elements!
See also this Fiddle.