<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true"> <head> <title>jGrowl Examples</title> <link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/> <style type="text/css"> html, body { font-family: "Helvetica neue", Helvetica, Arial, sans-serif; padding: 0; margin: 0; } h1, h2, h3, h4, h5 { margin-top: 2px; margin-bottom: 2px; } .jGrowl .manilla { background-color: #FFF1C2; color: navy; } .jGrowl .flora { background: #E6F7D4 url(flora-notification.png) no-repeat; -moz-border-radius: 0px; -webkit-border-radius: 0px; opacity: 1; filter: alpha(opacity = 100); width: 270px; height: 90px; padding: 0px; overflow: hidden; border-color: #5ab500; } .jGrowl .flora .message { padding: 5px; color: #000; } .jGrowl .flora .header { background: url(flora-header.png) no-repeat; padding: 5px; } .jGrowl .flora .close { background: url(flora-close.png) no-repeat; padding: 5px; color: transparent; padding: 0px; margin: 5px; width: 17px; } #dummyNav { position: fixed; background: green; width: 100%; height: 50px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript" src="../jquery.jgrowl.js"></script> <script type="text/javascript"> // In case you don't have firebug... if(typeof console === "undefined") { console = { log: function() { } }; } (function($){ $(function(){ $.jGrowl.defaults.closerTemplate = "<div>[ xxxxx ]</div>"; $.jGrowl.defaults.appendTo = "div#dummyNav"; $.jGrowl("This message is sticky and clickable", { sticky: true, click: function(msg) { alert("You clicked me"); } }); $.jGrowl("This message is sticky and clickable"); $.jGrowl("This message is sticky and clickable"); $.jGrowl("This message is sticky and clickable"); $.jGrowl("This message is sticky and clickable"); $.jGrowl("This message is sticky and clickable"); $.jGrowl("This message is sticky and clickable"); }); })(jQuery); </script> </head> <body> <div id="dummyNav">I'm the dummy navigation</div> <h1>Append To Another DOM-Object</h1> </body> </html>