Papermashup

Subscribe


Tweets


"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 2 days ago

"@burgerbeartom @kycutwilson finally got around to using my free burgers for life! And we weren't disappointed. http://t.co/nJ6p2nLtg4"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

jQuery Fancy Switch

A beautifully designed push switch converted to toggle a radio button

AshleyAshley

I wrote a post a while back on coding an iPhone style switch using jQuery. I’ve now put together a simple tutorial demonstrating how simple it is to build a switch that triggers two radio buttons in a field set. It also degrades gracefully if JavaScript is disabled just displaying the two radio buttons with labels. This tutorial is aimed at users just stepping on the jQuery ladder, and hopefully this will demonstrate how simple some techniques are. The design of the switch was done by Shegy and you can download the full set of switch designs as a PSD here

The Code

Lets run through line by line the JavaScript. The first three lines after the DOM ready function are setup incase the user has JavaScript disabled. So if enabled we display the switch background image and hide the radio buttons as well as indent the text on the labels.

We’ve then setup a ‘change()’ function which means the function is executed each time the user selects either checkbox, we then check the value of the radio button thats been selected and adjust the background position of the sprite image.

Lastly for demo purposes im just displaying the status of the radio buttons in the div with the class ‘result’



$(document).ready(function(){

$('.switch').css('background', 'url("switch.png")');
$('.on_off').css('display','none');
$('.on, .off').css('text-indent','-10000px');

$("input[name=on_off]").change(function() {
var button = $(this).val();

if(button == 'off'){ $('.switch').css('background-position', 'right'); }
if(button == 'on'){ $('.switch').css('background-position', 'left'); }

$('.result span').html(button);
$('.result').fadeIn();

});

});

The HTML

Here we have a simple form with the two radio buttons in a fieldset.



<form action="" method="get">

<fieldset class="switch">
<label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
<label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>

<input type="submit" value="Submit"/>

</form>

<div class="result">The button is: <span>on</span></div>

The CSS



#container{background:#ebebeb;}

.switch{
border:none;
background:left no-repeat;
width:105px;
height:46px;
padding:0;
margin:0;
}

.on, .off{
width:50px;
height:40px;
display:inline-block;
cursor:pointer;
}

.result{display:none;}

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 23
  • Lakshay Dulani
    Posted on

    Lakshay Dulani Lakshay Dulani

    Reply Author

    Hi..the button is really good.. I was looking for a button that has a neutral state as well.. as in neither on nor off..Its better to give this feature


  • Robert
    Posted on

    Robert Robert

    Reply Author

    Hi everyone!
    Thanks for this great tutorial. I have a small problem and i cant find a way to fix it.

    So basically i want to position the expanding div with “position: absolute;” so that it ignores floated elements. I tried it in css, but its not working, the div is now showing.

    Anyone has a solution to this?

    Thank you!


  • Robert
    Posted on

    Robert Robert

    Reply Author

    Hi everyone!
    Thanks for this great tutorial. I have a small problem and i cant find a way to fix it.

    So basically i want to position the expanding div with “position: absolute;” so that it ignores floated elements. I tried it in css, but its not working, the div is now showing.

    Anyone has a solution to this?

    Thank you!


  • Guhan
    Posted on

    Guhan Guhan

    Reply Author

    Thanks for all the great tutorials. As a JQuery and Javascript newb, all of them seem to be exactly what I wanted to learn.

    Could anyone offer any advice on how to combine this switch with the Simple JQuery Show/Hide div tutorial? I’ve been trying to get it working but its just not coming together.

    Thanks again for the helpful tips


  • Ricardo
    Posted on

    Ricardo Ricardo

    Reply Author

    Great idea.

    However, I’m trying to implement a list of radio buttons (opt-in/opt-out options in a list of titles) but the current configuration only works for one set of 2 buttons.

    Any idea on how to make this nice script more scalable?

    I’ve tried modifying the if statements, but it doesnt work:

    { $(this).parent(‘.switch’).css(‘background-position’, ‘right’); } – Where the radio button of that specific pair is the only one that changes.

    Dang, this is where knowing much more JavaScript/jQuery would come in handy…


    • Ricardo
      Posted on

      Ricardo Ricardo

      Reply Author

      Never mind, I found my error: it’s .parents() [plural] not .parent()

      DoH!


    • Ricardo
      Posted on

      Ricardo Ricardo

      Reply Author

      There IS an issue in Firefox (13.0 at the moment of this writing) though:

      The initial state of the button is ON so if you make your first click on OFF it won’t work, you have to click on ON and then on OFF in order to turn the switch off.

      This problem doesn’t happen in IE9 nor Google Chrome.

      Oh boy…


  • gheumma
    Posted on

    gheumma gheumma

    Reply Author

    simple, fancy and awesome :)


  • Daniel from New Zealand
    Posted on

    Daniel from New Zealand Daniel from New Zealand

    Reply Author

    Nice idea, but it wont work in Opera (11.61).
    My guess is that you cannot click on the underlying input-type:radio because the element-style has display:none set. I would probably more cross-browser safe if you overlay the input field with another element and just make it to appear transparent, this way you can always interact with it and the jquery clickevent should work in all browsers.


  • Dev Guy
    Posted on

    Dev Guy Dev Guy

    Reply Author

    This is a really cool switch, I love this one.


  • Mark
    Posted on

    Mark Mark

    Reply Author

    Man this is great. Love your posts, always find something here that is useful!! Keep them coming!


  • vladuhliy
    Posted on

    vladuhliy vladuhliy

    Reply Author

    for the Ie need to remove the second line:
    $(‘.on_off’).css(‘display’,’none’);


  • manuel
    Posted on

    manuel manuel

    Reply Author

    It doesn’t work with iPad, but cool idea


  • Newbie Drewbie
    Posted on

    Newbie Drewbie Newbie Drewbie

    Reply Author

    I think it would be more efficient to create the switch template as a CSS class. Something like this:

    .switch { //basic class applied to all switches
    background-position: 0 100%;
    }
    .on { //triggered from jQuery
    background-position: 100% 100%;
    }

    Then you can add/remove the on class with jQuery:
    $(‘.switch’).addClass(‘on’);
    $(‘.switch’).removeClass(‘on’);

    Also I would personally be reluctant to use ‘display: inline-block’ as I believe it is not fully supported in IE7. ‘display: block’ and ‘float: left’ should do the trick.

    I really like the concept though, and the result looks great. I hope to see it on some websites soon!


  • Serge
    Posted on

    Serge Serge

    Reply Author

    great idea and implementation! But yes, there are issues with browsers support…


  • Teen Rings
    Posted on

    Teen Rings Teen Rings

    Reply Author

    Very nice. I was just looking for this and implement my site but but does not properly support in Ie 8, Ie 9.
    Thank you very much for sharing :)


  • Pritesh Desai
    Posted on

    Pritesh Desai Pritesh Desai

    Reply Author

    awesome! try to include a click sound in it


  • Sandhya
    Posted on

    Sandhya Sandhya

    Reply Author

    Your j query is Nice to integrate but issues is not working in All Browser


  • Sam
    Posted on

    Sam Sam

    Reply Author

    This Fancy Switch is nice but does not support in Ie 8, Ie 9.


  • marius
    Posted on

    marius marius

    Reply Author

    Mike, if you don’t like jQuery because it looks to coplex then you always can frow it away and use Javascript without any libraries.. :)

    btw. switch looks amazing and i’ll use it 😉


  • Rizwan Sayyed
    Posted on

    Rizwan Sayyed Rizwan Sayyed

    Reply Author

    Very nice. I was just looking for this, Thank you very much for sharing :)


  • Mike
    Posted on

    Mike Mike

    Reply Author

    jQuery always causes me problems while I am creating some basic websites and I have to look online for tutorials.
    Thanks Ashley for this demo!


  • Paul
    Posted on

    Paul Paul

    Reply Author

    Nice idea, good stuff