A slice of toast...
With the vast quantity of jQuery plugins available on the internet, it is always complicated to choose the 'best' option, or even the one more appropriate for your website or web application.
This problem is also very true for notification messages due to the abundance of choice. On what qualities should you judge similar plugins, should it be speed, reliability, community..etc? Unfortunately we do not have an answer you haven't heard before; it really does depend on the website you are working on.
In our case, when looking for notification messages, we wanted something simple to use, unobtrusive (progressive enhancement), flexible enough to be adapted to different websites with minimum effort (including CSS) and as should always be a priority when looking for jQuery plugins, it had to be small (in terms of bytes). After scouring the internet, trying several demos and looking into several source codes we narrowed our options to two plugins: the ever-popular jQuery UI dialog and toastr by CodeSeven. Since toastr is not as popular as jQuery UI, I will introduce it using their own description:
toastr is a simple JavaScript toast notification library that is small, easy to use, and extendable
As you can see from the above description, toastr already ticks most of the boxes; whilst we already knew what jQuery UI is capable of. But let's assess the four different software development qualities we were looking for in greater detail:
At the time of writing this blog, the minified version of the toastr plugin is only 2.522kb; whilst the minified jQueryUI library only containing the minimum functionality for the dialog is a whopping 20kb. However the difference in size can be compensated by using a CDN (content delivery network).
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Using a CDN, due to the popularity of jQueryUI; it is likely that when a user navigates to your page, they would already have a cached version of the library and hence would not have to download the file again.
In terms of simplicity, there is not much to add. Both plugins are extremely simple to use and you could get started with just a single line. Adding variations, different icons, modality...etc is all very straightforward.
Flexibility slightly swang our opinions in favour of toastr. Opening the source code, it is very trivial to change it's functionality or modify it slightly to meet your specific requirements; which later on proved vital.
Unfortunately, the standard version of toastr is not unobtrusive; whilst jQuery UI is. This is considered a very important quality for us at Incredible Web as it allows us to develop progressively enhanced websites. But this is where it's flexibility came in handy. Opening the source code and creating our own function which in turn called the toastr function, allowed us to build an unobtrusive variation of CodeSeven's toastr and is ultimately what we are using on our website, and hope to use on future projects.
Like always, we first create an anonymous jQuery function and define our own function, named toastIt taking options as a parameter and a succesful and non-successfull callback function.
(function ($) {
$.fn.toastIt = function (options, okCallback, cancelCallback) {
// your code here
}
})($);
We then set the toastr options by forwarding the options sent as a variable to the toastr object. This allows us to still modify the fadeIn, fadeOut...etc when calling our function.
if (options != undefined) { // set options
toastr.options = {
debug: options.debug,
tapToDismiss: options.tapToDismiss,
positionClass: options.position,
fadeIn: options.fadeIn,
fadeOut: options.fadeOut,
timeOut: options.timeOut,
extendedTimeOut: options.extendedTimeOut
}
}
The title of the toast notification is set to the label object within the toastContainer and the message to the html within the toastContainer. This allows you to use ordinary HTML in the notification messages, allowing you to include images, styles...etc.
// title
var title = toastContainer.find("label").text();
toastContainer.find("label").hide();
// message
var msg = toastContainer.html();
We must then hide the original HTML so that the message is not displayed twice, i.e. once as HTML and once as a toast notification. This is inline with our principle of progressive enhancement, as if the user's browser does not allow JavaScript, the user will still receive the message in the form of ordinary HTML.
// hide the original html
$(this).hide();
We then create the actual toast message using toastr
// create the toastr notification
var $toast = toastr[$(this).attr("toast-type")](msg, title);
The original toastr also allowed you to assign callback, which we do in the next step by forwarding any callback functions sent to our function, to the toastr object.
// wire up an event handler to any button in the toast
if ($toast.find('.okButton').length && okCallback != null) {
$toast.on('click', '.okButton', okCallback)
}
if ($toast.find('.cancelButton').length && cancelCallback != null) {
$toast.on('click', '.cancelButton', cancelCallback)
}
Finally, we return the toastContainer so that you can chain jQuery functions together.
// allow chaining
return toastContainer;
If you would like the complete file, please follow the link below. I hope this will be of help to some of you.
But as mentioned earlier, web developers and designers are spoilt for choice in terms of jQuery plugins and one man's trash is another's treasure; so do not hesitate to get your hands dirty and try different plugins before finding out which one is the ideal one for your cause.