Aug
05
From the lab: iToggle for jQuery
…written by Will and has 24 comments so far
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!
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
August 20th, 2009 at 11:27 amAmit 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.
October 23rd, 2009 at 4:23 amr4 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?
November 6th, 2009 at 5:29 amWill Says:
Hey,
November 6th, 2009 at 9:36 amI’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
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
January 28th, 2010 at 3:57 pmSigfrid Says:
Hello guys,
February 10th, 2010 at 3:08 amyou 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.
Will Says:
Hi Sigfrid,
February 10th, 2010 at 9:46 amYou 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
mas iQ Says:
please I can not make itoggle sample to work,
February 12th, 2010 at 12:27 amis there any zip file contains of working html version ?
Will Says:
Hi Mas,
February 12th, 2010 at 9:48 amIf you right click > view source on the labs page there is a working version.
Cheers,
Will
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,
March 1st, 2010 at 11:29 amMarc
Hasan Gürsoy Says:
You should write better documentation.
March 8th, 2010 at 9:25 amWill Says:
Hi Hasan Gürsoy,
March 8th, 2010 at 9:38 amI’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
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
April 6th, 2010 at 12:17 amthanks
K Says:
Yeah… this simply doesn’t work.
May 1st, 2010 at 4:01 pmnoah Says:
Cant get it to work on all checkboxes on a page
May 6th, 2010 at 6:12 pmaNj 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);
May 21st, 2010 at 11:30 ampearls Says:
Nice post. I will bookmark it.
May 29th, 2010 at 7:56 amEz Says:
Your download code doesnt match up with the tutorial…
I cant get it to work.
great idea though
June 19th, 2010 at 1:25 ammark 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 ?
June 20th, 2010 at 7:54 amDave 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
July 30th, 2010 at 1:56 pmWilliam 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.
August 12th, 2010 at 6:22 amtimmi Says:
Also can’t get it to work, anything I try, the png is not shown. :<
August 30th, 2010 at 6:52 amtimmi 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!
August 30th, 2010 at 2:03 pmKayasax Says:
Hi,
September 2nd, 2010 at 1:17 pmnice stuff, thank you, is there any chance to make this script work on IE6 ?
Thanks