Oh Snap ! The server crashed... Try again later :D
A simple notification jQuery/Zepto library designed to be used in mobile apps
Demo
Installation
Just link the js file around your body end tag :
<script src="js/ohsnap.js"></script>
Also add a div which will contain the alerts :
<div id="ohsnap"></div>
Usage
To call a notification, use ohSnap(text, options). Examples :
ohSnap('Oh Snap! I cannot process your card...', {color: 'red'}); // alert will have class 'alert-color'
ohSnap('Yeeaahh! You are now registered.', {'duration':'2000'}); // 2 seconds
options: object that can override the following options
color: alert will have class 'alert-color'. Default null
icon: class of the icon to show before the alert. Default null
duration: duration of the notification in ms. Default 5000ms
container-id: id of the alert container. Default 'ohsnap'
fade-duration: duration of the fade in/out of the alerts. Default 'fast'
To programatically remove a notification, use ohSnapX(element) where element is a jQuery object a containing the alert..
To remove all notifications, use ohSnapX().
Alerts are automatically bound to a click event (internally, ohSnapX() is called when the alert is clicked).
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;
background-color: white;
}
.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