 |
| Simple On\Off toggle button which can be use to perform any desired task |
Here's the code snippet,in this snippet I used it to change colour of the background:
<!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:80px;
height:25px;
background-color:#111111;
}
#toggleSwitch{
position:absolute;
top:0%;
left:0%;
width:40%;
height:100%;
background-color:#313131;
cursor:pointer;
cursor:hand;
z-index=0;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
}
</style>
<script>
function onOffSwitch(){
var toggle = document.getElementById("toggleSwitch");
var container = document.getElementById("container");
if(toggleSwitch.style.zIndex!=1)//switch the button on
{
toggleSwitch.style.backgroundColor="#0072c1";
toggleSwitch.style.left="60%";
toggleSwitch.style.zIndex=1;
container.style.backgroundColor="white";//task to perform when button is switched on
}
else{//switch the button off
toggleSwitch.style.backgroundColor="#313131";
toggleSwitch.style.left="0%";
toggleSwitch.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>
Feel free to ask for snippets in the comments below or our facebook page
https://www.facebook.com/roundCubeInc
0 comments: