Use your left/right keys to browse tutorials
jQuery Fancy Switch

jQuery Fancy Switch

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on November 24, 2011

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



More tutorials from Papermashup
Comments
22 discussions around jQuery Fancy Switch
Older Comments
  1. Robert says:

    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!

  2. Robert says:

    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!

  3. Guhan says:

    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

  4. Ricardo says:

    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 says:

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

      DoH!

    • Ricardo says:

      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…

  5. gheumma says:

    simple, fancy and awesome :)

  6. 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.

  7. Dev Guy says:

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

  8. Mark says:

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

  9. vladuhliy says:

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

  10. manuel says:

    It doesn’t work with iPad, but cool idea

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.