Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jdmdigital/hat-tip
A super-simple, super-light notification bar using jQuery and British humor.
https://github.com/jdmdigital/hat-tip
jquery notifications
Last synced: 8 days ago
JSON representation
A super-simple, super-light notification bar using jQuery and British humor.
- Host: GitHub
- URL: https://github.com/jdmdigital/hat-tip
- Owner: jdmdigital
- License: mit
- Created: 2022-12-02T17:54:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-13T15:57:17.000Z (about 1 year ago)
- Last Synced: 2024-10-12T06:48:40.926Z (about 1 month ago)
- Topics: jquery, notifications
- Language: JavaScript
- Homepage: https://jdmdigital.co/demo/hat-tip/
- Size: 279 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hat Tip
A super-simple, super-light notification bar using jQuery and British humor.
### Live Demo: https://jdmdigital.co/demo/hat-tip/
You can also learn all about why we created Hat Tip in its [announcement post](https://jdmdig.it/3P4eL2X).
## Unobtrusive Notifications
In cases when you don't really want notifications getting in the way of the every day use of your application, Toasts and Modals are literally the opposite. We wanted a basic banner notification. We'll be building on this over time, but here's MVP.
## Usage
Simply include the `hat-tip.js` in your project (or copy the raw code out), add the css you'll find in `hat-tip.css`, and put the following mark-up at the bottom of your page. Minifed versions of both of those are also included, but their already SUPER-small (the bundle file is only 3kb, uncompressed).
```html
×
```
Since v1.1, there is also a "bundle" version which does all that for you. Just include `hat-tip-bundle.js` in your project and it'll add the default CSS and HTML for you.
Then, use the `hattip_fire()` function to update the content of your notification and show it. The function accepts two arguments: a string containing the message, and a string containing the class or classes you would like added to the notification wrapper.
### Examples
Here's a default example.
```js
hattip_fire('Top of the morning to ya!');
```
Notifications can be closed using the "X" button, or programatically by calling `hattip_die()`.
You can also update the classes that give the notification color. Three such colors are included in `hat-tip.css`.
```js
hattip_fire('Pub is closed? Nightmare!', 'ht-danger');
```
```js
hattip_fire('Pub is open! Ideal.', 'ht-success');
```
```js
hattip_fire('Pub closes at 10pm.', 'ht-info');
```
The second argument can be any class name you wish. For example, if you were already using Bootstrap, you could call a success alert with:
```js
hattip_fire('Bootstrap is everywhere.', 'alert alert-success');
```
**NOTE:** You may have to overwrite any additional styles applied from external sources.
You can also include some basic styling in the message, thusly.
```js
hattip_fire('I may be drunk, Miss, but in the morning I will be sober and you will still be ugly.');
```
Since v1.2, you have a third option which makes the notification a little "louder" with a bounce-in animation. Simply add `dont-panic` as the final attribute. Did you ever see "[Dad's Army](https://tenor.com/search/dads-army-gifs)?"
```js
hattip_fire('The time has come for us to no longer keep calm and carry on...', 'ht-danger', 'dont-panic');
```
If a second notification is fired while the first is still on the screen, it'll automatically close, clean-up, and fire the new notification.
## Changlog
v1.0 - Initial Release
v1.1 - Adds Minified Versions as well as a "Bundle" option
v1.2 - Don't Panic! (louder animation) added
Photo Credit: Adrian Dascal https://unsplash.com/@dascal on Unspash