jQuery-less Checkbox Slider
I think jQuery is great. I mean I use all the time and I can’t imagine constructing web pages without it these days. I can quickly develop rich web applications better I please in and functional in a short amount of time . It’s incredibly easy to use and flexible allowing you to create animations manipulate the DOM and connect to my backend services with ease. But there’s also a downfall; developers often use jQuery as a crutch, cutting corners and over using it in places where its not needed. It can make us lazy and I’m all I’m guilty of this myself sometimes. We should stop and ask: do I really need jQuery here can this be done without it? With some clever markup, a little bit of creativity and ingenuity, we often can do without it.
In a recent project the designs called for some animated toggle UI controls so I give the try with just HTML/CSS- and here’s what I got . A jQuery-less way of making form sliders using an input checkbox.
The Markup
<div class="checkWrap left"> <input id="google" class="toggle" name="google" type="checkbox"> <label for="google" data-default="Off" data-checked="On"></label> </div> |
The CSS
.checkWrap{
position:relative;
background:#e1e1e1;
width:90px;
}
.checkWrap input{
width:90px;
display:block;
height:30px;
opacity:0;
cursor:pointer;
}
.checkWrap label{
position:absolute;
top:0px;
-webkit-transition: .6s ease-in-out;
-moz-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
transition: .6s ease-in-out;
-webkit-transform:translateX(0px);
-moz-transform:translateX(0px);
-ms-transform:translateX(0px);
-o-transform:translateX(0px);
transform:translateX(0px);
height:30px;
width:45px;
color:#fff;
line-height:30px;
display:block;
background:#9e9e9e;
}
.checkWrap label:before{
display:block;
content:attr(data-default);
height:30px;
width:45px;
font-size:16px;
text-align:center;
}
.checkWrap input:checked + label{
background:#ec7404;
-webkit-transform:translateX(45px);
-moz-transform:translateX(45px);
-ms-transform:translateX(45px);
-o-transform:translateX(45px);
transform:translateX(45px);
}
.checkWrap input:checked + label:before{
display:block;
content:attr(data-checked);
height:30px;
width:45px;
} |
The jQuery
Umm… None!
Example
When styling elements, and you need to resort to jQuery in order to style it the way the designs suggest, it adds weight to the page. It may only be a small snippet here and there, but they can add up. Especially if you are simply loading the entire jQuery library for a few small things. Whenever you need to manipulate the DOM ofter its loaded, it adds weight to the page; and if I can avoid it, I will. When Im writing mark-up for designs I usually ask myself, can I do this without scripting? Typically this is just a thought experiment to see if I can come up with some creative CSS to accomplish it, but sometimes that experiment creates something useful that I can implement. This was one of those times. The markup, the css , the jQuery… none!