Documentation

Logo

Overview


The jQuery Notty is a jQuery plugin written by Marius Stanciu - Sergiu for Userdot, a plugin that enables your application to display unobtrusive, beautiful and elegant notifications. Click me!

Download


You can download the last version of the plugin, or browse the archive for older versions.

Usage

First you need to include the jQuery library, since Notty is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Secondly, you need to include the jQuery Notty javascript and the css file into your page. You can do it by adding the code below to your page.

<script type="text/javascript" src="js/jquery.notty.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.notty.css" />

Next, you implement the link/element that will trigger the notification. In a real application, you will trigger it by form submit, or ajax calls, etc. This is just an example.

<a id="sample1" href="#">Click here to notty up!</a>

As the last step, you trigger the Notty function on the element you just created. In this case, we trigger the function on the link with the id sample1.

<script type="text/javascript">
$(document).ready(function(){
   $('#sample1').click({
      $.notty({
         title : 'Title',
         content : 'This is a notification'
      });
   });
});
</script>

Options


title - the title of the notification. Can be omitted.

content - the content of the notification

img - if the notification will display an image, it's the image location

showTime - will. Options: true/false

timeout - the timeout after which the notification will fade

click - the callback function

Demo

Just a simple text notification.

Title + big chunk of text notification.

Title + big chunk of text + image notification and disabled time.

This notification has 5 seconds timeout.

A notification with a callback.

Custom notification for your heart's desire.