Monday, May 19, 2008

iPhone Webapp Buttons

While toying around with the idea of building a webapp for the iPhone I came across the need to build the equivalent of a checkbox. The problem is that checkboxes are a bit too small to be used accurately with fingertips and Apple has already come up with the perfect solution, the cool sliding ON/OFF switches that you find on the iPhone native apps.
So I tried to duplicate the switch in a browser, just using HTML, CSS3 and a bit of javascript.
I'm pretty happy with the results, I even managed to animate the switch. Until iPhone 2.0 gets released in June (with safari 3.1 for iPhone) you will only be able to see the animation on the desktop version of Safari 3.1 (unless, of course, you are already running the iPhone 2.0 beta)
The switch could still use better colors and gradients, but it will do for now.

Link

I'd love your feedback if you come up with a better idea.

4 comments:

Anonymous said...

Damn you beat me to it :)
Good work!

Umesh said...

Cool. Was searching for something like this. Also please look at this site

http://groupaware.mobi/iphone/#_Samples

spikepierson@gmail.com said...

Hi,

I just wanted to say that I really enjoyed your blog and this post. You make some very informative points. Keep up the great work!

-
Sharepoint Developers

Spike Pierson said...

Hi friends,

Really amazing blog post. I saw and read your blog,This site is useful to iPhone Developers. I know that it will help me in my own stuffs. I think it may be relevant.