Iphone Style Switch

Recently I had to do a switch for one of the projects I was working. My boss is a big fan of Apple, so he wanted me to do something similar to the “On/Off” switch in iPhone. The closest functionality that we can get with HTML is the form checkbox, but this is not what we want, right?

So if we hide the checkbox, and if we make javascript to turn on/off it’s value by clicking on an image, we should be able to achieve our goal.

First let’s make the button:

As you can see, we are having the two states of the button (“On/Off”) in the same image. The idea behind it, is that we will be able to hide one state by making a smaller container (div) and then we will move the background of the container to different coordinates via jQuery animation().

The overall width of the image is 134px. So let’s make a container with 89px. – this is the width of the state and the button.

<style>
  #button { width:89px; height:24px; cursor:pointer; float:left; margin:0px 40px 0 0; background:url(button.png) no-repeat; background-position:0 0; }
</style>

Now that we have the css, it is time for some javascript. For this one we will use jQuery.
Let’s include it in the file:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

I use Google API Library, but you can download it and include it from a local file if you prefer.

Then we need to create our form:

 <form name="form" id="form" action="index.php" method="post">
      <div id="button_wrap">
           <div id="bw_but">
            	<div id="button" class="button_on"></div>
           </div>
      </div>
      <input id="switch" type="hidden" name="switch" value="<?php ($_REQUEST['switch']=='on')?'on':'off'; ?>" />    
      <input type="submit" value="Submit"/>
 </form>

As you can see, we have our hidden field in line 7. We will use jQuery to change it’s value when the user clicks on the div container with id=”button”. There is a PHP ternary condition at the end of the line, which is saying that if the previous state of the button was “on”, we need to keep it that way.

And now it is time for some jQuery:

<script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    $(document).ready(function() {
        // Turn the switch to off state
        $("#button").attr("class", "button_off");
        $("#button").css("background-position", "0px 0px");

        // Check if the previous state was on and change it if necessary 
        if ($("input[name=switch]").val() == "on") {
            $("#button").attr("class", "button_on");
            $("#button").css("background-position", "-45px 0px");
        }

        // When user clicks on the button, check the current state and switch to the opposite. Change the value of the hidden field also.
        $("#button").click(function(event) {
            switch ($("#button").attr("class")) {
            case "button_on":
                $("#button").attr("class", "button_off");
                $(this).animate({
                    backgroundPosition: '0px 0px'
                });
                $("input[name=switch]").val("off");
                break;

            case "button_off":
                $("#button").attr("class", "button_on");
                $(this).animate({
                    backgroundPosition: '-45px 0px'
                });
                $("input[name=switch]").val("on");
                break;
            }
        });
    }); /*]]>*/
</script>

We are using javascript switch function here instead of the jQuery toggle(), because the switch is giving us better control of the current state when the user reloads the page.