Turn boring HTML checkboxes into iPhone toggle switches | Hacker News Reader

Turn boring HTML checkboxes into iPhone toggle switches

jqr.github.com

54 pointsjqr23 comments

This is a classic case of why you don't necessarily make a UI element look like something real. Every time I used the toggle switches, I just wanted to "swish" them with the mouse (a completely awkward gesture), even though they technically respond to simple on/off clicks like checkboxes do. So all they've done is make the "easy" behavior unintuitive, while almost encouraging an awkward gesture.

You can actually swish them on an iPhone (the real iPhone ones, not the ones in this kit.)

They irritate me a lot on the iphone as well - I really hope this metaphore goes away, checkbox type thing is just fine...

I agree that we shouldn't automatically copy and past UI elements from one platform to every other, unless they present real usability benefits to those other platforms.

But one benefit I can see is that these switches increase the target area, which I've always found to be somewhat small with checkboxes and radio buttons...

The text label beside the radio button is clickable too, if the page author has used the <label> tag correctly.

the entire control can be clicked to toggle, and yes it's composed of two overlapping labels!

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.

Don't you get it, they're an Apple look-alike. How can you not like that!?

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.

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

Non-obvious keyboard support is still almost worthless.

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

It would be nice to add a yellow/someothercolor border or change the colors to a darker blue...

You use Prototype on your iPhone sites? I’ve tried to avoid using libraries on mobile sites as they add a fair chunk of download and processing overhead.

Actually, it’d be nice to see a Webkit specific (or at least modern browser specific) JS library that dumps IE workarounds and fallback DOM selection routines; leaves us with syntactic sugar for QuerySelector and XMLHTTPRequest, and an animation library.

Most of the code in jQuery is not to work around IE, it's for features you actually want. So I doubt this would buy you much savings, especially when gzipped.

Standards: who needs em.

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

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.

just because it looks cool on another platform doesn't mean it's needed or useful in a regular web browser. the majority of people who use web browsers probably don't use an iphone, so the interface wouldn't make sense to them.

Let's just hope they're not patented.

Absolutely beautiful!

oh yeah, turn checkboxes into iPhone toggle switches. that's not boring! very, very exciting.

what is wrong with you people?

Reply on news.ycombinator.com