Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create an on/off switch with Javascript/CSS?

I want to have a sliding switch. On the left would be Off and on the right would be On. When the user toggles the switch, I want the 'slider' portion to slide to the other side and indicate it is off. I could then have a callback that takes as input the state of the toggle switch so I can act accordingly.

Any idea how to do this?

like image 235
esac Avatar asked Dec 24 '09 08:12

esac


People also ask

How do you make a switch button in CSS?

To create a toggle switch first add an HTML checkbox using <input> tag with type="checkbox" . Now we need to add the CSS properties to create it as a toggle switch. We will hide the default checkbox and add a slider to it. Use the position property to position the slider with respect to the switch.

How do you toggle and off in JavaScript?

Default hotkey (shortcut) to toggle JS engine on and off is "Alt + Shift + L." Still, there is no UI to edit this default shortcut.

How do you toggle a button in JavaScript?

We can toggle a button using conditional statements like if-else statement in JavaScript. We can toggle almost all the properties of an element like its value, class, id, and color in JavaScript. To change any property of an element, we need to get the element using its id or class.

How do you make an off switch in HTML?

We can do that by using the HTML label tag and HTML input type = checkbox. HTML code: The HTML code is used to create a structure of toggle switch.


2 Answers

check out this generator: On/Off FlipSwitch

you can get various different style outcomes and its css only - no javascript!

like image 195
anna.mi Avatar answered Sep 26 '22 18:09

anna.mi


You mean something like IPhone checkboxes? Try Thomas Reynolds' iOS Checkboxes script:

Once the files are available to your site, activating the script is very easy:

...

$(document).ready(function() {   $(':checkbox').iphoneStyle(); }); 

Results:

like image 20
Alex Reitbort Avatar answered Sep 25 '22 18:09

Alex Reitbort