Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

README.md

OhSnap!.js

Oh Snap ! The server crashed... Try again later :D

A simple jQuery/Zepto notification library designed to be used in mobile apps

Check out this demo page

Installation

Dependency: jQuery or Zepto.

Download ohSnap.js:

  • from Github
  • with Bower: bower install oh-snap.

Add a div.ohsnap which will contain the alerts :

<div id="ohsnap"></div>

Usage

To call a notification, use ohSnap(text, options). Examples :

ohSnap('Succefully created your account');
ohSnap('Oh Snap! I cannot process your card...', {color: 'red', icon: 'icon-alert'}); // color matches CSS class `.alert.color`
ohSnap('Yeeaahh! You are now registered.', {time: '2000'} // time is ms

To remove a notification, use ohSnapX().

Alerts are automatically bound to a click event (internally, ohSnapX() is called when the alert is clicked).

Styling

Furthermore, ohSnap.js creates a div with classes .alert .alert-color so you will want to have something like :

/* ALERTS */
/* inspired by Twitter Bootstrap */

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #eed3d7;
  border-radius: 4px;
  position: absolute;
  bottom: 0px;
  right: 21px;
  /* Each alert has its own width */
  float: right;
  clear: right;
}

.alert-red {
  color: white;
  background-color: #DA4453;
}
.alert-green {
  color: white;
  background-color: #37BC9B;
}
.alert-blue {
  color: white;
  background-color: #4A89DC;
}
.alert-yellow {
  color: white;
  background-color: #F6BB42;
}
.alert-orange {
  color:white;
  background-color: #E9573F;
}

By Justin Domingue

About

A simple jQuery/Zepto notification library designed to be used in mobile apps

Resources

License

Releases

No releases published
You can’t perform that action at this time.