Growl-style Message Toaster with jQuery - Meow

File Size: 11.5 KB
Views Total: 2448
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Growl-style Message Toaster with jQuery - Meow

Meow is a lightweight jQuery plugin used to display growl-like toast messages on your web page. Supports both temporary and sticky toast notifications.

How to use it:

1. Include jQuery library together with the jquery.meow.css and jquery.meow.js on your web page.

<link rel="stylesheet" href="jquery.meow.css">
<script src="jquery.min.js"></script>
<script src="jquery.meow.js"></script>

2. Show a basic toast message on page load, with a custom icon. The message will auto dismiss after a timeout (5000ms by default).

$.meow({
  message: 'Your message here',
  icon: '1.gif'
});

3. Show a sticky toast message that will always stay on your screen.

$.meow({
  message: 'Your message here',
  icon: '1.gif'
  sticky: true
});

4. Show a toast message within a specified container.

$.meow({
  message: 'Your message here',
  icon: '1.gif'
  container: '#target'
});

5. Full plugin options.

$.meow({

  // Either a string or a jQuery selected element.
  message: null,

  // Either a string or a jQuery selected element.
  title: null,

  // Sets the image URL for the icon
  icon: null,

  // Sets the root element the meow should be contained within.
  container: '#target',

  // Sets the meow to never time out.
  sticky: false,

  // Determines whether the meow will have a close (×) button.
  closeable: true,
  
  // called just before the first meow on the screen is created
  beforeCreateFirst: function(){},

  // called just before any meow is created
  beforeCreate: function(){}, 

  // called right after a meow is created
  afterCreate: function(){}, 

  // called whenever a meow times out
  onTimeout: function(){},

  // called just before a meow gets destroyed
  beforeDestroy: function(){}, 

  // called right after a meow gets destroyed
  afterDestroy: function(){},

  // called after the last meow on the screen is destroyed
  afterDestroyLast: function(){}
   
});

This awesome jQuery plugin is developed by zacstewart. For more Advanced Usages, please check the demo page or visit the official website.