jQuery Notification Plugin with CSS3 Animations - Tikslus Notirious

File Size: 57.8 KB
Views Total: 2072
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Notification Plugin with CSS3 Animations - Tikslus Notirious

Tikslus Notirious is a jQuery plugin for creating various types of notifications to display website messages, with support for progress bar, CSS3 animations and much more.

More features:

  • 7 built-in themes.
  • Custom buttons.
  • Sticky or non sticky notifications.
  • Displays multiple notifications at once.
  • 3 position options: left, right or center.
  • Callback events supported.

How to use it:

1. Include the jQuery javascript library and the jQuery tikslus notirious plugin's Javascript and CSS in the Html page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="tikslus_notyrious.min.js"></script>
<link rel="stylesheet" href="tikslus_notyrious.css"/>

2. Optionally, you can create a link to toggle a notification.

<a href="#" id="demo">Demo</a>

3. Call the plugin with options and create the messages you wish to display in a sticky notification box.

<script language="javascript">
$("#demo").click(function(e){
e.preventDefault();  
$.fn.tikslusnotyrious({"title":'Examples',
message:"Your messages",
sticky:true
});
});
</script>

4. Available options.

skin:'default', // default,hera,hades,titan,zeus,apollo,demeter
skinPath:'', // the path of the skin's folder
position:'right', // right,left or center
message:null, // notification message
animationDuration:500, // 
sticky:true, // true or false
buttons:new Object(),
stayInterval:10000, // time in miliseconds before the message disappears
picture:null // the path of an image

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