Simple Notifications Using JQuery

Today  I will explain how to implement Simple Client Side Notifications using jQuery.

There are so many jQuery notifications plugins are available for implementing client side notifications , But recently I came across a beautiful plug in called ‘Toastr‘ , a CodeSeven jQuery plugin which is very simple to use and can be easily customized and extended.

Let’s go through a simple example. As I told before it’s very easy to use.

Link to toastr.css and toastr.js files.

<link href="toastr.css" rel="stylesheet"/> 
<script src="toastr.js"></script>

We can trigger four types of notifications

• Success
• Error
• Warning
• Info

To Display Simple Notifications without Title use toastr.info() or toastr.error() or toastr.success() or toastr.warning()

## Success Message
toastr.success('Hurray..');

## Error Message
toastr.error('Ooops..');

## Warning Message
toastr.warning('Be careful..');

## Info Message
toastr.info('He He..');

To Add Title to the notification pass Title as second argument.

## Success Message
toastr.success('Hurray..','Success');

## Error Message
toastr.error('Ooops..','Error');

## Warning Message
toastr.warning('Be careful..','Warning');

## Info Message
toastr.info('He He..','Information');

Here is the simple Demo.

Not only simple text you can  write html tags as notification dialogue box body. Here is the simple example.

tostr.info('<i>Success</i>','<b><i>Success</i></b>');

Enable Close Button in Toastr jQuery Notification plug in: #

By default close button is disabled in this jQuery notification plug in and You can enable this by setting “closeButton” value to true.

toastr.options.closeButton = true;

This will enable close button icon in notification dialogue box as shown in above figure. And if you want to override this closeButton use the below code.

toastr.options.closeHtml = '<button><i>Close</i></button>';

And if you want to close all notifications at a time use the tostr.clear() function.

Position of jQuery Notifications in Web page: #

Default position of notifications is “top right”.You can change the position of notification using “positionClass” attribute. With this options we can display notifications in six different positions in a Web page.

toastr.options.positionClass = "toast-bottom-right";
toastr.options.positionClass = "toast-bottom-left";
toastr.options.positionClass = "toast-top-right";
toastr.options.positionClass = "toast-top-left";
toastr.options.positionClass = "toast-bottom-full-width";
toastr.options.positionClass = "toast-top-full-width";

Display Sequence of Multiple Notifications: #

If you have multiple notifications, newest notification are shown at top side by default .However you can disable this options by setting “newestOnTop” to false. Then newest notification are shown at bottom side.

toastr.options.newestOnTop = false;

Here I covered basic usage of this beautiful jQuery notification plug in “Toastr”.It comes with so many options like callback mechanisms , Animations etc and you can override the CSS file to change the display . Please go through the plugin site to explore these options.

Here is the Simple Demo

Toastr is Responsive: #

Include the viewport meta tag and the “toastr.css”, and toastr will adjust to different device sizes.You can test responsiveness of this plug in here “Toastr plug in Notification Responsiveness”

I hope you have enjoyed this article.If so share this post with your friends and also join our mailing list.