Custom toggle switch with pure HTML, CSS and JQuery with smooth transition 2

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Theme Download</title>
<script src="js/jquery-1.11.1.min.js"></script>

</head>
<body>

<h1>It Worked!</h1>

<div class="outerS" id="defaultOff" togText="ON"> <div class="innerS" >DEFAULT OFF</div></div>
<br/>
<div class="outerS" id="defaultOn" togText="OFF"> <div class="innerS floatR" >DEFAULT ON</div></div>


  
 <style>
.innerS, .outerS{
height:20px;
color:#FFF;
}
.outerS{
cursor:pointer;
background-color: rgb(51, 98, 118);
width:200px;
border-radius:5px;
border: 2px solid rgb(51, 98, 118);
}
.innerS{
  text-align: center;
background-color: rgb(41, 171, 226);
width:120px;
border-radius:3px;
margin-left:0px;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 0.5s; /* Safari */
transition-property: margin-left;
transition-duration: 0.5s;
}
.floatR{
margin-left:80px;
}

</style> 
<script>
function CustomHandler(cc){
//Write code for change event based on id
}
j$ = jQuery.noConflict();
j$(".outerS").click(function(){
j$(this).find(".innerS").toggleClass("floatR");
x = j$(this).attr("togText");
j$(this).attr("togText",j$(this).find(".innerS").html());
j$(this).find(".innerS").html(x);
CustomHandler(j$(this).attr("id"));
});


</script>
</body>
</html>






Comments

Popular Posts