Turn boring HTML checkboxes into iPhone toggle switches

#1

Post by jqr » Thu, Aug 06, 2009, 12:10 AM UTC

Turn boring HTML checkboxes into iPhone toggle switches
jqr.github.com

Re: Turn boring HTML checkboxes into iPhone toggle switches

#2

Post by barredo » Thu, Aug 06, 2009, 12:17 AM UTC

This is the first iPhone-like toggle switches that works well and are usable. Both with click and drag.

Edit: They are an improvement of these: http://awardwinningfjords.com/2009/06/16/iphone-style-checkb...

Kudos to the author.

Re: Turn boring HTML checkboxes into iPhone toggle switches

#3

Post by endtwist » Thu, Aug 06, 2009, 12:47 AM UTC

barredo wrote: post #2

This is the first iPhone-like toggle switches that works well and are usable. Both with click and drag. Edit: They are an improvement of these: http://awardwinningfjords.com/2009/06/16/iphone-style-checkb... Kudos to the author.

Actually, mooSwitch has been around since 2008 and has always supported both click and drag, however, I don't believe it actually works on the iPhone (quite a thing to miss):

http://reaktivo.com/mt/mooswitch/index.php

Re: Turn boring HTML checkboxes into iPhone toggle switches

#4

Post by jcromartie » Thu, Aug 06, 2009, 1:02 AM UTC

The only reason I'd want these is for a web page to be used on an iPhone. They kill usability for keyboard-focused users.

Re: Turn boring HTML checkboxes into iPhone toggle switches

#5

Post by barredo » Thu, Aug 06, 2009, 1:12 AM UTC

jcromartie wrote: post #4

The only reason I'd want these is for a web page to be used on an iPhone. They kill usability for keyboard-focused users.

Edit: it has keyboard support indeed. I've just tried and works perfect. Pressing space switches the checkbox state and tab switches between checkboxes.

It's a pretty damn good job.

I bet it's not too dificult to add keyboard support to them

Re: Turn boring HTML checkboxes into iPhone toggle switches

#6

Post by kingsley_20 » Thu, Aug 06, 2009, 3:02 AM UTC

barredo wrote: post #5

jcromartie wrote: post #4

The only reason I'd want these is for a web page to be used on an iPhone. They kill usability for keyboard-focused users.

Edit: it has keyboard support indeed. I've just tried and works perfect. Pressing space switches the checkbox state and tab switches between checkboxes. It's a pretty damn good job. I bet it's not too dificult to add keyboard support to them

Non-obvious keyboard support is still almost worthless.

Re: Turn boring HTML checkboxes into iPhone toggle switches

#7

Post by slig » Thu, Aug 06, 2009, 3:07 AM UTC

I tested other fancy option button like this in a very simple webapp and the users doesn't seem to understand that they can change it.

for now on, I'll stick with the default, unless the web app is build to run on the iPhone.

Re: Turn boring HTML checkboxes into iPhone toggle switches

#8

Post by s3graham » Thu, Aug 06, 2009, 3:08 AM UTC

Ack, please don't. Neither space nor tab work (at least in Chromium), and not owning an iPhone, those things don't intuit "toggle" to me.

Re: Turn boring HTML checkboxes into iPhone toggle switches

#9

Post by TweedHeads » Thu, Aug 06, 2009, 3:18 AM UTC

Absolutely beautiful!

Re: Turn boring HTML checkboxes into iPhone toggle switches

#10

Post by jqr » Thu, Aug 06, 2009, 3:20 AM UTC

kingsley_20 wrote: post #6

barredo wrote: post #5

Earlier quoted context omitted.

Edit: it has keyboard support indeed. I've just tried and works perfect. Pressing space switches the checkbox state and tab switches between checkboxes. It's a pretty damn good job. I bet it's not too dificult to add keyboard support to them

Non-obvious keyboard support is still almost worthless.

I'm sure we'll add a focus highlight or something soon!