I’m trying to make an iOS-style toggle switch in HTML/CSS/JavaScript. It’s at the point that I’m mostly pleased with the result. I am having a lot of trouble making it work as an element that can be inlined with other content though. If I make the container element a span, the structure of the contents “falls apart”. Any attempts to restore that (e.g. display: block) fix the content, but break the flow again.
Current version is here, and reproduced below. All resources (mootools and an image for the handle) are online and linked absolutely, should you feel the urge to experiment with any fixes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Slider experiment</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<style type="text/css">
.slider {
border : thin solid #808080;
display : block;
width : 90px;
overflow : hidden;
font-family : sans-serif;
font-size : 80%;
margin : 10px;
cursor : pointer; /* We don't want the text selection cursor here */
-moz-border-radius : 3px;
-webkit-border-radius : 3px;
-khtml-border-radius : 3px;
border-radius : 3px;
opacity : 0.99; /* Completely transparent isn't clickable in Firefox */
}
.slider div {
width : 200px; /* More than enough for contents, to avoid wrapping */
display : block;
position : relative; /* So that the z-index has an effect */
z-index : -1;
}
.slider div span {
text-align : center;
line-height : 19px;
padding-top : 1px;
height : 19px;
float : left;
width : 62px;
font-weight : bold;
-moz-border-radius : 2px;
-webkit-border-radius : 2px;
-khtml-border-radius : 2px;
border-radius : 2px;
}
.slider div span.tab {
padding-top : 0px;
width : 32px;
margin-left : -3px;
margin-right : -3px;
position : relative; /* So that the z-index has an effect */
z-index : 0;
}
.slider div span.on {
background-color : #4040ff;
color : #E0E0E0;
}
.slider div span.off {
background-color : #E0E0E0;
color : #a0a0a0;
}
</style>
<script type="text/javascript">
<!--
function switchOff(itm)
{
console.log("Switching off");
itm.fx.start('-60px');
itm.state = 0;
}
function switchOn(itm)
{
console.log("Switching on");
itm.fx.start('0px');
itm.state = 1;
}
window.addEvent('domready', function() {
$$('.slider').each( function(itm) {
itm.fx = new Fx.Tween(itm.getChildren()[0], {duration: '125', property: 'margin-left'});
itm.state = 1;
itm.addEvent('click', function() {
if (itm.state==1)
{
switchOff(itm);
}
else
{
switchOn(itm);
}
});
});
});
//-->
</script>
</head>
<body>
<div style="width: 400px; margin: 10px">
Switch :
<div class="slider">
<div><span class="on">ONLINE</span><span class="tab"><img src="http://azureblue.org/so/handle.png" width=32px height=20px></span><span class="off">OFFLINE</span></div>
</div>
<div class="slider">
<div><span class="on">ON</span><span class="tab"><img src="http://azureblue.org/so/handle.png" width=32px height=20px></span><span class="off">OFF</span></div>
</div>
</div>
</body>
</html>
What I’d really like to be able to do is have the option of placing the control anywhere in the flow, so I could have two side by side if I wanted, or on consecutive lines.
(yes, it should be a proper Mootools class – that’s the next job!)
You could use
display: inline-block.You would still have the block properties, width, height, padding, margin properties, but still easy to display in inline layout (i.e. form, or some other layout.)