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