How to do a sliding screen transition in a web app just like a native iPhone app

The solution to this turned out to be a lot more painful then I originally had hoped. CSS overflow seems to work a little different on an iPhone vs desktop Safari and Firefox. Below is a link to my solution.

The animation is setup using CSS3 transitions. I then add or remove classes to kick off the animation. There are some weird things I had to do like turn on/off overflow for the container div and scroll to the top on the secondary screen.

It seems pretty messy so if anyone has a better solution then send me a twitter message.

After a lot more testing I’ll probably roll this into Disc Golf ScoreCard 2.5.2.

Open this link on an iPhone or Android 4 device:

http://www.discgolfsc.com/slidetest/

Disc Golf ScoreCard 2.5

Changes:

  • Player names are now verified. Only letters, numbers and spaces are allowed.
  • Course names are now verified. Only letters, numbers, (), – and spaces are allowed.
  • The interface has been tweaked while in landscape mode to create a larger display area.

Disc Golf ScoreCard may lose data

With the release of the new iOS 5.1 from Apple, they have made a few changes that can have a very large impact on web apps using localStorage or SQLite. They are now placing all localStorage in a temp directory that can and will be deleted at random times. Meaning if you are using localStorage to save data, that data is no longer safe!

Unfortunately, that means Disc Golf ScoreCard will lose all its data at times. The only thing we can suggest for now is to email your score cards to yourself so you have a copy.

We’re looking into solutions but until Apple changes/fixes the localStorage problem you’ll need to be aware that all your data may be lost.

Here’s an article with more information: http://www.itwriting.com/blog/5656-apple-breaks-web-storage-in-ios-5-1-does-not-care-about-web-apps.html

Disc Golf ScoreCard 2.4

Changes are for iOS 5 devices only. Android will be updated when it supports the HTML5 date input field.

Changes:

  • You can now change the date of the current score card. This came out of a request to be able to enter and save score cards from a past date because you may not have had your device with you at the time.

To change the date of the current score card go to: About -> Change Current Date

Disc Golf ScoreCard 2.2

New:

  • Filter saved score cards by course or date
  • Added over/under score to the score view on the history screen (version 2.2 or greater saved score cards only)
  • Players over/under score is shown in the score card history list (version 2.2 or greater saved score cards only)

Changes:

  • Back button changed to close button
  • Changed the status bar along the top from grey to black. If after updating, the app’s status bar starts out grey and changes to black then delete the icon from the home screen and add it again (iPhone full screen only). This will force the app to start up with a black status bar.
  • Tweaked the home screen icon slightly (iPhone full screen only)

Disc Golf ScoreCard 2.1

New:

  • Previous and next buttons added to the scoring screen. You can now go from basket to basket entering scores without needing to return to the main screen.
  • Cumulative over/under for each player on the scoring screen.
  • Initial Android 4 support (beta).

Changes:

  • Removed animation in-between screens. This fixes an animation bug on the iPhone and allows for Android support.
  • Scores screen changed to history screen. Score card history is not shown by default.

Features moved to Disc Golf ScoreCard 2.2

  • Filter the score card history by date and/or course.

Planned future features

  • Penalty scoring.

New Features for Version 2.1

Here are a few features planned for Disc Golf ScoreCard version 2.1 (coming soon):

  • Next and Previous buttons on the screen where you enter your score. This will allow you to enter all the scores for a basket and then go right to the next one without returning to the main screen.
  • Over and under scores on the screen where you enter scores.
  • The “Scores” view is changing to the “History” view. You’ll be able to filter your saved scorecards by date or course.
  • Possible support for Android 4 devices.

 

Why the 5 Player Limit?

The 5 player limit is more of a personal reason then anything else. Disc Golf ScoreCard could certainly handle 6 or more players with a few interface tweaks. Many will disagree, but I think there should be no more then 5 players in a group playing disc golf together. If you have more then 5 then break the group up into two.