Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Fancy Switch ON and OFF Effects Example

Jan 5, 2013
Introduction
  
Here I will explain 
jQuery fancy switch on and switch off effects example in asp.net.

Description:
  
In previous posts I explained jQuery Google Currency Converter API Example,
jQuery Highlight gridview rows on mouseover, jQuery Change style of controls, Show multiple months in datepicker, and many articles relating to JQuery and modal popup. Now I will explain how to implement fancy switch on and off using jQuery in asp.net.

To implement this functionality we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Switch ON OFF</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<style type="text/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; margin-top:5px; font-size:14px; color:#333;}
.result span{color:#C03; font-weight:700;}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.switch').css('background', 'url("http://papermashup.com/demos/jquery-switch/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();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<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"/>
<div class="result">The switch is: <span>on</span></div>
</form>
</body>
</html>
By using above code we can implement switch on and off. If you want to know more about above code check original site jQuery fancy switch.

Live Demo

To check live demo click on below on and off switches


The switch is: on

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

11 comments :

Unknown said...

Looks great .. Great work buddy ..

Anonymous said...

very nice

Manoj said...

Awesome Trick...

rams said...

wonderfulll sir...

Unknown said...

Very good sir...........

Srinu Reddy said...

Hi,

I think it isn't working in ie8.

Regards,
Srinivas.

Suresh Dasari said...

@srinu...
it's working in all the browsers...........

Anonymous said...

Its only show 'ON' i.e The switch is: on when we click on 'OFF' It not Showing 'OFF' i.e The switch is: on

Suresh Dasari said...

i updated the code check it once demo is working fine now.

Unknown said...

Awesome one.

shushil said...

Very good trick...but it's not work in my asp page

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.