iosOverlay.js

# iosOverlay.js — iOS-style overlays/notifications for the web

Fork & Download on GitHub

## Examples

The following all have a two second duration:

It's possible to update a notification when it's already been added:

## Parameters and Defaults

Parameter | Default Value | Accepts Type
--- | --- | ---
`onbeforeshow` | `noop();` | Function
`onshow` | `noop();` | Function
`onbeforehide` | `noop();` | Function
`onhide` | `noop();` | Function
`text` | null | String
`icon` | null | String (file path)
`spinner` | null | Spinner (via Spin.js)
`duration` | null | Number (ms)

## Methods

Method | Description/Use
--- | ---

`hide`

Call this to begin the hide animation.

      // notification is called
      var notification = ...;

      // something happens

      // fade out notification and destroy on complete
      notification.hide();

`update`

Used to update the contents of a notification on the fly. Accepts `text` and `icon` in formats as table above denotes. Accepts one or both.

      // notification is called
      var notification = ...;

      // something happens

      // notification is updated
      notification.update({
        text: "Success!",
        icon: "img/smiley.png"
      });

## Browser Support

- IE7+ — Rounded corners/animation do degrade when not supported, see optional dependencies
- Google Chrome
- Firefox
- Opera
- Desktop Safari
- Mobile Safari — iPhone & iPad

## Optional Dependencies

- Spin.js — Required if you want to use a spinner object.
- jQuery — Required for a fallback CSS animation support.

## Tips & Tricks

- To prevent icon flickers as they load, preload image resources.
- Keep `text` messages short and succinct.
- You might also like these iOS 3D dropdown notifications: