Monday July 2

iPhone Tips: Look Ma, no toolbar!

When you create your first page for the iPhone and load it in that sweet little browser, the first thing you think is "Damn, I wish I could get rid of those giant toolbars!" It is kind of annoying to have so much space taken away from your pages.

As it turns out, it only takes a little JavaScript to get rid of the big toolbar at the top, which is much larger than the one at the bottom. All you have to do is call window.scrollTo(0, 1), and the upper toolbar will slide right out of sight!

If the user rotates the phone, it all gets messed up, so you have to detect changes to the phone's orientation and call scrollTo again at that time.

All in all, it works well. I hope that those of you out there developing iPhone apps will use this technique to get rid of that giant honkin' toolbar so I can enjoy your apps in the full glory of the iPhone screen.

Here is a demo

I'm having a lot of fun with this phone if you haven't noticed :)