Author: | daneden |
---|---|
Views Total: | 10,420 views |
Official Page: | Go to website |
Last Update: | June 18, 2014 |
License: | MIT |
Preview:

Description:
A small Javascript widget to convert a checkbox into an iOS 7 styled on/off switch with CSS3 transitions, inspired from daneden.
How to use it:
Create a checkbox with two toggle labels.
<label class="toggler toggler--is-active" id="filt-css">CSS</label> <div class="toggle"> <input type="checkbox" id="switcher" class="check"> <b class="b switch"></b> </div> <label class="toggler" id="filt-javascript">Javascript</label>
The CSS/CSS3 styles. Create awesome iOS 7 style sliding effect using CSS3 transitions.
.toggle, .toggler { display: inline-block; vertical-align: middle; margin: 10px; } .toggler { color: slategray; transition: .2s; } .toggler--is-active { color: black; } .b { display: block; } .toggle { width: 100px; height: 60px; border-radius: 100px; background-color: #2ecc71; overflow: hidden; box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05); } .check { position: absolute; display: block; cursor: pointer; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 6; } .check:checked ~ .switch { right: 2px; left: 37.5%; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: .08s, 0s; } .switch { position: absolute; left: 2px; top: 2px; bottom: 2px; right: 37.5%; background-color: #fff; border-radius: 36px; z-index: 1; transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-property: left, right; transition-delay: 0s, .08s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
The Javascript to enable the switch control.
var e = document.getElementById("filt-css"), d = document.getElementById("filt-javascript"), t = document.getElementById("switcher"); e.addEventListener("click", function(){ t.checked = false; e.classList.add("toggler--is-active"); d.classList.remove("toggler--is-active"); }); d.addEventListener("click", function(){ t.checked = true; d.classList.add("toggler--is-active"); e.classList.remove("toggler--is-active"); }); t.addEventListener("click", function(){ d.classList.toggle("toggler--is-active"); e.classList.toggle("toggler--is-active"); })