Remi's Animated Toggle Switches

Remi's demo of animated toggle switchers, from his GitHub clone: http://code.google.com/r/remigrumeau-iui-dev/source/detail?r=84c350965ab3be4a0aef49387cb8141873962e87&name=remigrumeau-experiments-jan2011

by msgilligan

HTML

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>New toggle impl test</title>
        <link rel="stylesheet" href="http://iui.googlecode.com/git/web-app/iui/iui.css" type="text/css">
        <link rel="stylesheet" href="http://iui.googlecode.com/git/web-app/iui/t/default/default-theme.css"  type="text/css"/>        
</head>

<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>
    
    <div class="panel" id="main" title="Toggles" selected="true">
        <h2>Old Style</h2>
        <fieldset>
            <div class="row">
                <label>Initially Off</label>
                <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
            <div class="row">
                <label>Initially On</label>
                <div class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
        </fieldset>
        <h2>New Style</h2>
        <fieldset>
            <div class="row">
                <label>Initially Off</label>
                <input id="new-toggle-initially-off" name="checkbox3" type="checkbox" class="iui-toggle">
            </div>
            <div class="row">
                <label>Initially On</label>
                <input id="new-toggle-initially-on" name="checkbox4" type="checkbox" class="iui-toggle" checked="checked">
            </div>
        </fieldset>
    </div>

</body>

</html>

CSS

/* Experimental CSS for using a checkbox for saving toggle state */
.toggle {
        overflow:       hidden;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.toggle.toggled {
    border-color: #143fae;
}
.toggle > span {
        -webkit-transition: left 180ms ease-in-out;
}
.toggle .toggleOn { 
        display:        block;
        left:           -65px; 
        width:          65px;
    background: #194fdb url(http://code.google.com/p/iui/source/browse/web-app/iui/t/default/toggleOn.png) repeat-x;
}
.toggle .toggleOff {
        left:           40px;
}
.toggle .thumb {
        left:           -1px;
        z-index:        3;
}

.toggle.toggled .thumb          { left: 60px;   }
.toggle.toggled .toggleOn       { left: 0px;    }
.toggle.toggled .toggleOff      { left: 100px;  }

JavaScript

/*
   copyright:
   Copyright (c) 2007-12, iUI Project Members.
   See LICENSE.txt for licensing terms.
   Version @VERSION@
 */

/* note:
   This version of iUI has a partial implementation of the `busy` flag for Issue #191,
   it will not work with webapps that call `iui.showPage()` or `iui.showPageByHref()` directly.
   This issue will be resolved in a later version. */

(function() {

var slideSpeed = 20;
var slideInterval = 0;
var ajaxTimeoutVal = 30000;

var currentPage = null;
var currentDialog = null;
var currentWidth = 0;
var currentHeight = 0;
var currentHash = location.hash;
var hashPrefix = "#_";
var pageHistory = [];
var newPageCount = 0;
var checkTimer;
var hasOrientationEvent = false;
var portraitVal = "portrait";
var landscapeVal = "landscape";

// *************************************************************************************************

/*
events:
iUI fires a number of custom events on your panel and dialog elements. Handling
these events is the recommended way to do any just-in-time transformations or
loading (besides the ajax pre-loading built into iUI).
*/

window.iui =
{
    /*
    property: iui.logging
    This is set to `true` logging (with console.log) is enabled.
    */
    logging: false,

    /*
    property: iui.busy
    This is set to `true` if a slide animation is in progress.
    */
    busy: false,
    
    /*
    property: iui.animOn
    Determines whether to do horizontal slide animations with CSS transitions
    (http://www.w3.org/TR/css3-2d-transforms/) where supported (defaults    to
    `true`). Otherwise, manual `setInterval()` style animations are performed
    (vertical slide animations are always done manually).
    */
    animOn: true,
    
    /*
    property: iui.ajaxErrHandler
    If defined, this user-set function will be called when an AJAX call returns
    with an HTTP status other than `200` (currently all HTTP statuses other than
    `200`, even including 200-level statuses like `201 Created`, are seen...