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
  • Newbie Drewbie

    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!

  • http://www.alphabit-ua.com/ Serge

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

  • http://www.shameonjane.com/ Teen Rings

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

  • http://inventikasolutions.com Pritesh Desai

    awesome! try to include a click sound in it

  • Sandhya

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

  • Sam

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

  • http://orakulas.lt marius

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

  • http://www.wirelesswebstudio.com Rizwan Sayyed

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

  • http://howtojailbreakiphone4s.org/ Mike

    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!

  • http://www.paulund.co.uk Paul

    Nice idea, good stuff