 |
| Smooth toggle button which works just like IOS |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toggle Button by roundCube</title>
<style>
#container{
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:black;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
}
#toggleButtonBody{
position:absolute;
top:2%;
left:2%;
width:50px;
height:25px;
background-color:#e05d53;
border-radius:35px;
z-index=0;
}
#toggleSwitch{
position:absolute;
top:1%;
left:1%;
width:50%;
height:98%;
background-color:white;
cursor:pointer;
cursor:hand;
z-index=0;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
border-radius:35px;
}
</style>
<script>
function onOffSwitch(){
var toggle = document.getElementById("toggleButtonBody");
var container = document.getElementById("container");
var toggleSwitch = document.getElementById("toggleSwitch");
if(toggle.style.zIndex!=1)//switch the button on
{
toggle.style.backgroundColor="#77ce6d";
toggleSwitch.style.left="48%";
toggle.style.zIndex=1;
container.style.backgroundColor="white";//task to perform when button is switched on
}
else{//switch the button off
toggle.style.backgroundColor="#e05d53";
toggleSwitch.style.left="0%";
toggle.style.zIndex=0;
container.style.backgroundColor="black";//task to perform when button is switched off
}
}
</script>
</head>
<body>
<div id="container">
<div id="toggleButtonBody">
<div id="toggleSwitch" onclick="onOffSwitch()")></div>
</div>
</div>
</body>
</head>
lets look at the JavaScript to understand what's actually happening here
so we initially specified the z-index of toggleButtonBody as 0
the first condition involved in the JavaScript states that toggle.style.zIndex!=1 which means that the parts of this condition would be executed only when this condition is true
when we execute the code this condition would be considered true,so when we click the button the background color of the toggle button would change via this toggle.style.backgroundColor="#77ce6d";
and also it would slide the circular part to left via
toggleSwitch.style.left="48%";
and after these two statements we used another statement
toggle.style.zIndex=1;
why did we use that? you would understand that in the later part of this article
okay so when the button is clicked we ofcourse need to it to perform some task in my case i used it to changed the background color of my main container using this command
container.style.backgroundColor="white";
okay so we are done with the first part of the code which would occur when the button is initially off and we click it to make it on and it would change the background color to black,but what if my button is at the on state and i click it then we need a code for that too,that's when the else part of the code comes in use
so when does this else part comes into use?Of course when the first condition is not true, so when the button is at the on state its z-index would be 1 which would result int the first condition being declared false and that's when the second part of our code would be executed
this part of the code will make sure that the button changes it color back to that of off state
toggle.style.backgroundColor="#e05d53";
and move the circular to the left
toggleSwitch.style.left="0%";
and change the z-index back to 0 so that it can be toggled again
toggle.style.zIndex=0;
and the background color changes back to black via this statement
container.style.backgroundColor="black";
That's all :)
If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
Follow Us