jQuery Noti

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

Release dateDecember 20, 2021
Downloadzip archive
Source codebrowse
Git repogit clone https://sizeof.cat/git/jquery-noti


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" />


<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).

		title: 'Check this out',
		content: 'A wild notification appears!'


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.


Simple text notification.

	content: "This is a text notification."

Title, large amount of text, image notification and time disabled.

	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.

	content: 'This notification will vanish in 5 seconds.',
	timeout: 5000,
	time: false

A notification with a callback.

	content: 'Click on me, I dare you.',
	click: function() {
			content: 'You clicked on my parent notification, now you must pay!',
			title: 'BINGO!'


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

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