I can't figure out how to get both of these effects (see code snippet below) on inputs using focus. I noticed that the focus works only for this element which is first in line. Can someone tell me why? And is it possible to get both effects on focus without using JavaScript?
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"] {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus + .border,
input[type="email"]:focus + .border {
transform: scaleX(1);
}
input[type="text"]:focus + label,
input[type="email"]:focus + label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}
<form action="">
<div class="expand">
<input type="text" name="" id="">
<!-- border before label -->
<div class="border"></div>
<label for="">Here works border effect</label>
</div>
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>
If using the + selector only the direct sibling will be affected, instead use ~
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
textarea {
resize: none;
margin-bottom: -1px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus ~ .border,
input[type="email"]:focus ~ .border,
textarea:focus ~ .border {
transform: scaleX(1);
}
input[type="text"]:focus ~ label,
input[type="email"]:focus ~ label,
textarea:focus ~ label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}
<form action="">
<div class="expand">
<input type="text" name="" id="">
<!-- border before label -->
<div class="border"></div>
<label for="">Here works border effect</label>
</div>
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>
Here the fiddle: https://jsfiddle.net/3nw7mkfe/1/
You can concatenate selector + like > or ~ or other.
<form action="">
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
textarea {
resize: none;
margin-bottom: -1px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus + label + .border,
input[type="email"]:focus + label + .border,
textarea:focus + .border {
transform: scaleX(1);
}
input[type="text"]:focus + label,
input[type="email"]:focus + label,
textarea:focus + label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}
Your effective selectors are input:focus + .border and input:focus + label (with two types of inputs, but that does not matter for the working). The + selector only selects the adjacent sibling. If you want to make it work independent of the order of the label and border, you should use the general sibling selector ~. That would select any sibling after the selected element, not just the adjacent one.
Thus, your selectors will become input:focus ~ .border and input:focus ~ label. Hope that helps.
A good overview of selectors and combinators is given at MDN. There are some pretty powerful ones!
This will do it for what you need
form {
margin: 30px;
font-family: Arial;
}
.expand {
display: block;
position: relative;
margin-top: 20px;
width: 300px;
}
input[type="text"],
input[type="email"],
textarea {
border: none;
background-color: #eee;
padding: 10px;
width: 280px;
}
textarea {
resize: none;
margin-bottom: -1px;
}
.border {
position: absolute;
display: block;
height: 3px;
width: 100%;
top: 100%;
background: red;
transform: scaleX(0);
transition: transform 0.5s;
transform-origin: 0 50%;
}
label {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.2s;
margin-left: 10px;
}
input[type="text"]:focus + label + .border,
input[type="email"]:focus + label + .border,
textarea:focus + .border {
transform: scaleX(1);
}
input[type="text"]:focus + label,
input[type="email"]:focus + label,
textarea:focus + label {
top: -10px;
font-size: 12px;
color: red;
font-weight: bold;
margin: 0;
}
<form action="">
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
<div class="expand">
<input type="email" name="" id="">
<!-- border after label -->
<label for="">Here works label effect</label>
<div class="border"></div>
</div>
</form>
Check this it will work as you need
Related
Inside my Angular app , i ve this form template :
<div class="row">
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Name</span>
<button class="reset_input border-0 bg-transparent p-0 m-0"><i class="icon-delete"></i>
</button>
</label>
<span class="error "><span class="alert-icon icon-error-severe" aria-hidden="true"></span>Caractère invalide</span>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Surname</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">CIN</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Ville</span>
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-input">
<label>
<input required>
<span class="placeholder">Departement</span>
</label>
</div>
</div>
</div>
And i'm applying this css :
.bloc_advanced_search {
padding-top: 0.938rem;
position: relative;
margin-bottom: 1.875rem;
padding-bottom: 0.938rem;
}
#search_collapse { padding-top: 1.563rem;}
#search_collapse.show {
padding-bottom: 2.813rem;
}
.bloc_advanced_search .title_home {
font-size: 1.875rem;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.13;
letter-spacing: normal;
color: #ffffff;
padding-bottom: 0.9375rem;
position: relative;
width: calc(100% - 3.75rem);
}
.bloc_advanced_search .title_home::after {
position: absolute;
bottom: 0;
left: 0;
width: 1.875rem;
height: 0.375rem;
content: "";
background: #ff7900;
}
.bloc_advanced_search .form-input {
margin: 0 0 1.25rem;
width: 100%;
}
.bloc_advanced_search .form-input label {
position: relative;
display: block;
width: 100%;
min-height: 2.813rem;
}
.bloc_advanced_search .form-input .placeholder {
position: absolute;
display: block;
top: 1.375rem;
z-index: 2;
font-size: 1.125rem;
transition: all 200ms ease-in-out;
width: 100%;
cursor: text;
color: #808080;
}
.bloc_advanced_search .form-input input {
background: #000;
position: absolute;
top: 0.625rem;
z-index: 1;
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
.bloc_advanced_search .form-input input {
height: 2.813rem;
}
.bloc_advanced_search .form-input input::-ms-clear {
display: none;
}
.bloc_advanced_search .form-input input:focus,
.bloc_advanced_search .form-input input:valid {
border-bottom: 2px solid #fff;
}
.bloc_advanced_search .form-input input:focus + .placeholder,
.bloc_advanced_search .form-input input:valid + .placeholder {
top: 0;
cursor: inherit;
font-size: 0.75rem;
color: #808080;
}
.bloc_advanced_search .btn-bottom {
padding-top: 1.25rem;
}
.bloc_advanced_search .rectangle {
width: 3.125rem;
height: 3.125rem;;
padding: 1.188rem 1rem;
background-color: #ff7900;
color: #fff;
position: absolute;
right: 0.938rem;
top: 0;
}
.bloc_advanced_search .rectangle::after {
content: "\e93f";
font-family: icon-orange, sans-serif;
transform: rotate(90deg);
display: block;
font-size: 1.25rem;
vertical-align: top;
margin-top: -0.313rem;
}
.bloc_advanced_search .rectangle.disabled {
background-color: #333333;
color: #000;
}
.bloc_advanced_search.interne .rectangle {
top: -0.938rem;
}
.bloc_advanced_search.interne .rectangle[aria-expanded=false]::after {
transform: rotate(-90deg);
}
.bloc_advanced_search .reset_input {
position: absolute;
right: 0.625rem;
bottom: -0.188rem;
font-size: 1.5rem;
z-index: 2;
color: #fff;
line-height: normal;
}
My problem is in particular in IPAD mode ,
When changing my focus from an input to another , the IOS Keyboard seems to be closed and reopened betwen an input to another , that results me to double click each time on every input to get it fosused (and in parallel a close/open keyboard each time
My purpose , is to , to keep the keyboard appearing when flying from an input to another , and with a simple one ckick , setting focus on desired input and beeing able to write.
Of course when click outside the form or inputs zone , the keyboard should diseppear .
Is there any simple way to do it properly ??
i correct it
by changing z-index , and making the input in front of the placeholder
Furthemore i set the background of input as transparent to make the plaeholder visible also
.bloc_advanced_search .form-input input {
background: transparent; /* <- THIS */
position: absolute;
top: 0.625rem;
z-index: 3; /* <- THIS */
width: 100%;
font-size: 1.125rem;
border: 0;
border-bottom: 1px solid #d8d8d8;
transition: border-color 200ms ease-in-out;
outline: none;
padding: 0;
margin: 0;
color: #fff;
padding-right: 2.813rem;
border-radius: 0;
box-shadow: none;
outline: none;
}
I would like to connect two labels and toggle switches.
If you click the toggle switch, it is desired that the switch is activated when you click the respective labels. However, if you click on the same label, you do not want the switch to move.
I made a toggle switch along this link https://www.w3schools.com/howto. This button works very well. But I don't know what to do to achieve the effect I want.I tried putting two options in the label, but the layout is broken.
I can't use other frameworks such as jQuery. Pure JavaScript support is available.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.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);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
This would be simple to solve with JavaScript, but it's a more interesting question with pure CSS/HTML.
Explanation: pointer-events: none disables clicks from having any effect. pointer-events: all is used selectively on child elements to re-enable clicking on them, depending on the checked state of the input.
/* the interesting bit */
.label {
pointer-events: none;
display: flex;
align-items: center;
}
.switch,
.input:checked + .label .left,
.input:not(:checked) + .label .right {
pointer-events: all;
cursor: pointer;
}
/* most of the stuff below is the same as the W3Schools stuff,
but modified a bit to reflect changed HTML structure */
.input {
display: none;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .label .slider {
background-color: #2196f3;
}
input:focus + .label .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .label .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* styling to make it look like your screenshot */
.left, .right {
margin: 0 .5em;
font-weight: bold;
text-transform: uppercase;
font-family: sans-serif;
}
<input class="input" id="toggle" type="checkbox">
<label class="label" for="toggle">
<div class="left">
Option A
</div>
<div class="switch">
<span class="slider round"></span>
</div>
<div class="right">
Option B
</div>
</label>
This will help you perfectly using two radio button.
HTML :-
<div class="normal-container">
<div class="smile-rating-container">
<div class="smile-rating-toggle-container">
<form class="submit-rating">
<input id="meh" name="satisfaction" type="radio" />
<input id="fun" name="satisfaction" type="radio" />
<label for="meh" class="rating-label rating-label-meh">Bad</label>
<div class="smile-rating-toggle"></div>
<div class="toggle-rating-pill"></div>
<label for="fun" class="rating-label rating-label-fun">Fun</label>
</form>
</div>
</div>
</div>
CSS:-
.smile-rating-container {
position: relative;
height: 10%;
min-width: 220px;
max-width: 520px;
margin: auto;
font-family: 'Roboto', sans-serif;
top: 20%;
}
.submit-rating {
display: flex;
align-items: center;
justify-content: center;
}
.rating-label {
position: relative;
font-size: 1.6em;
text-align: center;
flex: 0.34;
z-index: 3;
font-weight: bold;
cursor: pointer;
color: grey;
transition: 500ms;
}
.rating-label:hover, .rating-label:active {
color: grey;
}
.rating-label-fun {
left: -58px;
text-align: right;
}
.rating-label-meh {
left: 58px;
text-align: left;
color: #222;
}
.smile-rating-container input {
display: none;
}
.toggle-rating-pill {
position: relative;
height: 65px;
width: 165px;
background: grey;
border-radius: 500px;
transition: all 500ms;
}
.smile-rating-toggle {
position: absolute;
width: 54px;
height: 54px;
background-color: white;
left: 182px;
border-radius: 500px;
transition: all 500ms;
z-index: 4;
}
/*
Toggle Changes
*/
#meh:checked~.rating-label-meh {
color: #2196f3;
}
#fun:checked~.rating-label-meh {
color: grey;
}
#fun:checked~.mouth {
border: 4px solid #2196f3;
border-bottom-color: rgba(1, 1, 1, 0);
border-right-color: rgba(1, 1, 1, 0);
border-left-color: rgba(1, 1, 1, 0);
top: 23px;
left: 291px;
transform: rotateX(180deg);
border-radius: 100%;
}
#fun:checked~.rating-label-fun {
color: #2196f3;
}
#fun:checked~.smile-rating-toggle {
left: 282px;
}
#fun:checked~.rating-eye-left {
left: 292px;
}
#fun:checked~.rating-eye-right {
left: 316px;
}
#fun:checked~.toggle-rating-pill {
background-color: #2196f3;
}
#fun:checked~.rating-eye {
background-color: #2196f3;
}
We are displaying text & two radio buttons in page....
Once we click on Radio buttons, we are changing background color of page according to radio button....
Requirement :
Instead of Background color, i want to change the text color onclick radio button....
I tried below , but it did't worked :
.orange input:checked ~ .text {
color: #F4511E;
}
Code Snippet
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
.orange input:checked ~ .layer {
background: #F4511E;
}
.amber input:checked ~ .layer {
background: #FFB300;
}
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>
You need to use JS/jQuery for this because > + ~ this are siblings selector so it only select item that are next to it
+ is the immediate subsequent sibling selector
~ is the any subsequent sibling selector
UPDATED PEN
$('input[type="radio"]').on('click', function() {
let color = $(this).parent().find('div.button span').css('background-color');
$('.text').css('color', color);
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
/* .orange input:checked ~ .layer {
background: #F4511E;
}
.amber input:checked ~ .layer {
background: #FFB300;
} */
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
Use below jQuery using siblings
$('input[type="radio"]').change(function () {
if($(this).is(":checked") && $(this).val() == 'amber'){
$(this).parent().siblings('div.text').css('color', '#FFB300');
}
else{
$(this).parent().siblings('div.text').css('color', '#F4511E');
}
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>
You need jQuery/js for that - This is a Solution with jQuery:
$(document).ready(function() {
var text = $('.text')
$('input:radio').change(function() {
if ($(this).is(':checked')) {
var color = $(this).val();
text.css('color', color);
}
});
});
Fiddle here: http://jsfiddle.net/tpq16r5L/4/
Alos please be aware that amber is no usable color, so I changed that for exemplary usage to green
Updated answer is here
function myColour(clr)
{
alert(clr);
if(clr == 'orange')
document.getElementsByClassName("text")[0].style.color = '#F4511E'
else if(clr == 'amber')
document.getElementsByClassName("text")[0].style.color = '#FFB300'
else
document.getElementsByClassName("text")[0].style.color = 'black'
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
<body>
<div class="text">text</div>
<label class="orange">
<input onclick="myColour('orange')" type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input onclick="myColour('amber')" type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>
I am trying to use a toggle button to change a message, but unfortunately it is not working if you keep pressing.
That is my HTML code:
toggled = true;
togBtn.onclick = function() {
var text = "SELL"
if (!toggled) {
document.getElementById("test1").style.display = "none";
toggled = true;
}
if (toggled) {
document.getElementById("test1").innerHTML = text;
toggled = false;
}
};
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-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(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="on" name="on" id="on">SELL</span>
<span class="off" name="off" id="off">BUY</span>
</div>
</label>
</form>
</div>
<div class="box">
</div>
</section>
</body>
I add the variable toggled to be used to change the name in HTML.
The button works for two clicks only, after that, it seen no work anymore.
This is so much simpler than you are making it. There's no need for two span elements and then toggling the display of each. Just use one span and update its text based on what the text currently is.
Also, your HTML isn't valid. You're using the label element incorrectly.
var btn = document.querySelector(".slider.round");
var output = document.querySelector(".onOff");
var test1 = document.getElementById("test1");
btn.addEventListener("click", function () {
var text = (output.textContent === "Buy") ? "Sell" : "Buy";
output.textContent = text;
test1.textContent = text;
});
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-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(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.onOff {
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked + .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<!-- You shouldn't use a label here -->
<div class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="onOff" name="onOff">Buy</span>
</div>
</div>
</form>
</div>
<div class="box"></div>
</section>
You're logic was a little off. You need to update the innerHTML if toggle is true or false. The element was disappearing because of this line: document.getElementById("test1").style.display="none";. On the first click it was true, so ran the code: document.getElementById("test1").innerHTML="BUY";. On the second click toggle equalled false, so ran document.getElementById("test1").style.display="none"; and got rid of the text.
Update your script to this, so that it updates the text value when toggle is true or false respectively:
let toggled = true;
togBtn.onclick = function(){
if(toggled){
document.getElementById("test1").innerHTML="SELL";
toggled = false;
} else {
document.getElementById("test1").innerHTML="BUY";
toggled = true;
}
};
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-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(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked+ .slider .on {
display: block;
}
input:checked + .slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="on" name="on" id="on">SELL</span>
<span class="off" name="off" id="off">BUY</span>
</div>
</label>
</form>
</div>
<div class="box">
</div>
</section>
</body>
No need to write these if conditions. You can simply do it using ternary operator on click event and change the text like this
togBtn.onclick = function() {
var obj = document.getElementById("test1");
obj.innerHTML == "BUY"? (obj.innerHTML = "SELL"):(obj.innerHTML = "BUY");
};
#newsletter {
color: #ffffff;
background: #1d3030;
height: 60px;
}
#newsletter h1 {
float: left;
padding-left: 600px;
}
#newsletter form {
float: right;
}
.switch {
position: relative;
display: inline-block;
width: 115px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e8491d;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
-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(80px);
-ms-transform: translateX(80px);
transform: translateX(80px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<section id="newsletter">
<div class="container">
<h1 id="test1">BUY</h1>
<form method="post" action="">
<label class="switch">
<input type="checkbox" id="togBtn" class="togBtn">
<div class="slider round">
<span class="on" name="on" id="on">SELL</span>
<span class="off" name="off" id="off">BUY</span>
</div>
</label>
</form>
</div>
<div class="box">
</div>
</section>
</body>
change:
document.getElementById("test1").style.display="none";
to:
document.getElementById("test1").innerHTML="BUY";
Alternatively, if you don't want the header to change, just the button, you can remove all of the javascript, and the button will still work, and keep changing when you press it
I have div with 3 divs in it.
In left and right div are text and in center div needs to be toggle switch.
Here is code
<div class="doctors-appointment">
<div class="Row">
<div class="Column">
<b>Doctor's appointment</b>
</div>
<div class="Column">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="Column">
<b>For internal purposes</b>
</div>
</div>
</div>
But toggle switch not in div
Here is screen:
I get styles from there w3school
Here is css for divs
.doctors-appointment {
clear: both;
width: 100%;
margin-top: 100px;
color: #1d69b4;
font-size: 20px;
}
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
Where is my problem?
Add this CSS
.doctors-appointment {
clear: both;
width: 100%;
margin-top: 100px;
color: #1d69b4;
font-size: 20px;
}
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.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);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div class="doctors-appointment">
<div class="Row">
<div class="Column">
<b>Doctor's appointment</b>
</div>
<div class="Column">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="Column">
<b>For internal purposes</b>
</div>
</div>
</div>
You can make just with your input and with some styles, you do not need actually a new span.
Here I upload a codepen using sass.
Your input should be like:
<input class="switch" type="checkbox" />
And the styles:
.switch{
-webkit-appearance: none;
height: 1rem;
width: 3rem;
background-color: gray;
border-radius: 43px;
position: relative;
cursor: pointer;
&::after {
top: 1px;
left: 2px;
content: '';
width: 0.8rem;
height:0.8rem;
background-color:lightgray;
position: absolute;
border-radius: 100%;
transition: 1s;
}
&:checked {
background-color: blue;
&::after {
transform: translateX(2rem);
}
}
&:focus {
outline-color: transparent;
}
}
https://codepen.io/jdtorregrosas/pen/qLzvye