Use your left/right keys to browse tutorials
jQuery Iphone Style Ajax Switch

jQuery Iphone Style Ajax Switch

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on July 3, 2009

I’ve been looking for a while at how to mimic the iPhone on / off switch with Jquery and stumbled across this post By Daniel LaBare over at elctech.com which is a great start to base an ajax tutorial on. In this tutorial I’ll purely be looking at making a simple ajax request using the functionality of the iPhone buttons to trigger a script to return a string based on whether the switch is on or off. You need to include the ‘jquery.iphone-switch.js’ file along with jquery which is in the download.

The Code:


<div id="ajax"></div>
<div id="1"></div>

<script type="text/javascript">

$('#1').iphoneSwitch("on",
function() {
$('#ajax').load('on.html');
},
function() {
$('#ajax').load('off.html');
},
{
switch_on_container_path: 'iphone_switch_container_off.png'
});
</script>

So to run through whats happening when the iphoneSwitch() function is called we run an ajax call to return the contents of the pages on.html and off.html. You could make this more dynamic by calling a php page which authenticates a user with a session id which would then update data in a database depending on the switches current status.

looking at jQuery .load:

Another way of using the .load function is to pass POST variables through to a script for example below we are passing the POST variable ‘limit’ with a value of ’10′ to the file rss.php and asking it to load the results into the div #rss, once the ajax request has completed it will alert ‘The last 10 entries in the rss feed have been loaded’:

$("#rss").load("rss.php", {limit: 10}, function(){
alert("The last 10 entries in the rss feed have been loaded");
});

demodownload



More tutorials from Papermashup
Comments
61 discussions around jQuery Iphone Style Ajax Switch
Newer Comments
  1. Pingback: jQuery Enhanced CSS Button Techniques

  2. Pingback: 20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine

  3. Hunter says:

    Check this out! It is the same thing but you can drag it!

  4. Stephen says:

    Hi… nice little plugin here….

    I’d like to make one suggestion….

    change the “click handling” section to pass the through to the callback events, a la:


    jQuery(this).click(function() {
    ...
    switched_off_callback(this);
    ...
    switched_on_callback(this);
    ...
    });

    that way


    $(".Boolean").iphoneSwitch(
    "on",
    function(obj) {
    //do something on change to "on"
    },
    function(obj) {
    //do something on change to "off"
    }
    );

    that way if there are multiple objects wired to this plugin, there is some hook to be able to tell “where” we are inside those events…

    thanks for reading….

    - Stephen

  5. Leny says:

    Thank you Ashley for your post, cool demo :)
    Does anybody know why on IE6 it doesn’t work?

  6. Igor says:

    ERROR!
    text code inside file jquery.iphone-switch.js:

    image = jQuery(”);
    Pay attention to the end – there is an extra div-tag! It must be removed, otherwise, you will not see the switch in IE-browsers.
    Thanks.

  7. Jason says:

    I figured it out, I added the following code after the script tag:

    $(document).ready(function(){
    $(‘#ajax’).load(‘/alpha’);

    And you’ll also need to add the following at the end:

    });

  8. Jason says:

    So is there a way to have it load the on.html at page load?

  9. Hey why dont you make it so you can drag the button lest anf right that way it will be easer then just clicking it because im used to seeing it on my iphone to drag it but here i have to click it.

  10. Ben says:

    Cool, lots of people are copying the iPhone GUI these days.

    On a side note, could you make your RSS feed display full posts so I don’t have to come out of Google Reader. It kind if makes the point of an RSS feed useless.

    • Ashley says:

      @ben thanks for the feedback, I’ve been having major problems with my feed and have had to hackit a bit but i’ll take a look at doing that.

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.