I have a toggle whose checked status I am calling with jQuery. Every time I click the toggle from unchecked to checked, the console logs "do this!" twice. Why does this function fire twice and what is the workaround to get it to fire once?
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
if (document.getElementById('my-checkbox').checked) {
console.log("do this!")
}
});
.switch {
position: absolute;
top: 15%;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before,
input:checked+.slider .number {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>
My final HTML looks like this, for which the event fires three times:
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle">
<span class="number">00</span>
</span>
</label>
There are two transitionend events firing: one from your #my-toggle <span>, one from your ::before pseudo element. You need to differentiate those two events. You’d need the event argument e for that.
The only difference is then found in e.originalEvent.propertyName (for the corresponding CSS property) and e.originalEvent.pseudoElement.
So let’s check for that last property in the if condition.
Also put another && e.target == this in there, since the transitionend event is also firing for children because the event bubbles up. Since you’re only listening to the event on the parent <span>, you can’t simply call e.stopPropagation which would only be useful to prevent the parent(s) from firing the event.
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
if (document.getElementById("my-checkbox").checked && !e.originalEvent.pseudoElement && e.target == this) {
console.log("do this!");
}
});
.switch {
position: absolute;
top: 15%;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before,
input:checked + .slider .number {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id = "my-checkbox">
<span class="slider round" id = "my-toggle">
<span class="number">00</span>
</span>
</label>
This comes from the elements that are concerned by the transition.
If you put a console.log(event) (with putting it as a argument of your event handler), you will see that the concerned properties are background-color and trandform.
These 2 properties are concerned by the transition, so your event hendler is called once per property.
Here is the snippet with "filtering" on transform property:
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){
if (event.originalEvent.propertyName === "transform" && document.getElementById('my-checkbox').checked){
console.log("do this!");
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>
Use .slider instead of .switch when looking for the click function, this worked for me and I don't know why.
$('.slider').on('click',function(){
alert("Test");
});
Related
I'm trying to build a simple web application where the user can personalize his settings. In the settings page I have a few toggle buttons, so I need to chenge the button state during page load for it to match the preferences we have on the database.
The toggle button's CSS uses a :before pseudo selector (code below), so is there a way to change the button state with javascript before the page is loaded? Thanks
.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" id="privacy-button">
<span class="slider round"></span>
</label>
Adding attribute checked at input helps you to display the button as checked
<label class="switch" >
<input type="checkbox" id="privacy-button" checked="">
<span class="slider round"></span>
</label>
The Complete Code is shown below.
I would like to get the value of Switch and write it in some .txt file online and everytime when I'm opening this webpage,It should fetch the value from that .txt file online and update the switch accordingly.Is there any way to do it
I am a Newbie to JavaScript and all my Experience is in Python Programming.Therefore I am asking this question in a perspective of python (Python Files,Web Scraping,etc.)
Is JavaScript Capable enough of fetching some data from a file online and updating it Synchronously ?
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input type="checkbox" checked />
<span class="slider round"></span>
</label>
Like this for JS part:
let isChecked = document.querySelector("#switch");
isChecked.addEventListener('click', function() {
console.log(isChecked.checked)
})
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.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%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input id="switch" type="checkbox" checked />
<span class="slider round"></span>
</label>
Here is a Switch Toggle which can change the width of a div with ID "abc" and it works fine
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
let width = document.getElementById("abc").style.width;
if (width === '400px') {
document.getElementById("abc").style.width = "200px";
} else {
document.getElementById("abc").style.width = "400px";
}
}
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc{
width: 200px;
height:200px;
background: blue;
transition: width 1s;
}
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc">
</div>
but I want to use Class Name instead of ID but when I change document.getElementById() with getElementsByClassName() and change the ID of div into class Name it stop working.
How can I use here getElementsByClassName()
You could do with classList.toggle. For default you should add 200 small with class to element then toggle with bigWidth(400) Class
Don't add the width for id. Because id more specific then class. i had removed the width inside the id. And added smallWidth class
Updated
you can do with document.querySelectorAll
document.getElementById("toggleSwitch").onclick = function() {
myFunction()
};
function myFunction() {
Array.from(document.querySelectorAll(".smallWidth"))
.forEach(a => {
a.classList.toggle('bigWidth')
})
}
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.smallWidth {
width: 200px;
}
.bigWidth {
width: 400px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc {
height: 20px;
background: blue;
transition: width 1s;
margin:10px;
}
<label class="switch">
<input id="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc" class="smallWidth">
</div>
<div id="abc" class="smallWidth">
</div>
<div id="abc" class="smallWidth">
</div>
[...document.getElementsByClassName("toggleSwitch")]
.forEach(el => el.onclick = () => {
let width = document.getElementById("abc").style.width;
if (width === '400px') {
document.getElementById("abc").style.width = "200px";
} else {
document.getElementById("abc").style.width = "400px";
}
})
.switch {
position: relative;
display: inline-block;
width: 31px;
height: 19px;
margin: 0 20px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(220 220 220);
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: -10px;
bottom: -2px;
background-color: #f3f3f3;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
box-shadow: 0 1px 4px 0 rgb(0 0 0 / 37%);
}
input:checked+.slider {
background-color: #1967d263;
}
input:checked+.slider:before {
background-color: #1967d2;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
#abc{
width: 200px;
height:200px;
background: blue;
transition: width 1s;
}
<label class="switch">
<input class="toggleSwitch" type="checkbox">
<span class="slider"></span>
</label><br>
<div id="abc">
</div>
getElementsByClassName returns an array, so you will have to apply the same function to every element. Then, the function also needs to update every element, you can use the same logic for that:
var elements =
document.getElementsByClassName("toggleSwitch").forEach(element => {
element.onclick = myFunction;
})
function myFunction() {
document.getElementsByClassName("abc").forEach(element => {
let width = element.style.width;
if (width === '400px') {
element.style.width = "200px";
} else {
element.style.width = "400px";
}
})
}
I want to develop a toggle button with a checkbox using css and jquery. I want to click on the span, which represents my toggle button, to change the property checked of the given checkbox.
Unfortunately the span does not change the property. However it goes into the right jQuery function. Using the button, it is going into the function and changing the property. Can you tell me why I cannot use the span to change the property?
$(document).on("click", ".taskcomplete2", function() {
if ($(".taskcompletecheck").prop('checked')) {
$(".taskcompletecheck").prop('checked', false);
} else {
$(".taskcompletecheck").prop('checked', true);
}
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>
You need to attach the click event to the span as well
$(document).on("click",".taskcomplete2,.taskcompletecheck", function(){
....
});
$(document).on("click",".taskcomplete2,.taskcompletecheck", function(){
if($(".taskcompletecheck").prop('checked')){
$(".taskcompletecheck").prop('checked', false);
}else{
$(".taskcompletecheck").prop('checked', true);
}
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>
JS could be not necessary at all, if you set the for attribute on the labels and the id on the input
<label class="switch" for="taskcomplete">
<input type="checkbox" class="taskcompletecheck" id="taskcomplete">
<span class="slider round taskcomplete2"></span>
</label>
So since the span element is nested into the label, if you click it then the checkbox will be toggled.
You can just apply, for attribute to get button click to work, however Please use e.preventDefault();
<label for="buttonToggle" class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" id="buttonToggle" class="btn btn-danger taskcomplete2">Button</button>
Demo:
$(document).on("click",".taskcomplete2", function(e){
if($(".taskcompletecheck").prop('checked')){
$(".taskcompletecheck").prop('checked', false);
}else{
$(".taskcompletecheck").prop('checked', true);
}
e.preventDefault();
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buttonToggle" class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" id="buttonToggle" class="btn btn-danger taskcomplete2">Button</button>
$(document).on("click", ".switch", function(e) {
if ($(".taskcompletecheck").prop('checked')) {
$(".taskcompletecheck").prop('checked', false);
} else {
$(".taskcompletecheck").prop('checked', true);
}
console.log("Status :: "+$(".taskcompletecheck").prop('checked'));
e.preventDefault();
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>
Apply event on parent element.
I am trying to read a true/false value from a button slider. Here are my codes
<select name="slide-1" id="slide-1">
<option value="true">On</option>
<option value="false">Off</option>
</select>
<input type ="button" value="submit" id="btnSubmit" />
<script>
$('#btnSubmit').on('click', function () {
var $optionElement = $('#slide-1').val();
alert($optionElement);
});
</script>
I was able to read the values. However, I would like to transform the element
into a slider and at the same time still be able to read the values out of it
This is my desired slider button that I would like to achieve
I suggest trying to do this in css with a checkbox html element. Here you can find an easy implementation of how to do this with css. It might suit your needs.
Html:
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
Css:
/* The switch - the box around the slider */
.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%;
}