Skip to content

Instantly share code, notes, and snippets.

@newism

newism/gist:229533

Created November 8, 2009 23:03
Show Gist options
  • Save newism/229533 to your computer and use it in GitHub Desktop.
Save newism/229533 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>iPhone Toggle</title>
<style>
label.checkbox{
background:url('../img/toggle.png') no-repeat top left;
cursor:pointer;
display:block;
height:0;
padding-top:27px;
width:94px;
overflow:hidden;
-moz-border-radius:4px;
-webkit-transition: background-position .1s linear;
-webkit-border-radius:4px;
}
label.checkbox.checked{background-position: top right;}
label.checkbox input{position:absolute; top:-100px; left:-100px}
</style>
</head>
<body>
<label class="checkbox"><input type="checkbox" /></label>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(':checkbox').each(function(index) {
var $checkbox = $(this);
$checkbox.parents("label:eq(0)").bind('change', function(event) {
($checkbox.is(":checked")) ? $(this).addClass('checked') : $(this).removeClass('checked');
}).trigger('change');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment