LaunchPad Blog

After getting a hold of the iPhone’s original UI images (links can be found in this thread and special thanks to Kai Cherry for finding them!), I noticed a technique Apple is using to create their buttons. It seems they are placing an entire button into one PNG, then scaling the middle of the image so that the corners of the button are not distorted.

So for example, the image to the right is an original image from the iPhone. Its width is 29px. That breaks down to there being 14px on the left and right, defining the rounded corners and a 1px sliver which is the body of the button. So, in theory, if you were able to keep the left and right sides of the button stationary while expanding the 1px center piece, this would create a horizontally-scalable button with only one image.

But alas, how would we do this using only CSS? Well, I started digging around Safari’s ‘-webkit’ innards, and was able to to use the -webkit-border-image to accomplish exactly what I wanted.

Read the rest of this entry »

Pages in Safari for the iPhone operate much like tabs in the OS X version. When developing you may wish to launch a new tab. With LaunchPad, we’d like to make it so that it stays open while the web apps are launched.

The trick? Just a plain old

target="_blank"

will do the trick. Enjoy!

It seems that with ‘iSafari’, the :active state does not work. In our web app, LaunchPad, there is a toolbar at the bottom of the screen, mimicking the iPhone’s iPod toolbar. Upon click of each of the toolbars buttons, the selected button is to become highlighted.Initially, I was using the :active state so that when the user pressed a button, it would highlight.  It worked just fine in Safari for OS X; however, in the iPhone environment, it seems to ignore :active. When replacing :active with :hover, I discovered I was able to achieve the desired result.One interesting thing to note, is when a link is clicked on, the link remains in the :hover state until another link is clicked.You can view an example here: http://www.launchpadhq.com/experiments/test2.html 

As it’s being discovered, position:fixed is not working in Safari for iPhone. Obviously, the desire to have a fixed toolbar at the top or bottom is going to almost a requirement for many web app developers.

So, the first thing that came to my mind was to manually keep positioned elements fixed via JavaScript. No luck here either! If you pull up http://www.quirksmode.org/viewport/experiments/scrolling2.html in your iPhone, you’ll note that neither of the following work:pageXOffset and pageYOffsetdocument.body.scrollTop and document.body.scrollLeftHas anyone found a work around?

Come on Apple, if you’re going to state that Safari for the iPhone is as powerful as the desktop version, please enable it to do basic CSS2 and JavaScript functions!

Update: I’ve found a workaround which uses an auto-scrolling div. The catch is, in order to scroll, you must use two-fingers, identical to the way you’re able to do with MacBook trackpads. This seems like a viable solution, however, there are several trade-offs:

One, the slick physics behind the iPhone scroll are no longer present, and two, there are obvious usability issues with this solution. For almost all webpages, the user is able to scroll using just one finger. How then, would they know that for certain pages, two fingers were necessary. Not a very desirable solution to me.

Check out our example here: http://www.launchpadhq.com/experiments/test1.html