diff options
Diffstat (limited to 'library/jgrowl/examples/appendTo.html')
| -rw-r--r-- | library/jgrowl/examples/appendTo.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/library/jgrowl/examples/appendTo.html b/library/jgrowl/examples/appendTo.html new file mode 100644 index 000000000..3eb0f4d27 --- /dev/null +++ b/library/jgrowl/examples/appendTo.html @@ -0,0 +1,103 @@ +<!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> |