iosOverlay.js — iOS Overlay/Notification Plugin

Here’s a plugin that allows you to place iOS-style notifications over your web app. It’s useful for showing short succinct messages, or notifying the user of what action is being performed. It’s great for the same reason that the native iOS overlays are too; it’s intrusive enough to grab your attention, but doesn’t steal focus entirely. 

This plugin works equally well on desktop, mobile and tablet.

image

Given the trend towards micro js libraries and removing dependencies, this plugin can stand alone or work nicely with other frameworks.

Features and details:

  • Uses CSS3 transitions for smooth animation
  • Plays nicely with spin.js for sweet spinners
  • Notifications can show for a duration or be manually closed
  • Notifications can be updated on the fly (icon/text)
  • Framework agnostic (but you can degrade to jQuery animation if CSS animation is not supported)
  • IE7+ support (minus rounded corners) and all the usual suspects
  • Fully documented
  • MIT/GPL/Who gives a shit just don’t be a nozzle about it license

To do:
If there’s a bit of interest in this project then there’s more I’d like to do.

  • Add fancy CSS 3D transitions (drop, 3D drop etc)
  • Use fader.js for cleaner animation syntax (one less optional dependency) 
  • Add a fallback IE rounded corners PNG
  • Option to dismiss with ‘Esc’ keypress
  • Add some retina icons

image image

Repository Updates

iOS Theme for jQuery Mobile

Good news! I’ve just pushed some major changes for my iOS jQuery Mobile theme. It now works with jQuery Mobile 1.1.0, which was a bit of a struggle. It also forced me to do some major code cleanup, delivering cross browser gradients and various enhancements I had been putting off.

A full list of changes and resolved bugs follows:

  • Supports jQuery Mobile 1.1.0 (this was a nightmare)
  • Code cleanup more strictly obeys my coding conventions
  • All gradients and effects are now cross browser compatible (Issue #2)
  • Updated slider toggle to iOS 5 style (Issue #7)
  • Got dialogs looking as close to native as possible considering jQuery Mobile doesn’t support overlayed dialogs (they’re standalone pages) (Issue #3)

The changes have introduced a few minor visual quirks relating to the .ui-focus box shadows etc, but hopefully these will be rectified in the near future.

 

jQuery Gantt

I made some minor code changes, but the most important thing here was the addition of documentation. The original creator didn’t provide any, so hopefully this makes a bit more sense. I’m sure I’ve missed something here and there (holidays?), but I’ll fix that up as we go.

The changes:

  • Added documentation and better demo with bootstrap popovers
  • Works with latest jQuery 1.7.2
  • Merged pull request for “undefined error”, thanks Nathan Colgate.
  • Code and folder cleanup
 

Front End Development Guidelines

The page now passes HTML5 validation. Apparently some people care about this.

 

bootstrap.footnotes.js - UX Lab 008

I love the Instapaper-style footnotes/endnotes that came about with the last major update. Here they are in web form, as a jQuery/Bootstrap plugin. Unfortunately there’s a dependency upon Bootstrap CSS/JS, but such is life. It’s retina ready too - as everything else should be these days.

Here it is in action:

Documentation and options are available on the demo page.

It also has its own GitHub repository.