Easy Tutorial
❮ Misc Callbacks Fire Jquery Dom Get ❯

jQuery Growl Plugin (Message Notification)

The jQuery Growl plugin (Message Notification) allows you to easily display feedback messages in an overlay. Messages will automatically disappear after a period of time without needing a "Confirm" button or similar. Users can also speed up the hiding of messages by moving the mouse or clicking the close button.

The current version of the plugin is 1.0.0.

Visit the jQuery Growl official website to download the jQuery Growl plugin.

Demo:


Usage

After downloading the plugin, import the jQuery library, jquery.growl.js, and jquery.growl.css files, as follows:

<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="https://static.tutorialpro.org/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="https://static.tutorialpro.org/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />

To use the Growl plugin, select the element where you want to display the text and pass the text as a parameter to it:

$.growl({ title: "Message Title", message: "Message Content!" });
$.growl.error({ title: "Error Title", message: "Error Message Content!" });
$.growl.notice({ title: "Notice Title", message: "Notice Message Content!" });
$.growl.warning({ title: "Warning Title", message: "Warning Message Content!" });

There are several available default options. If you are interested, you can check out the complete demo below.

Demo

jQuery Message Plugin Demonstration.

$(function() {
    $.growl({
      title: "Message Title",
      message: "Message Content!"
    });

    $('.error').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.error({
          title: "Error Title",
        message: "Error Message Content!"
      });
    });

    $('.notice').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.notice({
          title: "Notice Title",
        message: "Notice Message Content!"
      });
    });

    return $('.warning').click(function(event) {
      event.preventDefault();
      event.stopPropagation();
      return $.growl.warning({
          title: "Warning Title",
        message: "Warning Message Content!"
      });
    });
});
❮ Misc Callbacks Fire Jquery Dom Get ❯