jQuery Noti

A minimal jQuery plugin that enables your application or website to display beautiful yet simple notifications.

LanguageJavaScript
LicenseGPLv3
Version1.1.0
Release dateDecember 20, 2021
Downloadzip archive
SHA-256e4854874cca894d975c0a8c216b5ab5c65798b1f79d354a9ba1e6958bda639cd

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

SettingDefaultDescription
titleTitle of the notification, can be omitted.
contentContent of the notification, can be omitted, can include HTML code.
iconIcon URL, can be omitted.
timefalseShow the amount of time that passed since the notification.
timeout0Timeout 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

Simple text notification.

$.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/>.