iOS style notifications with HTML, CSS, & Javascript


I do a lot of prototyping; sometimes for internal audiences as a bit of a sales tool to get a project off the ground, sometimes for demonstration purposes, and sometimes for user testing. Often, the final deliverable will be something written in Objective C, Java, or something I am not that familiar with, but in many cases I am able to make a fairly accurate facsimile of the final experience by using HTML, CSS, and Javascript. Recently, I was trying to display an iOS style notification in an HTML prototype, and while there are plenty of great posts on CSS transforms, I had to do a little tweaking to get the effect I wanted. Below I've outlined a few approaches that may be of some use.

First, let me say that for my purposes I am working in a very controlled environment. Specifically, the prototype is usually targeted for 1 or 2 browsers, and is by no means production ready, so if you are aren't viewing this on one of those browsers (Safari, FireFox, Chrome on a Mac) the rest of the post will make sense, but if you are on IE or some versions of Chrome on PC, it may appear broken.

David DeSandro has some great 3D transform examples that provided a great starting point, and Tait Brown also has a helpful post on creating iOS style notifications. My demo is built from these two resources (along with some tweaks).

Basic structure includes a wrapper div, a parent div, and two nested divs that represent the front and back of the notification. The front div appears as it would normally in the UI when no notification is present. The back div houses the notification. When we want to display the notification, we simply flip the card, rotating it 180° so the the back is displayed. Note: Because of a Chrome bug regarding backface visibility, certain versions of Chrome on PC, do not render the notification correctly.

All pretty simple, right? With the CSS taken from Tait Brown's demo, we are getting pretty close to a native look and feel. However, by default, in many of the card flip demos you see around, the card flips in one direction, then back in the opposite direction, although if we are trying to model iOS, we need the card to continue rotating in the same direction. To achieve this, we add some javascript to the card flip function to keep track of the rotation and keep flipping it forward.

I've created an iPhonish looking demo here. But you could easily modify to work on fixed or responsive layout. You could also modify the behavior to work for a mobile web app as a kind of pseudo push notification by making an ajax call to a dynamic page that might, for example, hit a database to get updated records such as comments, messages, etc.

article comments

Comments

*Comment:
*Name:
URL

allowable tags:<a>, <b>, <i>