Note: This post falls under the category of, “too much information”. Sorry, just had my second cup of coffee and I’m feeling chatty.
I’ve recently developed an iOS app for a real estate company. It’s pretty nice, if I do say so myself. (If you want to try it out, you need a “location code”. Use 1926.)
Although I have programmed using the native Objective C/Xcode IDE prior to writing this app, I wanted to try something that would lend itself to the Android OS as well, without having to rewrite everything in Java. So I gave Appcelerator’s Titanium library (http://www.appcelerator.com/) a try.
My mistake, though, was to focus and test on just the iOS emulator while building the original app. I figured afterward I could make a few tweaks and the code would run fine on the Android OS. Wrong! I had included too many native iOS elements (navbars, system buttons, etc.). Attempting to update and test the code for use on the Android OS drove me to the point of drinking (OK, I was a drinker beforehand, but still).
For the Android OS, I was left with an extremely ugly, partially broken app that I could never deliver to the customer.
What to do?
Still, PhoneGap, er, sorry, Cordova might be a good choice for the Android OS, at least in this case (or so I figure now). With this in mind, I set out to create a mobile website that I could later add all the device hooks (camera, contacts, etc.). I tried jQTouch and jQuery Mobile, but they really didn’t do it for me. I settled on my favorite web library, Bootstrap (Bootstrap 3 to be exact). I love it’s responsive design elements and cool navbars.
Anyway, I’m about half done with the app now, but the one thing that irks me is there is no page transition when clicking to a new page. I don’t think there is any such elements within the Bootstrap 3 library. I started to check into plugins and add-ons and the like, but finally settled on a very simple script using jQuery.
Keep in mind I am not referring to ajax load indicators, but full page loading indicators.
Load this html right after the <body> tag.
That’s it. I realize it’s a very simple loading animation. The power in it is that you can add any kind of animation you want. Just replace the “animate” line with the appropriate code. Since I am using PHP on the server side, I just add the code via an “include()” statement.
When I get close to finishing the project, I’ll probably jazz up the animation a bit, but for now the code is just what the doctor ordered.
Here’s a simple example: https://www.xenabeast.com/examples/2013/09/loading-page.html