From the lab: iToggle for jQuery
…written by Will and has 24 comments so far

itoggle

For a little challenge the other day we decided to see how closely we could re-create the iPhone’s toggle switches on the web. Into the labs we went, and the result was a brand new plugin!

Using just one image, some simple CSS, almost no HTML and a compact bit of Javascript (3kb) we’ve forged this little plugin to replace those boring checkboxes and radio buttons with something far more fancy looking!

With the help of jQuery this plugin will replace any checkbox or radio element you want with this sliding alternative.

Head over to the labs page for an in depth explanation and links to download the files, including a PSD template. Questions or examples of iToggle in action? let us know below!

Labs link button

Have your say
  1. Petoz Says:

    hi I download it and make some try but don’t work on “onclick” or better, the value don’t change.
    any hints or example to use it like a input button ?
    many thanks in advance

    Petoz

  2. Amit Singh Says:

    Excellent peice of work!!! I was just wondering if you had any hints on how to make it work within a gridview? I can’t seem to get the image to render. The gridview is bound on the pageload, however I don’t think that should be a problem.

    The checkbox works perfectly outside the gridview. Any tips would be much appreciated.

  3. r4 Says:

    The source of the plugin has this in the header:

    jQuery Last.Fm Plugin by Engage Interactive

    You might want to change that to … well, “iToggle” or something, eh?

  4. Will Says:

    Hey,
    I’ve had a look through the zip and the actual files on the site, but I can’t find that anywhere… Not to worry though, I’m sure people can figure it out :p
    Thanks though,
    Will

  5. Sven Says:

    Hello

    I have question

    I try your code and it’s works fine except i cant get to change value of checkbox or radio

    i try to place some code into onclick but without success

    anyone figure this out

    any working sample will be nice

  6. Sigfrid Says:

    Hello guys,
    you should specify in the documentation that everything must be inside a div with itoggle as id otherwise it doesn’t work. I spent almost 1 hour to figure it out.

  7. Will Says:

    Hi Sigfrid,
    You don’t actually have to, that’s just the example I used. You can target any containing div using the jQuery selector engine. For example: #form_1 div.iToggle would work, as would: #form_2 div.i_toggle
    Will

  8. mas iQ Says:

    please I can not make itoggle sample to work,
    is there any zip file contains of working html version ?

  9. Will Says:

    Hi Mas,
    If you right click > view source on the labs page there is a working version.
    Cheers,
    Will

  10. Marc Says:

    Hi,

    I’ve got the same question as Sven, how do you change the setting of the checkbox/radiobutton dynamically from javascript?
    I’ve tried removing the “checked” attribute, but it doesn’t change what’s checked. E.g:

    jQuery(“#itoggle #example_1″).removeAttr(“checked”);
    or
    jQuery(“#example_1″).removeAttr(“checked”);

    Also tried sending a click and mousedown event, but that didn’t trigger it either (nor is any of the iToggle callbacks invoked).

    Cheers,
    Marc

  11. Hasan Gürsoy Says:

    You should write better documentation.

  12. Will Says:

    Hi Hasan Gürsoy,
    I’m sorry if you feel that there isn’t enough documentation, but we use our labs area to put ideas down and share bits of code that we’ve created while working on other projects. They are aimed more at people who have prior knowledge of the subject – in this case jQuery. We simply don’t have time to sit down and write in-depth documentation for people who don’t.
    As with the last.fm plugin we hope that people from the web will take interest and advance the plugin themselves, writing proper documentation and making improvements along the way.
    Thanks,
    Will

  13. Anderson Soares Says:

    Hi. Good job guys. Im using itoggle and i have a question.

    How can i configure the size of image?

    I configured the image itoggle.png to 50% of original
    ok
    In this case, wich value should i put on width(93px is original) and height(27px is original) ?

    sorry, my english is no good
    thanks

  14. K Says:

    Yeah… this simply doesn’t work.

  15. noah Says:

    Cant get it to work on all checkboxes on a page

  16. aNj Says:

    Nice work!

    It works good, but now i want to access your function “slide”. My situation is that the checkbox is used to show elements from a grid, so i want to change the checked status of the checkbox with a call. But howto? I cannot access the “slide” function directly or am i wrong?

    Anotherone is, maybe you can extend your options with the “scope”:

    var defaults = {
    scope: this,
    [...]
    },

    and then call every function like this:

    settings.onClickOff.call(settings.scope, $object);

  17. pearls Says:

    Nice post. I will bookmark it.

  18. Ez Says:

    Your download code doesnt match up with the tutorial…
    I cant get it to work.

    great idea though

  19. mark Says:

    Do you have a ZipFile that has all the files including the index.html with the correct coding for newbies? basically download and the sample just works ?

  20. Dave Says:

    Hi does anyone now a global way of setting itoggle for the whole page instead of using and id use an .each() command or somthing i need this becauce of so many itoggles on my page that the js file is growing fast

  21. William Says:

    You amazing iToggle code doesn’t seem to play nice with the http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js library. Any idea why? Thank you.

  22. timmi Says:

    Also can’t get it to work, anything I try, the png is not shown. :<

  23. timmi Says:

    okay, it’s working now. had to surround a div with an id called “itoggle” around the html stuff, otherwise the ready function code doesn’t match.

    how can i make this button smaller? created a new png with 50% in size and changed the following within the css file but this looks a bit strange:

    #itoggle label.itoggle span{
    display: block;
    width: 93px; -> 47px
    height: 27px; -> 13px
    margin-bottom: 20px;
    background: url(itoggle.png) left bottom no-repeat;
    cursor:pointer;
    text-indent:-5000px;
    }

    thanks!

  24. Kayasax Says:

    Hi,
    nice stuff, thank you, is there any chance to make this script work on IE6 ?
    Thanks

(Trackbacks / pingbacks)

Have your say