https://github.com/justindomingue/ohSnap
A simple jQuery/Zepto notification library designed to be used in mobile apps
https://github.com/justindomingue/ohSnap
Last synced: 9 months ago
JSON representation
A simple jQuery/Zepto notification library designed to be used in mobile apps
- Host: GitHub
- URL: https://github.com/justindomingue/ohSnap
- Owner: justindomingue
- License: mit
- Created: 2013-09-05T00:26:05.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2021-10-24T16:16:51.000Z (about 4 years ago)
- Last Synced: 2025-04-02T08:16:16.965Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 108 KB
- Stars: 280
- Watchers: 14
- Forks: 62
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-jquery - OhSnap!.js - A simple jQuery/Zepto notification library designed to be used in mobile apps. (Mobile / Miscellaneous Plugins)
README
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](http://justindomingue.github.io/ohSnap/ "Demo")
## Installation
Dependency: [jQuery](http://jquery.com) or [Zepto](http://zeptojs.com).
Download ohSnap.js:
- from [Github](https://raw.githubusercontent.com/justindomingue/ohSnap/master/ohsnap.js)
- with Bower: `bower install oh-snap`.
Add a `div.ohsnap` which will contain the alerts :
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**