jQuery Noti
A minimal jQuery plugin that enables your application or website to display beautiful yet simple notifications.
| Language | JavaScript |
| License | GPLv3 |
| Version | 1.1 |
| Release date | December 20, 2021 |
| Download | zip archive |
| Source code | browse |
| Git repo | git clone https://sizeof.cat/git/jquery-noti |
Usage
The plugin code is depending on the jQuery library so we have to add it to our page. Download it from the official page (please don’t use a CDN), extract the archive on your computer and copy the jquery.min.js file. Add the HTML below to your page’s head section (and adjust the URLs, of course).
<link rel="stylesheet" href="/css/jquery-noti.css" />
and
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-noti.js"></script>
Next, you add the element that will trigger the notification; in a real application you will trigger it by form submit, or specific functions/methods.
<a class="knock-knock" href="#">Show a notification</a>
Add a click() event on the element (and pass some options if you want to change the default settings).
$('.knock-knock').click({
$.noti({
title: 'Check this out',
content: 'A wild notification appears!'
});
});
Options
| Setting | Default | Description |
|---|---|---|
title | Title of the notification, can be omitted. | |
content | Content of the notification, can be omitted, can include HTML code. | |
icon | Icon URL, can be omitted. | |
time | false | Show the amount of time that passed since the notification. |
timeout | 0 | Timeout after which the notification will fade, if it’s 0 the notification will stay on the screen until hidden manually. |
click() | Method called when the user clicks the notification. |
Demo
$.noti({
content: "This is a text notification."
});
Title, large amount of text, image notification and time disabled.
$.noti({
title: "JavaScript",
content: "JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries.",
icon: "/android-icon-48x48.png",
time: false
});
Notification with 5 secs timeout.
$.noti({
content: 'This notification will vanish in 5 seconds.',
timeout: 5000,
time: false
});
A notification with a callback.
$.noti({
content: 'Click on me, I dare you.',
click: function() {
$.noti({
content: 'You clicked on my parent notification, now you must pay!',
title: 'BINGO!'
});
}
});
License
This plugin is written by sizeof(cat) and released under GPLv3.
This program is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later
version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
this program. If not, see <https://www.gnu.org/licenses/>.