Skip to content

Commit 8638f0f

Browse files
author
Julian Müller
committed
New feature: Added appendTo option
1 parent fdd96b8 commit 8638f0f

File tree

5 files changed

+108
-3
lines changed

5 files changed

+108
-3
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ $.jGrowl("A message with a beforeOpen callback and a different opening animation
5151
| group | empty | A css class to be applied to notifications when they are created, useful for 'grouping' notifications by a css selector. |
5252
| sticky | false | When set to true a message will stick to the screen until it is intentionally closed by the user. |
5353
| position | top-right | Designates a class which is applied to the jGrowl container and controls it's position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called. |
54+
| appendTo | body | The element where our jGrowl messages are appended to. The default is `body` but feel free to define another one. |
5455
| glue | after | Designates whether a jGrowl notification should be appended to the container after all notifications, or whether it should be prepended to the container before all notifications. Options are after or before. |
5556
| theme | default | A CSS class designating custom styling for this particular message, intended for use with jQuery UI. |
5657
| themeState | highlight | A CSS class designating custom styling for this particular message and it's state, intended for use with jQuery UI. |

‎examples/appendTo.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
3+
<head>
4+
<title>jGrowl Examples</title>
5+
<link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
6+
<style type="text/css">
7+
html,
8+
body {
9+
font-family: "Helvetica neue", Helvetica, Arial, sans-serif;
10+
padding: 0;
11+
margin: 0;
12+
}
13+
14+
h1, h2, h3, h4, h5 {
15+
margin-top: 2px;
16+
margin-bottom: 2px;
17+
}
18+
19+
.jGrowl .manilla {
20+
background-color: #FFF1C2;
21+
color: navy;
22+
}
23+
24+
.jGrowl .flora {
25+
background: #E6F7D4 url(flora-notification.png) no-repeat;
26+
-moz-border-radius: 0px;
27+
-webkit-border-radius: 0px;
28+
opacity: 1;
29+
filter: alpha(opacity = 100);
30+
width: 270px;
31+
height: 90px;
32+
padding: 0px;
33+
overflow: hidden;
34+
border-color: #5ab500;
35+
}
36+
37+
.jGrowl .flora .message {
38+
padding: 5px;
39+
color: #000;
40+
}
41+
42+
.jGrowl .flora .header {
43+
background: url(flora-header.png) no-repeat;
44+
padding: 5px;
45+
}
46+
47+
.jGrowl .flora .close {
48+
background: url(flora-close.png) no-repeat;
49+
padding: 5px;
50+
color: transparent;
51+
padding: 0px;
52+
margin: 5px;
53+
width: 17px;
54+
}
55+
56+
#dummyNav {
57+
position: fixed;
58+
background: green;
59+
width: 100%;
60+
height: 50px;
61+
}
62+
63+
</style>
64+
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
65+
<script type="text/javascript" src="../jquery.jgrowl.js"></script>
66+
<script type="text/javascript">
67+
68+
// In case you don't have firebug...
69+
if(typeof console === "undefined") {
70+
console = { log: function() { } };
71+
}
72+
73+
(function($){
74+
75+
$(function(){
76+
77+
$.jGrowl.defaults.closerTemplate = "<div>[ xxxxx ]</div>";
78+
$.jGrowl.defaults.appendTo = "div#dummyNav";
79+
80+
$.jGrowl("This message is sticky and clickable", {
81+
sticky: true,
82+
click: function(msg) {
83+
alert("You clicked me");
84+
}
85+
});
86+
87+
$.jGrowl("This message is sticky and clickable");
88+
$.jGrowl("This message is sticky and clickable");
89+
$.jGrowl("This message is sticky and clickable");
90+
$.jGrowl("This message is sticky and clickable");
91+
$.jGrowl("This message is sticky and clickable");
92+
$.jGrowl("This message is sticky and clickable");
93+
});
94+
})(jQuery);
95+
96+
</script>
97+
</head>
98+
<body>
99+
<div id="dummyNav">I'm the dummy navigation</div>
100+
101+
<h1>Append To Another DOM-Object</h1>
102+
</body>
103+
</html>

‎jquery.jgrowl.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
$.jGrowl = function( m , o ) {
143143
// To maintain compatibility with older version that only supported one instance we'll create the base container.
144144
if ( $('#jGrowl').length === 0 )
145-
$('<div id="jGrowl"></div>').addClass( (o && o.position) ? o.position : $.jGrowl.defaults.position ).appendTo('body');
145+
$('<div id="jGrowl"></div>').addClass( (o && o.position) ? o.position : $.jGrowl.defaults.position ).appendTo( (o && o.appendTo) ? o.appendTo : $.jGrowl.defaults.appendTo );
146146

147147
// Create a notification on the container.
148148
$('#jGrowl').jGrowl(m,o);
@@ -186,6 +186,7 @@
186186
group: '',
187187
sticky: false,
188188
position: 'top-right',
189+
appendTo: 'body',
189190
glue: 'after',
190191
theme: 'default',
191192
themeState: 'highlight',

‎jquery.jgrowl.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)