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

  <script type="text/javascript">  
  $(document).ready(function() {  
$('#sample1').click(function() {  
$.notty({  
content: "This is a <strong>text notification</strong>."  
});  
return false;  
});  
$('#sample2').click(function() {  
$.notty({  
title: "2011 England riots",  
content: "Widespread public disturbances, including looting, arson attacks, burglary, robbery and some rioting, are ongoing in some cities and towns in England."  
});  
return false;  
});  
$('#sample3').click(function() {  
$.notty({  
title: "Juno (spacecraft)",  
content: "Juno is a NASA New Frontiers mission to the planet Jupiter. It was originally proposed at a cost of approximately US$700 million (FY03) for a June 2009 launch.",  
img: "images/demo/thumb.jpg",  
showTime: false  
});  
return false;  
});  
$('#sample4').click(function() {  
$.notty({  
content: 'This notification will disappear in <strong>five seconds</strong>.',  
timeout: 5000,  
showTime: false  
});  
return false;  
});  
$('#sample5').click(function() {  
$.notty({  
content: "Click on me to try the <strong>callback</strong> function",  
click:
function() {  
$.notty({  
content: 'This notification was just created.',  
title: 'Callback!'  
});  
}  
});  
return false;  
});  
$('#sample6').click(function() {
var title = prompt("Please enter the title of the notification","Just another title");  
var text = prompt("Please enter the the text of the notification","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim massa, euismod id sollicitudin vitae, iaculis quis erat. Duis et ligula sapien, sed varius lectus. Sed quis urna orci.");  
var img = prompt("Please specify an image src","");  
if(img != '') {  
$.notty({  
content: text,  
title: title,  
img: img  
});  
} else {  
$.notty({  
content: text,  
title: title  
});  
}  
return false;  
});  
$('#sample7').click(function() {  
$.notty({  
content: 'I have been clicked, so my work here is complete. Elvi ... wait ... <strong>Superman</strong> has left the building.',  
img: "images/demo/thumb2.jpg",  
timeout: 5000,  
showTime: false  
});  
return false;  
});  
  });  
  </script>

<a id="sample1" href="#">Just a simple text notification.</a></p>  
   

<a id="sample2" href="#">Title + big chunk of text notification.</a></p>  
   

<a id="sample3" href="#">Title + big chunk of text + image notification and disabled time.</a></p>  
   

<a id="sample4" href="#">This notification has 5 seconds timeout.</a></p>  
   

<a id="sample5" href="#">A notification with a callback.</a></p>  
   

<a id="sample6" href="#">Custom notification for your heart's desire.</a></p>