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
Newer Comments
  1. Newbie Drewbie says:

    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!

  2. Serge says:

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

  3. Teen Rings says:

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

  4. awesome! try to include a click sound in it

  5. Sandhya says:

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

  6. Sam says:

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

  7. marius says:

    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 ;)

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

  9. Mike says:

    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!

  10. Paul says:

    Nice idea, good stuff

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