forked from sciactive/pnotify
/
index.html
1977 lines (1952 loc) · 78.4 KB
/
index.html
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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8"/>
<title>Pines Notify</title>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="JavaScript (jQuery) notification plugin." />
<meta property="og:title" content="Pines Notify" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://pinesframework.org/pnotify/" />
<meta property="og:image" content="http://pinesframework.org/pnotify/includes/pines-logo.png" />
<meta property="og:site_name" content="Pines Notify" />
<meta property="fb:admins" content="508999194" />
<meta property="og:description" content="JavaScript (jQuery) notification plugin." />
<!-- Dev Notice -->
<link href="devnote.css" rel="stylesheet" type="text/css" />
<!-- Page Style -->
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<!-- jQuery UI -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
<!-- Theme Switcher Widget -->
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<!-- Bootstrap -->
<link href="includes/bootstrap/css/bootstrap.css" id="bootstrap-css" rel="stylesheet" type="text/css" />
<link href="includes/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Oxygen Icons -->
<link href="oxygen/icons.css" rel="stylesheet" type="text/css" />
<!-- JavaScript Source Formatting -->
<link href="includes/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="includes/beautify.js"></script>
<!-- Pines Notify -->
<script type="text/javascript" src="jquery.pnotify.js"></script>
<link href="jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="jquery.pnotify.default.icons.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Not pnotify specific, just make this page a little more presentable. */
#switcher-container {
position: fixed;
top: 60px;
right: 5px;
}
#switcher-bootstrap .dropdown-menu {
z-index: 10000;
}
@media (max-width: 980px) {
#switcher-container {
position: absolute;
top: 55px;
}
}
.pf-group {
background: transparent none no-repeat 0 0 !important;
padding: 4px;
margin: 5px auto;
}
.ui-widget {
font-size: 75% !important;
}
.pf-group input.ui-button {
padding: 2px !important;
font-size: .92em !important;
margin-bottom: 3px;
}
.btn-toolbar {
line-height: 28px;
}
.btn-toolbar h4 {
margin: 1em 0 .3em;
}
.btn-toolbar .btn-group {
vertical-align: middle;
}
/* Custom styled notice CSS */
.ui-pnotify.custom .ui-pnotify-container {
background-color: #404040 !important;
background-image: none !important;
border: none !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.ui-pnotify.custom .ui-pnotify-title, .ui-pnotify.custom .ui-pnotify-text {
font-family: Arial, Helvetica, sans-serif !important;
text-shadow: 2px 2px 3px black !important;
font-size: 10pt !important;
color: #FFF !important;
padding-left: 50px !important;
line-height: 1 !important;
text-rendering: geometricPrecision !important;
}
.ui-pnotify.custom .ui-pnotify-title {
font-weight: bold;
}
.ui-pnotify.custom .ui-pnotify-icon {
float: left;
}
.ui-pnotify.custom .picon {
margin: 3px;
width: 33px;
height: 33px;
}
/* Alternate stack initial positioning. This one is done through code,
to show how it is done. Look down at the stack_bottomright variable
in the JavaScript below. */
.ui-pnotify.stack-bottomright {
/* These are just CSS default values to reset the pnotify CSS. */
right: auto;
top: auto;
left: auto;
bottom: auto;
}
.ui-pnotify.stack-custom {
/* Custom values have to be in pixels, because the code parses them. */
top: 200px;
left: 200px;
right: auto;
}
.ui-pnotify.stack-custom2 {
top: auto;
left: auto;
bottom: 200px;
right: 200px;
}
/* This one is totally different. It stacks at the top and looks
like a Microsoft-esque browser notice bar. */
.ui-pnotify.stack-bar-top {
right: 0;
top: 0;
}
.ui-pnotify.stack-bar-bottom {
margin-left: 15%;
right: auto;
bottom: 0;
top: auto;
left: auto;
}
</style>
<script type="text/javascript">
var permanotice, tooltip, _alert;
$(function(){
// This is how to change the default settings for the entire page.
//$.pnotify.defaults.width = "400px";
// If you don't want new lines ("\n") automatically converted to breaks ("<br />")
//$.pnotify.defaults.insert_brs = false;
$.pnotify({
title: "Pines Notify",
text: "Welcome. Try hovering over me. You can click things behind me, because I'm non-blocking.",
nonblock: true,
before_close: function(pnotify){
// You can access the notice's options with this. It is read only.
//pnotify.opts.text;
// You can change the notice's options after the timer like this:
pnotify.pnotify({
title: pnotify.opts.title+" - Enjoy your Stay",
before_close: null
});
pnotify.pnotify_queue_remove();
return false;
}
});
// This notice is used as a tooltip.
var make_tooltip = function(){
tooltip = $.pnotify({
title: "Tooltip",
text: "I'm not in a stack. I'm positioned like a tooltip with JavaScript.",
hide: false,
closer: false,
sticker: false,
history: false,
animate_speed: 100,
opacity: .9,
icon: "ui-icon ui-icon-comment",
// Setting stack to false causes Pines Notify to ignore this notice when positioning.
stack: false,
after_init: function(pnotify){
// Remove the notice if the user mouses over it.
pnotify.mouseout(function(){
pnotify.pnotify_remove();
});
},
before_open: function(pnotify){
// This prevents the notice from displaying when it's created.
pnotify.pnotify({
before_open: null
});
return false;
}
});
}
// I put it in a function so I could show the source easily.
make_tooltip();
// This creates all those source buttons.
$(".source").each(function(){
var button = $(this);
// Wrap the button in a container.
var contain = $('<div class="btn-group" />');
contain = button.wrap(contain).parent();
// Add a source button.
$('<button class="btn" title="Show source code.">{}</button>').click(function(){
$(this).blur();
var text = button.attr("onclick");
if (!text && button.attr("onmouseover"))
text = "// Mouse Over:\n"+button.attr("onmouseover")+"\n\n// Mouse Move:\n"+button.attr("onmousemove")+"\n\n// Mouse Out:\n"+button.attr("onmouseout");
// IE needs this.
if (text.toString) {
text = text.toString();
if (text.match(/^function (onclick|anonymous)[\n ]*\([^\)]*\)[\n ]*\{[\n\t ]*/))
text = text.replace(/^function (onclick|anonymous)[\n ]*\([^\)]*\)[\n ]*\{[\n\t ]*/, "").replace(/[\n\t ]*}[\n\t ]*$/, "");
}
var dialog = $("<div title=\""+button.text()+" - Source\" class=\"source-dialog\"></div>");
$("<pre class=\"prettyprint linenums\" />").text(js_beautify(text)).appendTo(dialog);
if (text.match(/^\w*\([^\)]*\);$/)) {
var f_name = text.replace(/\(.*/g, "");
text = window[f_name].toString();
$("<pre class=\"prettyprint\" />").text(js_beautify(text)).appendTo(dialog);
}
if (text.match(/tooltip\.pnotify_display\(\);/)) {
$("<pre class=\"prettyprint linenums\" />").text(js_beautify(make_tooltip.toString())).appendTo(dialog);
}
dialog.dialog({width: "auto", dialogClass: "sourcecode"});
// Make sure the dialog isn't more than 800x600.
// Can't just add max-height cause that means it can't be resized beyond.
if (dialog.width() > 800)
dialog.dialog("option", "width", 800).dialog("option", "position", "center");
if (dialog.height() > 600)
dialog.dialog("option", "height", 600).dialog("option", "position", "center");
prettyPrint();
}).appendTo(contain);
});
prettyPrint(); // Format source in help.
if ($.fn.themeswitcher)
$('#switcher-jqueryui').themeswitcher();
else
$('#switcher-jqueryui').html("Couldn't load theme switcher widget.");
// Navbar scrollspy.
$('#navbar').scrollspy();
});
function show_rich() {
$.pnotify({
title: '<span style="color: green;">Rich Content Notice</span>',
text: '<span style="color: blue;">Look at my beautiful <strong>strong</strong>, <em>emphasized</em>, and <span style="font-size: 1.5em;">large</span> text.</span>'
});
}
function consume_alert() {
if (_alert) return;
_alert = window.alert;
window.alert = function(message) {
$.pnotify({
title: 'Alert',
text: message
});
};
}
function release_alert() {
if (!_alert) return;
window.alert = _alert;
_alert = null;
}
function fake_load() {
var cur_value = 1,
progress;
// Make a loader.
var loader = $.pnotify({
title: "Fake Load",
text: "<div class=\"progress_bar\" />",
icon: 'picon picon-throbber',
hide: false,
closer: false,
sticker: false,
history: false,
before_open: function(pnotify){
progress = pnotify.find("div.progress_bar");
progress.progressbar({value: cur_value});
// Pretend to do something.
var timer = setInterval(function(){
if (cur_value >= 100) {
// Remove the interval.
window.clearInterval(timer);
loader.pnotify_remove();
return;
}
//cur_value += Math.ceil(3 * ((100 - cur_value) / 100));
cur_value += .3;
progress.progressbar('option', 'value', cur_value);
}, 2);
}
});
}
function dyn_notice() {
var percent = 0;
var notice = $.pnotify({
title: "Please Wait",
type: 'info',
icon: 'picon picon-throbber',
hide: false,
closer: false,
sticker: false,
opacity: .75,
shadow: false,
width: "150px"
});
setTimeout(function(){
notice.pnotify({title: false});
var interval = setInterval(function(){
percent += 2;
var options = {
text: percent+"% complete."
};
if (percent == 80)
options.title = "Almost There";
if (percent >= 100) {
window.clearInterval(interval);
options.title = "Done!";
options.type = "success";
options.hide = true;
options.closer = true;
options.sticker = true;
options.icon = 'picon picon-task-complete';
options.opacity = 1;
options.shadow = true;
options.width = $.pnotify.defaults.width;
//options.min_height = "300px";
}
notice.pnotify(options);
}, 120);
}, 2000);
}
function timed_notices(n) {
var start_time = new Date().getTime(),
end_time;
var options = {
title: "Notice Benchmark",
text: "Testing notice speed.",
animation: 'none',
delay: 0,
history: false
};
for (var i = 0; i < n; i++) {
if (i + 1 == n) {
options.after_close = function(pnotify){
// Remove this callback.
pnotify.pnotify({
after_close: null
});
end_time = new Date().getTime();
alert("Testing complete:\n\nTotal Notices: "+n+
"\nTotal Time: "+(end_time - start_time)+"ms ("+((end_time - start_time) / 1000)+"s)"+
"\nAverage Time: "+((end_time - start_time) / n)+"ms ("+((end_time - start_time) / n / 1000)+"s)")
};
}
$.pnotify(options);
}
}
/*********** Custom Stacks ***********
* A stack is an object which Pines Notify uses to determine where
* to position notices. A stack has two mandatory variables, dir1
* and dir2. dir1 is the first direction in which the notices are
* stacked. When the notices run out of room in the window, they
* will move over in the direction specified by dir2. The directions
* can be "up", "down", "right", or "left". Stacks are independent
* of each other, so a stack doesn't know and doesn't care if it
* overlaps (and blocks) another stack. The default stack, which can
* be changed like any other default, goes down, then left. Stack
* objects are used and manipulated by Pines Notify, and therefore,
* should be a variable when passed. So, calling something like
*
* $.pnotify({stack: {"dir1": "down", "dir2": "left"}});
*
* will **NOT** work. It will create a notice, but that notice will
* be in its own stack and may overlap other notices.
*/
var stack_topleft = {"dir1": "down", "dir2": "right", "push": "top"};
var stack_bottomleft = {"dir1": "right", "dir2": "up", "push": "top"};
var stack_custom = {"dir1": "right", "dir2": "down"};
var stack_custom2 = {"dir1": "left", "dir2": "up", "push": "top"};
var stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top", "spacing1": 0, "spacing2": 0};
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
/*********** Positioned Stack ***********
* This stack is initially positioned through code instead of CSS.
* This is done through two extra variables. firstpos1 and firstpos2
* are pixel values, relative to a viewport edge. dir1 and dir2,
* respectively, determine which edge. It is calculated as follows:
*
* - dir = "up" - firstpos is relative to the bottom of viewport.
* - dir = "down" - firstpos is relative to the top of viewport.
* - dir = "right" - firstpos is relative to the left of viewport.
* - dir = "left" - firstpos is relative to the right of viewport.
*/
var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 25, "firstpos2": 25};
function show_stack_topleft(type) {
var opts = {
title: "Over Here",
text: "Check me out. I'm in a different stack.",
addclass: "stack-topleft",
stack: stack_topleft
};
switch (type) {
case 'error':
opts.title = "Oh No";
opts.text = "Watch out for that water tower!";
opts.type = "error";
break;
case 'info':
opts.title = "Breaking News";
opts.text = "Have you met Ted?";
opts.type = "info";
break;
case 'success':
opts.title = "Good News Everyone";
opts.text = "I've invented a device that bites shiny metal asses.";
opts.type = "success";
break;
}
$.pnotify(opts);
};
function show_stack_bottomleft(type) {
var opts = {
title: "Over Here",
text: "Check me out. I'm in a different stack.",
addclass: "stack-bottomleft",
stack: stack_bottomleft
};
switch (type) {
case 'error':
opts.title = "Oh No";
opts.text = "Watch out for that water tower!";
opts.type = "error";
break;
case 'info':
opts.title = "Breaking News";
opts.text = "Have you met Ted?";
opts.type = "info";
break;
case 'success':
opts.title = "Good News Everyone";
opts.text = "I've invented a device that bites shiny metal asses.";
opts.type = "success";
break;
}
$.pnotify(opts);
};
function show_stack_bottomright(type) {
var opts = {
title: "Over Here",
text: "Check me out. I'm in a different stack.",
addclass: "stack-bottomright",
stack: stack_bottomright
};
switch (type) {
case 'error':
opts.title = "Oh No";
opts.text = "Watch out for that water tower!";
opts.type = "error";
break;
case 'info':
opts.title = "Breaking News";
opts.text = "Have you met Ted?";
opts.type = "info";
break;
case 'success':
opts.title = "Good News Everyone";
opts.text = "I've invented a device that bites shiny metal asses.";
opts.type = "success";
break;
}
$.pnotify(opts);
};
function show_stack_custom(type) {
var opts = {
title: "Over Here",
text: "Check me out. I'm in a different stack.",
addclass: "stack-custom",
stack: stack_custom
};
switch (type) {
case 'error':
opts.title = "Oh No";
opts.text = "Watch out for that water tower!";
opts.type = "error";
break;
case 'info':
opts.title = "Breaking News";
opts.text = "Have you met Ted?";
opts.type = "info";
break;
case 'success':
opts.title = "Good News Everyone";
opts.text = "I've invented a device that bites shiny metal asses.";
opts.type = "success";
break;
}
$.pnotify(opts);
};
function show_stack_custom2(type) {
var opts = {
title: "Over Here",
text: "Check me out. I'm in a different stack.",
addclass: "stack-custom2",
stack: stack_custom2
};
switch (type) {
case 'error':
opts.title = "Oh No";
opts.text = "Watch out for that water tower!";
opts.type = "error";
break;
case 'info':
opts.title = "Breaking News";
opts.text = "Have you met Ted?";
opts.type = "info";
break;
case 'success':
opts.title = "Good News Everyone";
opts.text = "I've invented a device that bites shiny metal asses.";
opts.type = "success";
break;
}
$.pnotify(opts);
};
function show_stack_bar_top(type) {
var opts = {
title: "Over Here",
text: "Check me out. I'm in a different stack.",
addclass: "stack-bar-top",
cornerclass: "",
width: "100%",
stack: stack_bar_top
};
switch (type) {
case 'error':
opts.title = "Oh No";
opts.text = "Watch out for that water tower!";
opts.type = "error";
break;
case 'info':
opts.title = "Breaking News";
opts.text = "Have you met Ted?";
opts.type = "info";
break;
case 'success':
opts.title = "Good News Everyone";
opts.text = "I've invented a device that bites shiny metal asses.";
opts.type = "success";
break;
}
$.pnotify(opts);
};
function show_stack_bar_bottom(type) {
var opts = {
title: "Over Here",
text: "Check me out. I'm in a different stack.",
addclass: "stack-bar-bottom",
cornerclass: "",
width: "70%",
stack: stack_bar_bottom
};
switch (type) {
case 'error':
opts.title = "Oh No";
opts.text = "Watch out for that water tower!";
opts.type = "error";
break;
case 'info':
opts.title = "Breaking News";
opts.text = "Have you met Ted?";
opts.type = "info";
break;
case 'success':
opts.title = "Good News Everyone";
opts.text = "I've invented a device that bites shiny metal asses.";
opts.type = "success";
break;
}
$.pnotify(opts);
};
function show_stack_info() {
var modal_overlay;
if (typeof info_box != "undefined") {
info_box.pnotify_display();
return;
}
info_box = $.pnotify({
title: "Pines Notify Stacks",
text: "Stacks are used to position notices and determine where new notices will go when they're created. Each notice that's placed into a stack will be positioned related to the other notices in that stack. There is no limit to the number of stacks, and no limit to the number of notices in each stack.",
type: "info",
icon: "picon picon-object-order-raise",
delay: 20000,
history: false,
stack: false,
before_open: function(pnotify){
// Position this notice in the center of the screen.
pnotify.css({
"top": ($(window).height() / 2) - (pnotify.height() / 2),
"left": ($(window).width() / 2) - (pnotify.width() / 2)
});
// Make a modal screen overlay.
if (modal_overlay)
modal_overlay.fadeIn("fast");
else
modal_overlay = $("<div />", {
"class": "ui-widget-overlay",
"css": {
"display": "none",
"position": "fixed",
"top": "0",
"bottom": "0",
"right": "0",
"left": "0"
}
}).appendTo("body").fadeIn("fast");
},
before_close: function(){
modal_overlay.fadeOut("fast");
}
});
};
</script>
<!-- Pines Form (For the form notice.) -->
<link href="includes/pform.css" media="all" rel="stylesheet" type="text/css" />
<link href="includes/pform-bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="includes/pform-ie-lt-8.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
.pform_custom div.pf-element .pf-label, .pform_custom div.pf-element .pf-note {
width: 130px; /* Width of labels. */
text-align: right;
}
.pform_custom div.pf-element .pf-group {
margin-left: 130px; /* Same as width of labels. */
}
.pform_custom div.pf-buttons {
padding-left: 115px; /* Width of labels + margin to inputs - button spacing. */
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.pform_custom div.pf-buttons {
width: 225px; /* Custom form width - custom button div left padding - 20px (for IE's default padding.) */
}
</style>
<![endif]-->
</head>
<body id="page" data-spy="scroll">
<div id="navbar" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://pinesframework.org/pnotify/" style="height: 40px; padding-top: 0; padding-bottom: 0;">
<img id="logo" alt="Pines Logo" src="includes/pines-logo.png" style="padding: 0; border: 0; vertical-align: middle;" />
<span style="line-height: 40px;">Pines Notify</span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#page">Overview</a></li>
<li><a href="#demos-simple">Simple Demos</a></li>
<li><a href="#demos-advanced">Advanced Demos</a></li>
<li><a href="#theming">Theming</a></li>
<li><a href="#comments">Comments</a></li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Beyond Pines Notify <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://pinesframework.org/" target="_blank">Pines Framework</a></li>
<li><a href="http://pinescms.org/" target="_blank">Pines CMS</a></li>
<li class="divider"></li>
<li><a href="http://pinesframework.org/pform/" target="_blank">Pines Form</a></li>
<li><a href="http://pinesframework.org/pgrid/" target="_blank">Pines Grid</a></li>
<li><a href="http://pinesframework.org/ptags/" target="_blank">Pines Tags</a></li>
<li class="divider"></li>
<li>
<a href="http://sourceforge.net/projects/pines" target="_blank"><img src="http://sflogo.sourceforge.net/sflogo.php?group_id=264165&type=13" width="120" height="30" alt="Get Pines at SourceForge.net. Fast, secure and Free Open Source software downloads" style="border: none;" /></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="switcher-container">
<div id="switcher-bootstrap">
<div class="btn-group">
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">
Theme: <span id="bootstrap-current">Normal</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Normal'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.css');">Normal</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Amelia'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.amelia.css');">Amelia</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Cerulean'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.cerulean.css');">Cerulean</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Cyborg'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.cyborg.css');">Cyborg</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Journal'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.journal.css');">Journal</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Readable'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.readable.css');">Readable</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Simplex'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.simplex.css');">Simplex</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Slate'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.slate.css');">Slate</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Spacelab'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.spacelab.css');">Spacelab</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Spruce'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.spruce.css');">Spruce</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('Superhero'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.superhero.css');">Superhero</a></li>
<li><a href="javascript:void(0);" onclick="$('#bootstrap-current').text('United'); $('#bootstrap-css').attr('href', 'includes/bootstrap/css/bootstrap.united.css');">United</a></li>
<li class="divider"></li>
<li><a href="http://bootswatch.com/" target="_blank">Themes by Bootswatch</a></li>
</ul>
</div>
</div>
<div id="switcher-jqueryui" class="hide"></div>
</div>
<div class="container">
<div class="page-banner">
<h1>Pines Notify</h1>
<p id="description">JavaScript notifications for Bootstrap or jQuery UI.</p>
<div>
<a class="btn btn-primary btn-large" href="https://sourceforge.net/projects/pines/files/pnotify/1.2/pnotify-1.2.2.zip/download" target="_blank">Download Pines Notify 1.2</a>
<a class="right-button btn btn-large" href="http://github.com/sciactive/pnotify" target="_blank" title="Fork me on GitHub">Pines Notify on GitHub <img src="includes/github-icon.png" alt="GitHub Icon" /></a>
<br /><br />
<a style="margin: 0 8px;" data-toggle="modal" href="#using">Using Pines Notify</a>
<a style="margin: 0 8px;" href="https://github.com/sciactive/pnotify/issues?state=open" target="_blank">Issue Tracker</a>
<a style="margin: 0 8px;" href="https://github.com/sciactive/pnotify/issues/new" target="_blank">Bug Report/Feature Request</a>
<br /><br />
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style " addthis:url="http://pinesframework.org/pnotify/" style="display: table; margin: 0pt auto;">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" style="margin-right: 12px;"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_twitter_follow_native" tw:screen_name="pinesframework"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fa2edbb6da70bd1"></script>
<!-- AddThis Button END -->
</div>
</div>
<div class="modal hide" id="using" style="max-height: inherit;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Using Pines Notify</h3>
</div>
<div class="modal-body">
<p>
Pines Notify comes with the following files:<br />
<br />
<code>jquery.pnotify.js</code> & <code>jquery.pnotify.min.js</code> (Minified) - The main JavaScript.
<br />
<code>jquery.pnotify.default.css</code> - The main stylesheet.
<br />
<code>jquery.pnotify.default.icons.css</code> - Use this to support Pines Icon styles.
</p>
<p>
So here's how you'd include them all:
</p>
<pre class="prettyprint"><script type="text/javascript" src="jquery.pnotify<em>.min</em>.js"></script>
<link href="jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" />
<!-- Include this file if you are using Pines Icons. -->
<link href="jquery.pnotify.default.icons.css" media="all" rel="stylesheet" type="text/css" /></pre>
<p>
You also need to include jQuery (1.4 or higher) and either Bootstrap CSS or a jQuery UI Theme.
<small>If you want to use jQuery UI effect animations, you also need to include the jQuery UI JavaScript.</small>
</p>
<p>
Now you can use Pines Notify like this:
</p>
<pre class="prettyprint"><script type="text/javascript">
$(function(){
$.pnotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});
});
</script></pre>
<p>
And if you choose to use jQuery UI for all your styling,
include this line somewhere before your first notice:
</p>
<pre class="prettyprint">$.pnotify.defaults.styling = "jqueryui";</pre>
<p>
And if you don't want the history pull-down menu in the top
corner, include this line somewhere before your first notice:
</p>
<pre class="prettyprint">$.pnotify.defaults.history = false;</pre>
<p>
All of the examples on this page provide source code with
the "{}" button,
<img style="margin-left: 3em;" src="includes/source-screen.png" alt="Source button screen shot." />
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Ok, got it.</a>
</div>
</div>
<div class="page-points">
<div class="container-fluid">
<div class="row-fluid dev-note" style="display: none;">
<div class="span3"> </div>
<div class="span6 offset3">
<div class="alert alert-error">
<h3><i class="icon-exclamation-sign" style="position: relative; top: 3px;"></i> Caution warning danger attention!</h3>
<p>
This is the development site. It's a playground for
bleeding edge features and code that probably won't
work. You should head over to the
<a href="http://pinesframework.org/pnotify/" class="btn btn-success">Main Site</a>
</p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div class="alert-block">
<h3><i class="icon-book" style="position: relative; top: 3px;"></i> About</h3>
<p>
Pines Notify is a JavaScript notification plugin, developed
by Hunter Perrin as part of
<a href="http://pinesframework.org/">Pines</a>.
It is designed to provide an unparalleled level of
flexibility, while still being very easy to implement and
use.
</p>
</div>
</div>
<div class="span4">
<div class="alert-block">
<h3><i class="icon-list-alt" style="position: relative; top: 3px;"></i> Cross-Browser</h3>
<p>
Pines Notify works in all major browsers and provides
a consistent interface. It is tested thoroughly for
consistency.
</p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="alert-block">
<h3><i class="icon-asterisk" style="position: relative; top: 3px;"></i> Unobtrusive</h3>
<p>
Pines Notify can provide <strong>non-blocking</strong> notices.
This allows the user to click elements behind the notice without
even having to dismiss it.
</p>
<p>
<a class="btn" data-toggle="modal" href="#feature-modal" >See All Features</a>
</p>
</div>
</div>
<div class="span4">
<div class="alert-block">
<h3><i class="icon-picture" style="position: relative; top: 3px;"></i> Themeable</h3>
<p>
Pines Notify uses either Bootstrap or jQuery UI for styling, which
means it is fully and easily themeable. Try out some of the
readymade themes using the selector in the top right corner
of this page.
</p>
<p style="text-align: right;">
<a href="http://jqueryui.com/themeroller/"><img src="includes/themeroller-ready.png" alt="ThemeRoller Ready" /></a>
</p>
</div>
</div>
<div class="span4">
<div class="alert-block">
<h3><i class="icon-gift" style="position: relative; top: 3px;"></i> Completely Open</h3>
<p>
Pines Notify is distributed under the
<a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPL</a>,
<a href="http://www.gnu.org/licenses/lgpl.html" target="_blank">LGPL</a>,
and
<a href="http://www.mozilla.org/MPL/MPL-1.1.html" target="_blank">MPL</a>.
This triple copyleft licensing model avoids
incompatibility with other open source licenses.
</p>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span2"> </div>
<div class="span8 offset2">
<div class="alert alert-info">
<h3><i class="icon-star" style="position: relative; top: 3px;"></i> New Version Has Big Changes!</h3>
<ul class="unstyled">
<li>New Stuff:
<ul>
<li>Styling can now be applied with either <strong>jQuery
UI</strong> or <strong>Twitter Bootstrap</strong>
using the "styling" option.</li>
<li>There's a new notice type called "success".</li>
</ul>
</li>
<li>Changes:
<ul>
<li>With this version of Pines Notify, the "pnotify_"
prefix on options is no longer necessary. It will
still work, so most of your current code should be
unaffected.</li>
<li>The way icons are specified has changed. Now there is
only one "icon" option. The defaults depend on the
style chosen.</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid stable-note" style="display: none;">
<div class="span3"> </div>
<div class="span6 offset3">
<div class="alert alert-success">
<h3><i class="icon-info-sign" style="position: relative; top: 3px;"></i> Did you know?</h3>
<p>
This is the stable site. You can download code here that's
tested and proven to work. However, if you like to live
dangerously, you can also check out the
<a href="http://sciactive.github.com/pnotify">development site</a>.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal hide fade" id="feature-modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Pines Notify Features</h3>
</div>
<div class="modal-body">
<ul class="unstyled">
<li>Rich graphical features and effects.
<ul>
<li>jQuery UI, Bootstrap, Pines, and any other CSS based icons.</li>
<li>Timed hiding with visual effects.</li>
<li>Standard and custom effects.</li>
<li>Add custom classes for individual notice styling.</li>
<li>Variable opacity.</li>
<li>Optional drop shadows.</li>
</ul>
</li>
<li>Highly customizable UI.
<ul>
<li>Sticky (no automatic hiding) notices.</li>
<li>Optional hide and sticker buttons.</li>
<li>Non-blocking notices for less intrusive use.</li>
<li>Three notification types: notice, info, and error.</li>
<li>Stacks allow notice sets to stack independently.
<ul>
<li>Control stack direction and push to top or bottom.</li>
</ul>
</li>
</ul>
</li>
<li>Feature rich API.
<ul>
<li>Supports dynamically updating text, title, icon, type...</li>
<li>Supports HTML (including forms) in title and text.
<ul>
<li>Can also escape HTML to prevent XSS attack.</li>
</ul>
</li>
<li>Callbacks for various events, which can cancel said events.</li>
<li>History viewer allows user to review previous notices.</li>
</ul>
</li>
</ul>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn">Close</a>
</div>