LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Switch, With Checkbox's

Just a simple switch for you. Works in all modern browsers and even IE7 and above. I know right!? Feel free to download, edit, and do whatcha like.

Originaly Built By Victor Knust, But now modified by ZoFish.com to include a real life application, Checkbox's!!

To get the original code to work with the new javascript, just encase the original code with blank div's <div> {original code} </div> and put a checkbox somewhere in between also (note the checkbox must be inside the original div code)

I also switched the Rounded CSS states, which to me looks more visual, Blue Toggle = On, Gray = Off

If you have found this update useful let me know using the link on our website ZoFish.com


Examples:


Original Button Without A Checkbox

ON OFF

New Buttons With Checkbox's

Large Button Checkbox

Checkbox Shown & Checked
ON OFF
Checkbox Shown & Not Checked
ON OFF
Checkbox Hidden & Checked (View live code using firebug to see)
ON OFF
Checkbox Hidden & Not Checked (View live code using firebug to see)
ON OFF

Small Rounded Checkbox

Checkbox Shown & Checked
Checkbox Shown & Not Checked
Checkbox Hidden & Checked (View live code using firebug to see)
Checkbox Hidden & Not Checked (View live code using firebug to see)

How It Was Done

Original HTML:

<div class="Switch Off">
	<div class="Toggle"></div>
	<span class="On">ON</span> <span class="Off">OFF</span>
</div>

New HTML:

<div>
	<input type="checkbox">
	<div class="Switch Off">
		<div class="Toggle"></div>
		<span class="On">ON</span> <span class="Off">OFF</span>
	</div>
</div>	


Original CSS:

.Switch.On .Toggle { left: 2%; }
.Switch.Off .Toggle { left: 54%; }

New CSS:

.Switch.On .Toggle { left: 54%; }
.Switch.Off .Toggle { left: 2%; }


Original Javascript:

$(document).ready(function() {
	// Switch toggle
	$('.Switch').click(function() {
		$(this).toggleClass('On').toggleClass('Off');
	});
});

New Javascript:

$(document).ready(function() {
		// Switch Click
		$('.Switch').click(function() {
			// Check If Enabled (Has 'On' Class)
			if ($(this).hasClass('On')){
				// Try To Find Checkbox Within Parent Div, And Check It
				$(this).parent().find('input:checkbox').attr('checked', true);
				// Change Button Style - Remove On Class, Add Off Class
				$(this).removeClass('On').addClass('Off');
			} else { // If Button Is Disabled (Has 'Off' Class)
				// Try To Find Checkbox Within Parent Div, And Uncheck It
				$(this).parent().find('input:checkbox').attr('checked', false);	
				// Change Button Style - Remove Off Class, Add On Class
				$(this).removeClass('Off').addClass('On');	
			}	
		});
		// Loops Through Each Toggle Switch On Page
		$('.Switch').each(function() {
			// Search of a checkbox within the parent
			if ($(this).parent().find('input:checkbox').length){
				
				// This just hides all Toggle Switch Checkboxs
				// Uncomment line below to hide all checkbox's after Toggle Switch is Found
				// $(this).parent().find('input:checkbox').hide();
				
				// For Demo, Allow showing of checkbox's with the 'show' class
				// If checkbox doesnt have the show class then hide it
				if (!$(this).parent().find('input:checkbox').hasClass("show")){
					$(this).parent().find('input:checkbox').hide(); }
				// Comment / Delete out the above 2 lines when using this on a real site
				
				// Look at the checkbox's checkked state
				if ($(this).parent().find('input:checkbox').is(':checked')){
					// Checkbox is not checked, Remove the On Class and Add the Off Class
					$(this).removeClass('On').addClass('Off');
				} else { 			
					// Checkbox Is Checked Remove Off Class, and Add the On Class
					$(this).removeClass('Off').addClass('On');
				}
			}
		});
	});
});

CSS
html {
  -webkit-text-size-adjust: none;
	margin: 0px;
	padding: 0px;
}
body {
	font-size: 66%;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	color: #666;
	padding: 0px;
	margin: 0px;
}
#MainContainer {
	position: relative;
	width: 900px;
	margin: 50px auto 50px auto;
	text-align: left;
}
h1 {
	color: #333;
	font-size: 2.1em;
}
p {
	color: #999;
	font-size: 1.5em;
	line-height: 1.2em;
}
.footer {
	font-size: 11px;
	text-align: center;
	position: fixed;
	bottom: 20px;
	right: 50px;
	text-align: right;
}
a:link, a:visited, a:active {
	color: #1c98a0;
	text-decoration: none;
	padding: 1px;
}
a:hover {
	color: #fff;
	background: #1c98a0;
}
hr {
	height: 1px;
	color: #ececec;
	background: #ececec;
	border: 0px solid #ececec;
	margin: 10px 0px 40px 0px;
}
/*------------------------------------------------*/
/* Switch SECTION START*/
/*------------------------------------------------*/
.Switch {
	position: relative;
	display: inline-block;
	font-size: 1.6em;
	font-weight: bold;
	color: #ccc;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
	height: 18px;
	padding: 6px 6px 5px 6px;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 4px;
	background: #ececec;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.1), inset 0px 1px 3px 0px rgba(0,0,0,0.1);
	cursor: pointer;
	font-size: 16px;
}
body.IE7 .Switch { width: 78px; }
.Switch span {
	display: inline-block;
	width: 35px;
}
.Switch span.On { color: #33d2da; }
.Switch .Toggle {
	position: absolute;
	top: 1px;
	width: 37px;
	height: 25px;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	background: #fff;
	background: -moz-linear-gradient(top, #ececec 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffffff));
	background: -webkit-linear-gradient(top, #ececec 0%, #ffffff 100%);
	background: -o-linear-gradient(top, #ececec 0%, #ffffff 100%);
	background: -ms-linear-gradient(top, #ececec 0%, #ffffff 100%);
	background: linear-gradient(top, #ececec 0%, #ffffff 100%);
	box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.5);
	z-index: 999;
	-webkit-transition: all 0.15s ease-in-out;
	-moz-transition: all 0.15s ease-in-out;
	-o-transition: all 0.15s ease-in-out;
	-ms-transition: all 0.15s ease-in-out;
}
.Switch.On .Toggle { left: 2%; }
.Switch.Off .Toggle { left: 54%; }
/* Round Switch */
.Switch.Round {
	padding: 0px 20px;
	border-radius: 40px;
}
body.IE7 .Switch.Round { width: 1px; }
.Switch.Round .Toggle {
	border-radius: 40px;
	width: 14px;
	height: 14px;
}
.Switch.Round.Off .Toggle {
	left: 3%;
	background: #33d2da;
}
.Switch.Round.On .Toggle { left: 58%; }
.info {
	font-size: 1.2em;
	margin-bottom: 4px;
}
h3 { text-decoration: underline; }
pre {
	text-align: left;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	background: #F1F2F2;
	border: 1px solid #636363;
	font-size: 2em;
	margin-top: -10px;
	margin-bottom: 6px;
}
.syntaxhighlighter table, .syntaxhighlighter .container { font-size: 15px!important; }
.demo { padding-left: 30px; }

/**
 * SyntaxHighlighter
 * https://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * https://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter {
  background-color: #1b2426 !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: #1b2426 !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #1b2426 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #323e41 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: #b9bdb6 !important;
}
.syntaxhighlighter table caption {
  color: #b9bdb6 !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #435a5f !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #435a5f !important;
  color: #1b2426 !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: #5ba1cf !important;
  background: black !important;
  border: 1px solid #435a5f !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: #5ba1cf !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: #5ce638 !important;
}
.syntaxhighlighter .toolbar {
  color: white !important;
  background: #435a5f !important;
  border: none !important;
}
.syntaxhighlighter .toolbar a {
  color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
  color: #e0e8ff !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: #b9bdb6 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #878a85 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
  color: #5ce638 !important;
}
.syntaxhighlighter .keyword {
  color: #5ba1cf !important;
}
.syntaxhighlighter .preprocessor {
  color: #435a5f !important;
}
.syntaxhighlighter .variable {
  color: #ffaa3e !important;
}
.syntaxhighlighter .value {
  color: #009900 !important;
}
.syntaxhighlighter .functions {
  color: #ffaa3e !important;
}
.syntaxhighlighter .constants {
  color: #e0e8ff !important;
}
.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #5ba1cf !important;
  background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
  color: #e0e8ff !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
  color: white !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
  color: #ffaa3e !important;
}
JS
$(document).ready(function() {
    
    // Switch Click
		$('.Switch').click(function() {
			
			// Check If Enabled (Has 'On' Class)
			if ($(this).hasClass('On')){
				
				// Try To Find Checkbox Within Parent Div, And Check It
				$(this).parent().find('input:checkbox').attr('checked', true);
				
				// Change Button Style - Remove On Class, Add Off Class
				$(this).removeClass('On').addClass('Off');
				
			} else { // If Button Is Disabled (Has 'Off' Class)
			
				// Try To Find Checkbox Within Parent Div, And Uncheck It
				$(this).parent().find('input:checkbox').attr('checked', false);
				
				// Change Button Style - Remove Off Class, Add On Class
				$(this).removeClass('Off').addClass('On');
				
			}
			
		});
		
		// Loops Through Each Toggle Switch On Page
		$('.Switch').each(function() {
			
			// Search of a checkbox within the parent
			if ($(this).parent().find('input:checkbox').length){
				
				// This just hides all Toggle Switch Checkboxs
				// Uncomment line below to hide all checkbox's after Toggle Switch is Found
				 //$(this).parent().find('input:checkbox').hide();
				
				// For Demo, Allow showing of checkbox's with the 'show' class
				// If checkbox doesnt have the show class then hide it
				if (!$(this).parent().find('input:checkbox').hasClass("show")){ $(this).parent().find('input:checkbox').hide(); }
				// Comment / Delete out the above line when using this on a real site
				
				// Look at the checkbox's checkked state
				if ($(this).parent().find('input:checkbox').is(':checked')){

					// Checkbox is not checked, Remove the 'On' Class and Add the 'Off' Class
					$(this).removeClass('On').addClass('Off');
					
				} else { 
								
					// Checkbox Is Checked Remove 'Off' Class, and Add the 'On' Class
					$(this).removeClass('Off').addClass('On');
					
				}
				
			}
			
		});
		
	});

////////////////////////////////////////////////////////
// Ignore This Bit - Only To Load Syntax Highlighting //
////////////////////////////////////////////////////////

$.getScript("https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js", function(){
    	$.getScript("https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js", function(){
				$.getScript("http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js", function(){
					$.getScript("http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushCss.js", function(){
						SyntaxHighlighter.all()
					});
				});
			});   
		});

// - Ignore End
Host Instantly Drag and Drop Website Builder

 

Description

This is a modified bit of code Originally Built By Victor Knust
Term
Mon, 11/27/2017 - 21:47

Related Codes

Pen ID
Pen ID
Pen ID