I have the following code that works very nice and sweetly
HTML
<button id="changeColor">changeColor</button>
-Javascript
<script>
document.getElementById("changeColor").addEventListener('click', function(){
document.getElementsByClassName("Bkground")[0].style.backgroundColor = document.getElementById("changeColor").check ? "white" : "black";
});
</script>
- I would like to use the CSS Switch below instead of the HTML button to switch between white and black
<style>
.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%;
}
</style>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
-please note that my class is "Bkground" that's why I had document.getElementsByClassName(Bkground)
I want to fix two things
I would like to use the CSS Switch instead of the HTML button to switch between white and black
I want to be able to switch between two colors (black and white) when the button being clicked
like
<script>
if ( document.getElementById("changeColor").addEventListener('click', function(){
document.getElementsByClassName("mainWrapper fullWidth")[0].style.backgroundColor = document.getElementById("changeColor").changeColor ? "white" : "black");
else ( document.getElementById("changeColor").addEventListener('click', function(){
document.getElementsByClassName("mainWrapper fullWidth")[0].style.backgroundColor = document.getElementById("changeColor").changeColor ? "black" : "white");)
});
</script>
You need to simple change (add and remove a CSS class), and change UI based on it. This will be easiest.
$(document).ready(function(){
$("#changeColor").click(function(){
$("p").toggleClass("changed");
$("#changeColor").toggleClass("changed");
$("body").toggleClass("changed");
});
});
body {background: pink;}
body.changed {background:gray;}
button {background: yellow;}
button.changed {background: green;}
p {background: orange;}
p.changed {background: blue;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="changeColor">Toggle</button>
<p>This is a paragraph.</p>
Related
How can I create a toggle element without using pseduo ::before and ::after?
I want to create a toggle on an html page but without using the pseudo ::before and ::after.
I am currently using the method from w3Schools given here: https://www.w3schools.com/howto/howto_css_switch.asp
However, I don't want any ::before or ::after psuedo classes. I just want classes by alone, if possible. I tried rewriting my own class for this but didn't seem to work as intended.
/* 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%;
}
I tried making a sliderbefore element myself without the psudeo and it didn't seem to work. (it was missing the small circle inside the toggle)
.sliderbefore {
border-radius: 34px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
box-shadow: 0 0 1px #2196F3;
}
With classList.toggle:
const a= document.getElementsByClassName('a');
const b= document.getElementsByClassName('b');
function changeColor(){
a[0].classList.toggle("d");
b[0].classList.toggle("e");
}
.a{
position: absolute;
border:1px solid red;
width: 500px;
height:300px;
background:green;
}
.b {
left:51px;
position: absolute;
top:2px;
float: right;
border-radius:50%;
width: 35px;
height:35px;
background: white;
transition: all 0.1s;
}
.c {
position: absolute;
top:40px;
left:130px;
border-radius:20px;
width: 90px;
height:40px;
background: #ced0d4;
}
.d{
background: blue;
}
.e{
left:4px;
}
<div class="a">
<div class="c" onclick="changeColor()">
<div class="b"></div>
</div>
</div>
I was able to create a toggle element by using javascript and html only instead of psuedo :before and :after
<html><head></head>
<script type="text/javascript">
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
The element is an input which has a Value of ON.
The Toggle function will switch the toggler on and off when clicked.
I want to modify a url according to the click on the switch button (input checkbox).
I can not change the url on click as for the price. I would like that at the second click, the url (of the button) will return this initial value (url1).
The price is correct ... On click, change is good, but url is not good :/
Thank's for your help
function show() {
var x = document.getElementById("price");
if (x.innerHTML === "59€") {
x.innerHTML = "89€";
} else {
x.innerHTML = "59€";
}
var x = document.getElementById("url1").href;
if (x.href === "url1") {
document.getElementById("url1").href = "url2";
} else {
document.getElementById("url1").href = "url";
}
}
body{font-family:arial, 'sans serif';}
.btn{
background:#000;
padding:10px;
color:#fff;
text-decoration:none;
font-family:arial, 'sans serif';
margin:0 auto;
width:150px;
display:block;
text-align:center;
border-radius:10px;
}
.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%;
}
h3{
text-align:center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
There are 2 problems. First, here:
var x = document.getElementById("url1").href;
if (x.href === "url1") {
You put the href into the x variable, but then you try to examine the x variable's href - but strings don't have a href property. Just examine the x itself instead.
Secondly, the .href property will return the full path of the link. For example, in the Stack Snippet, it returns https://stacksnippets.net/url1. Use getAttribute instead:
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url1' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.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%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
You already set the url to variable "x". So the if-condition has to be directly on the string and not the element:
//[...]
var x = document.getElementById("url1").href;
if (x === "url1") {
document.getElementById("url1").href = "url2";
}
//[...]
Perfect ! Thank you
Just ! : 'url' ? 'url2' : 'url'; VS 'url1' ? 'url2' : 'url'; :)
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
function show() {
const price = document.getElementById("price");
price.textContent = price.textContent === "59€" ? "89€" : "59€";
const anchor = document.getElementById("url1");
anchor.href = anchor.getAttribute('href') === 'url' ? 'url2' : 'url';
}
body {
font-family: arial, 'sans serif';
}
.btn {
background: #000;
padding: 10px;
color: #fff;
text-decoration: none;
font-family: arial, 'sans serif';
margin: 0 auto;
width: 150px;
display: block;
text-align: center;
border-radius: 10px;
}
.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%;
}
h3 {
text-align: center;
}
<p>Click here</p>
<label class="switch">
<input onclick="show()" type="checkbox">
<span class="slider round"></span>
</label>
<h3 class="price-presta" id="price">59€</h3>
<a class="btn" id="url1" href="url1">url link button</a>
<!-- url does not change on second click like the price -->
I want to use a form with a checkbox as follow :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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%;
}
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<form id= "test" method="POST" action="test">
})
<input type="checkbox"
name='switch'
onClick="document.forms['test'].submit();"
>
<span class="slider round"></span>
</label>
</form>
</body>
So far I've been able to do it for submit button using the following script:
....
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#test').ajaxForm(function() {
alert("");
});
....
But this isn't working apparently for checkbox. Any idea how may I do it!
thanks in advance !
This will be done as below:
$(document).ready(function() {
$('#test').on('submit', function(e) {
e.preventDefault();
alert("");
});
You need to use the "onchange" event instead of "onclick" and check the value. If it is checked, submit the form. And remove the event after, otherwise the form can be submited multiple times when toggling.
But it sounds simpler to use a button and style it like a checkbox with an image.
<button type="submit"><img src="/img/checkbox.png" alt="Checkbox" /></button>
You need no additional javascript for this and it is trivial to make the on/off state with CSS.
Also obviously use your ajaxForm function to avoid a page reload. Otherwise the "on" state will never be visible.
Try using the preventDefault() function, along the lines:
....
// wait for the DOM to be loaded
$(document).ready(function() {
const form = document.getElementById('test');
form.onsubmit = function (event) {
alert("");
// For this example, don't actually submit the form
event.preventDefault();
}
....
Use e.preventDefault(); in on click event
Codepen example
How preventDefault() works?
Also there are some mistakes in HTML structure
you opened label tag before the form so you should close it after
the form.
there are additional bracket and parenthesis
$(document).ready(function() {
$('#togglSwitch').change(function() {
alert("Handler for .submit() called.");
event.preventDefault();
$(this).closest("form").submit();
});
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Toggle Switch</h2>
<form id="test" method="POST" action="test">
<label class="switch">
<input type="checkbox"
name='switch' id='togglSwitch'
>
<span class="slider round"></span>
</label>
</form>
<div id="other">
Trigger the handler
</div>
Note:- You need to add event.preventDefault and need to add submit event on change is the solution for your problem
Call function on onclick of CheckBox
i.e.
<input type="checkbox" name='switch' onClick="myfunc();">
<script>
function myfunc()
{
Here write the code of Ajax to submit the form.
}
</script>
I'm trying to make a switch bar change between two sets of text. I've got the switch and the slider working but can't figure out how to attach the funciton to the slider.
I've made testing environment using W3School:
https://www.w3schools.com/code/tryit.asp?filename=FVEFVIB1J6D2
The switch code had the formatting correct but its not taking the formatting for the graphic.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-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: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<p>
<switch onclick="myFunction()">Choose your lenght </switch>
</p>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer Story</div>
You just need to attach a listener to the input changes
HTMLInputElementObject.addEventListener('input', function (evt) {
myFunction();
});
assuming "input" as HTMLInputElementObject:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.innerHTML === "Longer text") {
x.innerHTML = "Shorter text";
} else {
x.innerHTML = "Longer text";
}
}
document.getElementById("mySlider").addEventListener('input', function (evt) {
myFunction();
});
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-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: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;}
<label class="switch">
<input type="checkbox" id="mySlider">
<span class="slider round"></span>
</label>
<div id="myDIV">Longer text</div>
Your're almost finished. All you have to do is add an onClick callback to the span with the class slider round like this:
<label class="switch">
<input type="checkbox">
<span class="slider round" onclick='myFunction()'></span>
</label>
Your onclick needs to be on the input element or span element like so
<label class="switch">
<input type="checkbox" onclick="myFunction()">
<span class="slider round"></span>
</label>
I also cleaned up your code for you since your style tags was inside the body and you had extra body tags and your elements were outside the html tag for whatever reason.
https://www.w3schools.com/code/tryit.asp?filename=FVEGHO8VCQJA
You have to include the onclick to the checkbox with this as parameter.
<input type="checkbox" onclick='myFunction(this)'>
this is necessary to check if the checkbox is checked or not. If it is true than use the second text, otherwise use the first text.
Example for multiple usage
var text = {
1: ["Longer text", "Shorter text"],
2: ["Another longer text", "Another shorter text"]
// Add more
}
var output1 = document.getElementById("output");
var output2 = document.getElementById("output2");
function switchText(that, output, text) {
switch (that.checked) {
case true:
output.innerHTML = text[1];
break;
default:
output.innerHTML = text[0];
}
}
function switchFirstText(that) {
switchText(that, output1, text[1]);
}
function switchSecondText(that) {
switchText(that, output2, text[2]);
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #009bff;
-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: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(55px);
-ms-transform: translateX(55px);
transform: translateX(55px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!-- First checkbox -->
<div>Choose your length</div>
<label class="switch">
<input onclick="switchFirstText(this)" type="checkbox">
<span class="slider round"></span>
</label>
<div id="output">Longer text</div>
<br>
<hr>
<br>
<!-- Second checkbox -->
<div>Choose your length 2</div>
<label class="switch">
<input onclick="switchSecondText(this)" type="checkbox">
<span class="slider round"></span>
</label>
<div id="output2">Another longer text</div>
I have a toggle button which is working, i just want to create a button that will only interect with the toggle, when i click the button the toggle will go on, when i click again in the button the toggle will go off.
Toggle.html
<ion-toggle class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)" #ioToggle ></ion-toggle>
Is there a way to do it ?
First add [(ngModel)]="status"
<ion-toggle [(ngModel)]="status" class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)" #ioToggle ></ion-toggle>
Then add a button:
<!-- Bind the click event to a method -->
<button ion-button (click)="buttonClick($event)">
Click me!
</button>
in .ts:
First define status at the beginning of the class, and then define the buttonClick function:
...
status = false;
...
buttonClick(event) {
this.status = !this.status
}
function switchx(){
var x = document.getElementById('input1')
x.checked = !x.checked}
/*the stopit function prevents being able to click on the switch */
function stopit(){
var x = document.getElementById('input1')
x.checked = !x.checked
}
#button2{
display:none;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<h2>Toggle Switch</h2>
<label class="switch">
<input id='input1' type="checkbox" onclick='stopit()'>
<span class="slider"></span>
</label>
<button id='button1' onclick='switchx()'>switch</button>