File: jgrowl.html

package info (click to toggle)
jgrowl 1.2.13%2Bdfsg-1.1
  • links: PTS, VCS
  • area: main
  • in suites: bookworm, bullseye, sid, trixie
  • size: 220 kB
  • sloc: javascript: 176; makefile: 9
file content (240 lines) | stat: -rwxr-xr-x 9,441 bytes parent folder | download | duplicates (2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!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 Tests</title>
		<link rel="stylesheet" href="/usr/share/javascript/jquery-jgrowl/jquery.jgrowl.css" type="text/css"/>
		<style type="text/css">

			div.jGrowl div.manilla {
				background-color: 		#FFF1C2;
				color: 					navy;
			}
			
			div.jGrowl div.smoke {
				background: url(smoke.png) no-repeat;
				-moz-border-radius: 	0px;
				-webkit-border-radius:	0px;
				width: 					280px;
				height: 				55px;
				overflow: 				hidden;
			}

			div.jGrowl div.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;
			}

			div.jGrowl div.flora div.message {
				padding: 				5px;
				color: 					#000;
			}
			
			div.jGrowl div.flora div.header {
				background: 			url(flora-header.png) no-repeat;
				padding: 				5px;
			}

			div.jGrowl div.flora div.close {
				background: 			url(flora-close.png) no-repeat;
				padding: 				5px;
				color: 					transparent;
				padding: 				0px;
				margin: 				5px;
				width:					17px;
			}
			
			div.jGrowl div.iphone {
				font-family: 			"Helvetica Neue", "Helvetica";
				font-size: 				12px;
				background: 			url(iphone.png) no-repeat;
				-moz-border-radius: 	0px;
				-webkit-border-radius:	0px;
				opacity: 				.90;
				filter: 				alpha(opacity = 90);
				width: 					235px;
				height: 				137px;
				overflow: 				hidden;
				border-color: 			#5ab500;
				color: 					#fff;
			}

			div.jGrowl div.iphone .jGrowl-close {
				padding-right: 			20px;
			}

			div.jGrowl div.iphone div.message {
				padding-top: 			0px;
				padding-bottom: 		7px;
				padding-left: 			15px;
				padding-right: 			15px;
			}
			
			div.jGrowl div.iphone div.header {
				padding: 				7px;
				padding-left: 			15px;
				padding-right: 			15px;
				font-size: 				17px;
			}

			div.jGrowl div.iphone div.close {
				display: 				none;
			}
			
			div#random {
				width: 					1000px;
				background-color: 		red;
				line-height: 			60px;
			}

		</style>
		<script type="text/javascript" src="/usr/share/javascript/jquery/jquery.js"></script>
		<script type="text/javascript" src="/usr/share/javascript/jquery-jgrowl/jquery.jgrowl.js"></script>
		<script type="text/javascript">

		// In case you don't have firebug...
		if(typeof console === "undefined") {
		    console = { log: function() { } };
		}

		(function($){

			$(document).ready(function(){
				// This value can be true, false or a function to be used as a callback when the closer is clciked
				$.jGrowl.defaults.closer = function() {
					console.log("Closing everything!", this);
				};
				
				// A callback for logging notifications.
				$.jGrowl.defaults.log = function(e,m,o) {
					$('#logs').append("<div><strong>#" + $(e).attr('id') + "</strong> <em>" + (new Date()).getTime() + "</em>: " + m + " (" + o.theme + ")</div>")
				}				
				
				$.jGrowl("Hello world!");
				$.jGrowl("This notification will live a little longer.", { life: 1000 });
				$.jGrowl("Sticky notification with a header", { header: 'A Header', sticky: true });
				$.jGrowl("Custom theme, and a whole bunch of callbacks...", { 
					theme:  'manilla',
					speed:  'slow',
					beforeOpen: function(e,m,o) {
						console.log("I am going to be opened!", this);
					},
					open: function(e,m,o) {
						console.log("I have been opened!", this);
					},
					beforeClose: function(e,m,o) {
						console.log("I am going to be closed!", this);
					},
					close: function(e,m,o) {
						console.log("I have been closed!", this);
					}
				});

				$.jGrowl("Custom animation test...", { 
					theme: 'manilla',
					speed: 'slow',
					animateOpen: { 
						height: "show"
					},
					animateClose: { 
						height: "hide"
					}
				});
				
				$.jGrowl("Looks like the iPhone.", { 
					sticky: true,
					header: 'iPhone',
					theme: 'iphone'
				});
				

				$.jGrowl("This message will not open because we have a callback that returns false.", {
					beforeOpen: function() {
						console.log("Going to open a notification, but not really...");
					},
					open: function() {
						return false;
					}
				});
				
				$.jGrowl("This message will not close because we have a callback that returns false.", {
					beforeClose: function() {
						return false;
					}
				});
				
				$.jGrowl.defaults.closerTemplate = '<div>hide all notifications</div>';
				
				$('#test1').jGrowl("Testing a custom container (this one is sticky, and will also be prepended).", {
					closer: false,
					sticky: true, 
					glue: 'before',
					speed: 2000,
					animateOpen: { 
						height: "show",
						width: "show"
					},
					animateClose: { 
						height: "hide",
						width: "show"
					}
				});

				$('#test1').jGrowl("Another custom container test.", { 
					glue: 'before',
					speed: 2000,
					animateOpen: { 
						height: "show",
						width: "show"
					},
					animateClose: { 
						height: "hide",
						width: "show"
					}
				});
				
				$('#test2').jGrowl("Trying a background image.", { 
					theme: 'smoke',
					closer: false
				});
			});
		})(jQuery);

		</script>
	</head>
	<body>
		<h1>jGrowl Tests</h1>

		<p><a href="javascript:void(0);" onclick="$.jGrowl('One more message...');">Click here to create a message on demand in the #jGrowl container in the top-right corner of the screen.</a></p>
		
		<p><a href="javascript:void(0);" onclick="$('#test1').jGrowl('shutdown');">Shutdown jGrowl for the #test1 container in the top-left corner of the screen.</a></p>
		
		<p><a href="javascript:void(0);" onclick="$('#test1').jGrowl('close');">Close all in #test1.</a></p>
		
		<div id="random">An extra wide node, watch as the jGrowl containers stay put in the corners of the screen..</div>

		<div id="logs"><h3>Log:</h3></div>
		
		<hr />
				
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam porttitor turpis eu sem. Phasellus pulvinar, purus eget euismod imperdiet, quam est sollicitudin nisl, sed vulputate urna magna vel risus. Aliquam erat volutpat. Ut nulla mi, sagittis a, egestas ut, auctor vitae, nulla. Sed ut metus vel tellus scelerisque dictum. Suspendisse felis odio, eleifend a, feugiat a, interdum eget, lorem. Aliquam facilisis. Nulla neque enim, bibendum vitae, convallis vitae, pretium a, felis. Nunc diam sapien, iaculis sed, vestibulum in, pellentesque a, tellus. Mauris molestie risus non lectus. In a arcu. Etiam pulvinar, nibh et imperdiet egestas, diam pede lobortis risus, ac facilisis justo mauris eu ipsum. Aliquam nibh tortor, venenatis eu, pretium at, condimentum non, enim. Integer vitae urna. Duis semper, mauris ac egestas tristique, quam ipsum viverra risus, eget tempor libero turpis id nisl. Fusce pede. Nam varius.</p>

		<p>Phasellus placerat suscipit neque. In porttitor mi vel felis. Sed vel ante. Vestibulum lectus mauris, ullamcorper id, luctus vitae, molestie a, metus. Fusce eu diam in libero fermentum sagittis. Quisque eget mi non purus convallis dignissim. Nam id lectus. Maecenas sit amet massa id metus hendrerit euismod. Phasellus porta tempor odio. Aliquam erat volutpat. Sed ut quam a dolor fermentum vehicula. Nulla et metus. Nulla ornare lorem sed augue. Nulla urna. Donec ligula. Nulla blandit ultrices pede.</p>

		<p>Etiam blandit scelerisque diam. Donec nisl orci, accumsan sed, sodales vel, dictum ac, mauris. Aliquam non nunc eget magna imperdiet condimentum. Nunc sem. Etiam tincidunt. Quisque eros tortor, ultricies at, condimentum sit amet, feugiat vel, lectus. Morbi quis enim a ligula tristique consequat. Praesent nec massa nec urna cursus pretium. Phasellus porttitor. In adipiscing. Morbi ultrices.</p>

		<p>Cras eget elit. Duis placerat diam in sapien. Duis tempor. Sed tincidunt semper augue. Nam varius gravida ante. Etiam ultricies iaculis neque. Nam lacinia, augue eget commodo auctor, pede lorem lacinia leo, eu rhoncus est purus nec ligula. Sed congue feugiat sem. Nulla bibendum, purus et sodales dignissim, elit mauris pulvinar turpis, a pulvinar sem diam a magna. Suspendisse ut purus sit amet felis suscipit lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pharetra dictum nisl. Fusce odio metus, tempor a, pretium vel, ultrices quis, ante. Pellentesque ut purus sit amet mi mattis volutpat.</p>

		<p>Maecenas eu elit. Nam gravida. In leo. Morbi ante est, bibendum ut, pulvinar id, rhoncus vel, nisl. Nunc purus. Praesent nec nisl. Vivamus accumsan eleifend leo. Integer a enim non dolor convallis sagittis. Phasellus vel turpis. Phasellus pulvinar lectus eu sapien sollicitudin pharetra. In sollicitudin porttitor turpis. Donec feugiat, odio id egestas iaculis, lacus odio sagittis justo, a pharetra sem nunc eget orci. Donec ipsum nibh, fringilla sed, imperdiet id, vehicula eu, mi. Pellentesque tincidunt sodales diam. Pellentesque pede dolor, accumsan sit amet, dictum et, posuere eu, diam. Nulla lacinia turpis et neque. Ut ut augue. Phasellus ut metus. Nam in tellus.</p>
		
		<div id="test1" class="top-left"></div>
		<div id="test2" class="bottom-left"></div>
	</body>
</html>