Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

1977 lines (1952 sloc) 80.283 kB
<!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&amp;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> &amp; <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">&lt;script type="text/javascript" src="jquery.pnotify<em>.min</em>.js"&gt;&lt;/script&gt;
&lt;link href="jquery.pnotify.default.css" media="all" rel="stylesheet" type="text/css" /&gt;
&lt;!-- Include this file if you are using Pines Icons. --&gt;
&lt;link href="jquery.pnotify.default.icons.css" media="all" rel="stylesheet" type="text/css" /&gt;</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">&lt;script type="text/javascript"&gt;
$(function(){
$.pnotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});
});
&lt;/script&gt;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
</div>
<div class="well" style="clear: both;">
<h2>Wait! Choose Your Styling:</h2>
<div>
Pines Notify offers two styling methods. Each uses a different
CSS library.
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn active" id="style-bootstrap">Bootstrap</button>
<button class="btn" id="style-jqueryui">jQuery UI</button>
</div>
<button class="btn source" onclick="$.pnotify({
title: 'Bootstrap Notice',
text: 'Look at my beautiful styling! ^_^',
styling: 'bootstrap'
});
$.pnotify({
title: 'Bootstrap Info',
text: 'Look at my beautiful styling! ^_^',
type: 'info',
styling: 'bootstrap'
});
$.pnotify({
title: 'Bootstrap Success',
text: 'Look at my beautiful styling! ^_^',
type: 'success',
styling: 'bootstrap'
});
$.pnotify({
title: 'Bootstrap Error',
text: 'Look at my beautiful styling! ^_^',
type: 'error',
styling: 'bootstrap'
});
$.pnotify({
title: 'jQuery UI Notice',
text: 'Look at my beautiful styling! ^_^',
styling: 'jqueryui'
});
$.pnotify({
title: 'jQuery UI Info',
text: 'Look at my beautiful styling! ^_^',
type: 'info',
styling: 'jqueryui'
});
$.pnotify({
title: 'jQuery UI Success',
text: 'Look at my beautiful styling! ^_^',
type: 'success',
styling: 'jqueryui'
});
$.pnotify({
title: 'jQuery UI Error',
text: 'Look at my beautiful styling! ^_^',
type: 'error',
styling: 'jqueryui'
});">Demo Each</button>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#style-bootstrap").click(function(){
$.pnotify.defaults.styling = "bootstrap";
$("#switcher-bootstrap").show();
$("#switcher-jqueryui").hide();
$.pnotify({
title: "Styling Change",
text: "From now on, notices will be styled with Twitter Bootstrap."
});
});
$("#style-jqueryui").click(function(){
$.pnotify.defaults.styling = "jqueryui";
$("#switcher-jqueryui").show();
$("#switcher-bootstrap").hide();
$.pnotify({
title: "Styling Change",
text: "From now on, notices will be styled with jQuery UI."
});
});
});
</script>
</div>
<div id="sections">
<div id="demos-simple">
<div class="page-header">
<h2>Simple Demos</h2>
</div>
<div class="btn-toolbar well">
<button class="btn source" onclick="$.pnotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});">Regular Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'Sticky Notice',
text: 'Check me out! I\'m a sticky notice. You\'ll have to close me yourself.',
hide: false
});">Sticky Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'See Through Notice',
text: 'No one ever pays attention to me. Why should they? I\'m practically invisible.',
opacity: .8
});">Transparent Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Shadow Notice',
text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
shadow: false
});">No Shadow Notice</button>
<button class="btn source" onclick="$.pnotify('Check me out! I\'m a notice.');">Simple Notice</button>
<button class="btn source" onclick="$.pnotify(Math.round(Math.random()*9999));">Number Notice</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="$.pnotify({
title: 'Pines Icon Notice',
text: 'I have an icon that uses the Pines icon styles.',
icon: 'picon picon-mail-unread-new'
});">Pines Icon Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'jQuery UI Icon Notice',
text: 'I have an icon that uses the jQuery UI icon styles.',
icon: 'ui-icon ui-icon-mail-closed'
});">jQuery UI Icon Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'Bootstrap Icon Notice',
text: 'I have an icon that uses the Bootstrap icon styles.',
icon: 'icon-envelope'
});">Bootstrap Icon Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Icon Notice',
text: 'I have no icon.',
icon: false
});">No Icon Notice</button>
</div>
<div class="btn-toolbar well">
<button class="btn source" onclick="$.pnotify({
title: 'New Thing',
text: 'Just to let you know, something happened.',
type: 'info'
});">Regular Info</button>
<button class="btn source" onclick="$.pnotify({
title: 'Sticky Info',
text: 'Sticky info, you know, like a newspaper covered in honey.',
type: 'info',
hide: false
});">Sticky Info</button>
<button class="btn source" onclick="$.pnotify({
title: 'See Through Info',
text: 'Not only does it not matter, but I don\'t even care if you see this info.',
type: 'info',
opacity: .8
});">Transparent Info</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Shadow Info',
text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
type: 'info',
shadow: false
});">No Shadow Info</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="$.pnotify({
title: 'Pines Icon Info',
text: 'Something is encrypted. Check out my icon, it shows that you\'re secure because our encryption uses padlocks.',
type: 'info',
icon: 'picon picon-document-encrypt'
});">Pines Icon Info</button>
<button class="btn source" onclick="$.pnotify({
title: 'jQuery UI Icon Info',
text: 'Something is encrypted. Check out my icon, it shows that you\'re secure because our encryption uses padlocks.',
type: 'info',
icon: 'ui-icon ui-icon-locked'
});">jQuery UI Icon Info</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Icon Info',
text: 'I have no icon.',
type: 'info',
icon: false
});">No Icon Info</button>
</div>
<div class="btn-toolbar well">
<button class="btn source" onclick="$.pnotify({
title: 'Regular Success',
text: 'That thing that you were trying to do worked!',
type: 'success'
});">Regular Success</button>
<button class="btn source" onclick="$.pnotify({
title: 'Sticky Success',
text: 'Sticky success... I\'m not even gonna make a joke.',
type: 'success',
hide: false
});">Sticky Success</button>
<button class="btn source" onclick="$.pnotify({
title: 'See Through Success',
text: 'He may be successful, but I see right through him.',
type: 'success',
opacity: .8
});">Transparent Success</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Shadow Success',
text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
type: 'success',
shadow: false
});">No Shadow Success</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="$.pnotify({
title: 'Pines Icon Success',
text: 'We reached the moon first! See, we planted a flag.',
type: 'success',
icon: 'picon picon-flag-green'
});">Pines Icon Success</button>
<button class="btn source" onclick="$.pnotify({
title: 'jQuery UI Icon Success',
text: 'We reached the moon first! See, we planted a flag.',
type: 'success',
icon: 'ui-icon ui-icon-flag'
});">jQuery UI Icon Success</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Icon Success',
text: 'I have no icon.',
type: 'success',
icon: false
});">No Icon Success</button>
</div>
<div class="btn-toolbar well">
<button class="btn source" onclick="$.pnotify({
title: 'Oh No!',
text: 'Something terrible happened.',
type: 'error'
});">Regular Error</button>
<button class="btn source" onclick="$.pnotify({
title: 'Uh Oh!',
text: 'Something really terrible happened. You really need to read this, so I won\'t close automatically.',
type: 'error',
hide: false
});">Sticky Error</button>
<button class="btn source" onclick="$.pnotify({
title: 'See Through Error',
text: 'There\'s an error, but no one cares.',
type: 'error',
opacity: .8
});">Transparent Error</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Shadow Error',
text: 'I don\'t have a shadow. (It\'s cause I\'m a vampire or something. Or is that reflections...)',
type: 'error',
shadow: false
});">No Shadow Error</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="$.pnotify({
title: 'Pines Icon Error',
text: 'Oh no. Something\'s wrong with your network, and I\'m showing you visually using an appropriate icon to indicate the type of error that has occured. You know, network.',
type: 'error',
icon: 'picon picon-network-wireless'
});">Pines Icon Error</button>
<button class="btn source" onclick="$.pnotify({
title: 'jQuery UI Icon Error',
text: 'Oh no. Something\'s wrong with your network, and I\'m showing you visually using an appropriate icon to indicate the type of error that has occured. You know, network.',
type: 'error',
icon: 'ui-icon ui-icon-signal-diag'
});">jQuery UI Icon Error</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Icon Error',
text: 'I have no icon.',
type: 'error',
icon: false
});">No Icon Error</button>
</div>
</div>
<div id="demos-advanced">
<div class="page-header">
<h2>Advanced Demos</h2>
</div>
<div class="btn-toolbar well">
<button class="btn source" onclick="$.pnotify({
title: 'No Sticky Button Notice',
text: 'Check me out! I\'m a sticky notice with no unsticky button. You\'ll have to close me yourself.',
hide: false,
sticker: false
});">No Sticky Button</button>
<button class="btn source" onclick="$.pnotify({
title: 'Permanent Buttons Notice',
text: 'My buttons are really lonely, so they\'re gonna hang out with us.',
closer_hover: false,
sticker_hover: false
});">Permanent Buttons</button>
<button class="btn source" onclick="$.pnotify({
title: 'No History Notice',
text: 'I\'m not part of the notice history, so if you redisplay the last message, it won\'t be me.',
history: false
});">No History Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Mouse Reset Notice',
text: 'I don\'t care if you move your mouse over me, I\'ll disappear when I want.',
mouse_reset: false
});">No Mouse Reset Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Rounded Corners Notice',
text: 'Warning: Contains sharp objects. Not suitable for browsers under the age of CSS3.',
cornerclass: 'ui-pnotify-sharp'
});">No Rounded Corners</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="$.pnotify({
title: 'Fast Fading Notice',
text: 'I fade in and out really quickly.',
animate_speed: 'fast'
});">Fast Fading Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'No Effect Notice',
text: 'I don\'t even bother to animate. I\'m too cool for that.',
animation: 'none'
});">No Effect Notice</button>
<button class="btn source" onclick="fake_load();">Pretend Loader</button>
<button class="btn source" onclick="dyn_notice();">Dynamic Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'Notice',
text: 'Right now I\'m a notice.',
before_close: function(pnotify){
pnotify.pnotify({
title: 'Error',
text: 'Uh oh. Now I\'ve become an error.',
type: 'error',
before_close: function(pnotify){
pnotify.pnotify({
title: 'Success',
text: 'I fixed the error!',
type: 'success',
before_close: function(pnotify){
pnotify.pnotify({
title: 'Info',
text: 'Everything\'s cool now.',
type: 'info',
before_close: null
});
pnotify.pnotify_queue_remove();
pnotify.effect('bounce');
return false;
}
});
pnotify.pnotify_queue_remove();
pnotify.effect('bounce');
return false;
}
});
pnotify.pnotify_queue_remove();
pnotify.effect('bounce');
return false;
}
});">Notice to Error to Success to Info</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="if (permanotice) {
permanotice.pnotify_display();
} else {
permanotice = $.pnotify({
title: 'Now Look Here',
text: 'There\'s something you need to know, and I won\'t go away until you come to grips with it.',
nonblock: true,
hide: false,
closer: false,
sticker: false
});
}">Permanotice</button>
<button class="btn source" onclick="if (permanotice.pnotify_remove) permanotice.pnotify_remove();">Remove Permanotice</button>
<button class="btn source" onclick="$.pnotify({
title: 'Non-Blocking Notice',
text: 'I\'m a special kind of notice called &quot;non-blocking&quot;. When you hover over me I\'ll fade to show the elements underneath. Feel free to click any of them just like I wasn\'t even here.\n\nNote: HTML links don\'t trigger in some browsers, due to security settings.',
nonblock: true,
nonblock_opacity: .2
});">Non-Blocking Notice</button>
<button class="btn source" onclick="var notice = $.pnotify({
text: $('#form_notice').html(),
icon: false,
width: 'auto',
hide: false,
closer: false,
sticker: false,
insert_brs: false
});
notice.find('form.pf-form').submit(function(){
var username = $(this).find('input[name=username]').val();
if (!username) {
alert('Please provide a username.');
return false;
}
notice.pnotify({
title: 'Welcome',
text: 'Successfully logged in as '+username,
icon: true,
width: $.pnotify.defaults.width,
hide: true,
closer: true,
sticker: true,
type: 'success'
});
return false;
});">Form Notice</button>
<div id="form_notice" style="display: none;">
<form class="pf-form pform_custom" action="" method="post">
<div class="pf-element pf-heading">
<h3>Login to Continue</h3>
<p>Just an example.</p>
</div>
<div class="pf-element">
<label>
<span class="pf-label">Username</span>
<input class="pf-field" type="text" name="username" />
</label>
</div>
<div class="pf-element">
<label>
<span class="pf-label">Password</span>
<input class="pf-field" type="password" name="password" />
</label>
</div>
<div class="pf-element">
<label>
<span class="pf-label">Remember Me</span>
<span class="pf-note">Lasts for 2 weeks.</span>
<input class="pf-field" type="checkbox" name="remember" />
</label>
</div>
<div class="pf-element pf-buttons pf-centered">
<input class="pf-button btn btn-primary" type="submit" name="submit" value="Submit" />
<input class="pf-button btn" type="reset" name="reset" value="Reset" />
</div>
</form>
</div>
<button class="btn source" onclick="var dont_alert = function(){};
$.pnotify({
title: 'I\'m Here',
text: 'I have a callback for each of my events. I\'ll call all my callbacks while I change states.',
before_init: function(opts){
var source_note = 'Return false to cancel the notice.';
alert('I\'m called before the notice initializes. I\'m passed the options used to make the notice. I can modify them. Watch me replace the word callback with tire iron!');
opts.text = opts.text.replace(/callback/g, 'tire iron');
},
after_init: function(pnotify){
alert('I\'m called after the notice initializes. I\'m passed the pnotify object for the current notice: '+pnotify+'\n\nThere are more callbacks you can assign, but this is the last notice you\'ll see. Check the code to see them all.');
},
before_open: function(pnotify){
var source_note = 'Return false to cancel opening.';
dont_alert('I\'m called before the notice opens. I\'m passed the pnotify object for the current notice: '+pnotify);
},
after_open: function(pnotify){
dont_alert('I\'m called after the notice opens. I\'m passed the pnotify object for the current notice: '+pnotify);
},
before_close: function(pnotify){
var source_note = 'Return false to cancel close. Use pnotify.pnotify_queue_remove() to set the removal timer again.';
dont_alert('I\'m called before the notice closes. I\'m passed the pnotify object for the current notice: '+pnotify);
},
after_close: function(pnotify){
var source_note = 'Return false to cancel removal from the DOM.';
dont_alert('I\'m called after the notice closes. I\'m passed the pnotify object for the current notice: '+pnotify);
}
});">Notice with Callbacks</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="var notice = $.pnotify({
title: 'Click Notice',
text: 'I wish someone would click me.'
}).click(function(e){
if ($(e.target).is('.ui-pnotify-closer *, .ui-pnotify-sticker *'))
return;
notice.pnotify({type: 'success', text: 'Yay, you clicked me!&lt;div style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Happy_smiley_face.png/240px-Happy_smiley_face.png&quot; /&gt;&lt;/div&gt;'});
});">Click Notice</button>
<button class="btn source" onclick="$.pnotify({
title: 'Big Notice',
text: 'Check me out! I\'m tall and wide, even though my text isn\'t.',
width: '500px',
min_height: '400px'
});">Big Notice</button>
<button class="btn source" onclick="show_rich();">Rich Notice</button>
<button class="btn source" onclick="$.pnotify({
title: '&lt;em&gt;Escaped Notice&lt;/em&gt;',
title_escape: true,
text: $('#evil_html').html(),
text_escape: true
});">Escaped Notice</button>
<div id="evil_html" style="display: none;">
<div>As you can see, I don't allow HTML in my content.</div>
<div>This prevents things like cross site scripting attacks:</div>
<script type="text/javascript">
(function(){
// Here would be the XSS attack.
})()
</script>
</div>
<button class="btn source" onclick="$.pnotify({
title: 'Custom Styling',
text: 'I have an additional class that\'s used to give me special styling. I always wanted to be pretty.',
addclass: 'custom',
icon: 'picon picon-32 picon-fill-color',
opacity: .8,
nonblock: true,
nonblock_opacity: .2
});">Custom Styled Notice</button> &lt; <a data-toggle="modal" href="#growl">This is how you make it look like Apple Growl.</a>
<div class="modal hide" id="growl" style="max-height: inherit;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Styling Notices Like Growl</h3>
</div>
<div class="modal-body">
<p>
To custom style a notice, you need to use a
class. For this example, we'll use "<strong>custom</strong>".
</p>
<p>
Here's some CSS to make custom notices look like
Apple Growl:
</p>
<pre class="prettyprint lang-css" style="min-width: 100%;">.ui-pnotify<strong>.custom</strong> .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<strong>.custom</strong> .ui-pnotify-title, .ui-pnotify<strong>.custom</strong> .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<strong>.custom</strong> .ui-pnotify-title {
font-weight: bold;
}
.ui-pnotify<strong>.custom</strong> .ui-pnotify-icon {
float: left;
}
.ui-pnotify<strong>.custom</strong> .picon {
margin: 3px;
width: 33px;
height: 33px;
}</pre>
<p>
And here's the JavaScript to use this styling:
</p>
<pre class="prettyprint" style="min-width: 100%;">$.pnotify({
title: 'Custom Styling',
text: 'I have an additional class that\'s used to give me special styling. I always wanted to be pretty.',
<strong>addclass: 'custom'</strong>,
icon: 'picon picon-32 picon-fill-color',
opacity: .8,
nonblock: true,
nonblock_opacity: .2
});</pre>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Ok, got it.</a>
</div>
</div>
</div>
<div class="btn-toolbar well">
<h4>
Examples of Custom Stacks
<button class="btn source" style="margin-left: 10px;" onclick="show_stack_info();">What are stacks?</button>
</h4>
<button class="btn source" onclick="show_stack_topleft('notice');">Notice</button>
<button class="btn source" onclick="show_stack_topleft('info');">Info</button>
<button class="btn source" onclick="show_stack_topleft('success');">Success</button>
<button class="btn source" onclick="show_stack_topleft('error');">Error</button>
Top Left. Moves down, then right. Pushes to stack top.
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="show_stack_bottomleft('notice');">Notice</button>
<button class="btn source" onclick="show_stack_bottomleft('info');">Info</button>
<button class="btn source" onclick="show_stack_bottomleft('success');">Success</button>
<button class="btn source" onclick="show_stack_bottomleft('error');">Error</button>
Bottom Left. Moves right, then up. Pushes to stack top.
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="show_stack_bottomright('notice');">Notice</button>
<button class="btn source" onclick="show_stack_bottomright('info');">Info</button>
<button class="btn source" onclick="show_stack_bottomright('success');">Success</button>
<button class="btn source" onclick="show_stack_bottomright('error');">Error</button>
Bottom Right. Moves up, then left. Pushes to stack bottom.
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="show_stack_custom('notice');">Notice</button>
<button class="btn source" onclick="show_stack_custom('info');">Info</button>
<button class="btn source" onclick="show_stack_custom('success');">Success</button>
<button class="btn source" onclick="show_stack_custom('error');">Error</button>
Custom. Moves right, then down. Pushes to stack bottom.
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="show_stack_custom2('notice');">Notice</button>
<button class="btn source" onclick="show_stack_custom2('info');">Info</button>
<button class="btn source" onclick="show_stack_custom2('success');">Success</button>
<button class="btn source" onclick="show_stack_custom2('error');">Error</button>
Custom. Moves left, then up. Pushes to stack top.
<br style="margin-bottom: 5px;" />
<h4>Really Different Stacks</h4>
<button class="btn source" onclick="show_stack_bar_top('notice');">Notice</button>
<button class="btn source" onclick="show_stack_bar_top('info');">Info</button>
<button class="btn source" onclick="show_stack_bar_top('success');">Success</button>
<button class="btn source" onclick="show_stack_bar_top('error');">Error</button>
Top bar style. (Like Old Microsoft Notification Bars.) Moves down, then right. Pushes to stack top.
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="show_stack_bar_bottom('notice');">Notice</button>
<button class="btn source" onclick="show_stack_bar_bottom('info');">Info</button>
<button class="btn source" onclick="show_stack_bar_bottom('success');">Success</button>
<button class="btn source" onclick="show_stack_bar_bottom('error');">Error</button>
Bottom bar style. (Like New Microsoft Notification Bars.) Moves up, then right. Pushes to stack bottom.
<br style="margin-bottom: 5px;" />
<button class="btn source" onmouseover="tooltip.pnotify_display();" onmousemove="tooltip.css({'top': event.clientY+12, 'left': event.clientX+12});" onmouseout="tooltip.pnotify_remove();">Hover Over Me</button>
Tooltip
</div>
<div class="btn-toolbar well">
<h4>Timer</h4>
Current Timer: <span id="timer" style="font-family: monospace;"></span>
<script type="text/javascript">
function update_timer_display() {
$("#timer").text(($.pnotify.defaults.delay/1000)+" seconds");
}
$(function(){
update_timer_display();
});
</script>
<br style="margin-bottom: 3px;" />
<button class="btn source" onclick="$.pnotify.defaults.delay ? (function(){$.pnotify.defaults.delay -= 500; update_timer_display();}()) : (alert('Timer is already at zero.'))">Lower Timer</button>
<button class="btn source" onclick="(function(){$.pnotify.defaults.delay += 500; update_timer_display();}())">Raise Timer</button>
<br style="margin-bottom: 5px;" />
<h4>Benchmarking</h4>
<button class="btn source" onclick="for (i=0; i!=10; i++) {$.pnotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});}">10 Notices</button>
<button class="btn source" onclick="for (i=0; i!=100; i++) {$.pnotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});}">100 Notices (Careful)</button>
<button class="btn source" onclick="timed_notices(100);">Time 100 Notices</button>
<button class="btn source" onclick="timed_notices(500);">Time 500 Notices</button>
<button class="btn source" onclick="timed_notices(1000);">Time 1000 Notices (Dangerous)</button>
<br style="margin-bottom: 5px;" />
<button class="btn source" onclick="$.pnotify_remove_all();">Remove All Notices</button>
</div>
<div class="btn-toolbar well">
<h4>Effects built in to jQuery</h4>
<button class="btn source" onclick="$.pnotify({
title: 'Show Effect',
text: 'I use a different effect.',
animation: 'show'
});">Show</button>
<button class="btn source" onclick="$.pnotify({
title: 'Fade Effect',
text: 'I use a different effect.',
animation: 'fade'
});">Fade</button>
<button class="btn source" onclick="$.pnotify({
title: 'Slide Effect',
text: 'I use a different effect.',
animation: 'slide'
});">Slide</button>
<button class="btn source" onclick="$.pnotify({
title: 'Show and Slide Effect',
text: 'I use a different effect.',
animation: {effect_in: 'show', effect_out: 'slide'}
});">Different In and Out</button>
<br style="margin-bottom: 5px;" />
<h4>Effects from jQuery UI</h4>
Presets:
<button class="btn source" onclick="$('#ui_effect_in').val('scale'); $('#ui_easing_in').val('easeOutElastic'); $('#ui_effect_out').val('same'); $('#ui_easing_out').val('same'); $('#ui_speed').val('700'); $('#ui_button').click();">Bouncy Fun</button>
<button class="btn source" onclick="$('#ui_effect_in').val('drop'); $('#ui_easing_in').val('easeOutBounce'); $('#ui_effect_out').val('same'); $('#ui_easing_out').val('easeOutCubic'); $('#ui_speed').val('700'); $('#ui_button').click();">Toss In</button>
<button class="btn source" onclick="$('#ui_effect_in').val('puff'); $('#ui_easing_in').val('easeOutBack'); $('#ui_effect_out').val('same'); $('#ui_easing_out').val('easeInBack'); $('#ui_speed').val('1000'); $('#ui_button').click();">Gentle Puff</button>
<br /><br />
<span style="display: inline-block; width: 30px;">In:</span>
Effect
<select id="ui_effect_in">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="puff">Puff</option>
<option value="scale">Scale</option>
<option value="slide">Slide</option>
</select>
Easing
<select id="ui_easing_in">
<option value="linear">Linear</option>
<option value="swing">Swing</option>
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInElastic">easeInElastic</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easeInOutElastic">easeInOutElastic</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBack">easeOutBack</option>
<option value="easeInOutBack">easeInOutBack</option>
<option value="easeInBounce">easeInBounce</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeInOutBounce">easeInOutBounce</option>
</select>
<br style="margin-bottom: 4px;" />
<span style="display: inline-block; width: 30px;">Out:</span>
Effect
<select id="ui_effect_out">
<option value="same">Same</option>
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="puff">Puff</option>
<option value="scale">Scale</option>
<option value="slide">Slide</option>
</select>
Easing
<select id="ui_easing_out">
<option value="same">Same</option>
<option value="linear">Linear</option>
<option value="swing">Swing</option>
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInElastic">easeInElastic</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easeInOutElastic">easeInOutElastic</option>
<option value="easeInBack">easeInBack</option>
<option value="easeOutBack">easeOutBack</option>
<option value="easeInOutBack">easeInOutBack</option>
<option value="easeInBounce">easeInBounce</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeInOutBounce">easeInOutBounce</option>
</select>
<br style="margin-bottom: 4px;" />
Speed (ms):
<input type="text" size="8" id="ui_speed" value="600" />
<button class="btn source" style="margin-left: 2em;" onclick="
var effect_in = $('#ui_effect_in').val(),
easing_in = $('#ui_easing_in').val(),
effect_out = $('#ui_effect_out').val(),
easing_out = $('#ui_easing_out').val(),
speed = $('#ui_speed').val();
if (effect_out == 'same')
effect_out = effect_in;
if (easing_out == 'same')
easing_out = easing_in;
if (speed.match(/^\d+$/))
speed = parseInt(speed);
var options_in = {easing: easing_in},
options_out = {easing: easing_out};
if (effect_in == 'scale')
options_in.percent = 100;
if (effect_out == 'scale')
options_out.percent = 0;
$.pnotify({
title: 'jQuery UI Effect',
text: 'I use an effect from jQuery UI.',
animate_speed: speed,
animation: {
'effect_in': effect_in,
'options_in': options_in,
'effect_out': effect_out,
'options_out': options_out
}
});
" id="ui_button">Notify!</button>
<br style="margin-bottom: 5px;" />
<h4>Custom Functions (Uses CSS3)</h4>
<button class="btn source" onclick="$.pnotify({
title: 'Custom Function',
text: 'I use a different effect.',
animation: function(status, callback, pnotify){
var source_note = 'Always call the callback when the animation completes.';
var cur_angle = 0,
cur_opacity_scale = 0;
if (status == 'out')
cur_opacity_scale = 1;
var timer = setInterval(function(){
cur_angle += 10;
if (cur_angle == 360) {
cur_angle = 0;
cur_opacity_scale = 1;
if (status == 'out')
cur_opacity_scale = 0;
clearInterval(timer);
} else {
cur_opacity_scale = cur_angle / 360;
if (status == 'out')
cur_opacity_scale = 1 - cur_opacity_scale;
}
pnotify.css({
'-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
}).fadeTo(0, cur_opacity_scale);
if (cur_angle == 0) {
if (status == 'out')
pnotify.hide();
callback();
}
}, 20);
}
});">One Function</button>
<button class="btn source" onclick="$.pnotify({
title: 'Custom Functions',
text: 'I use a different effect.',
animation: {effect_in: function(status, callback, pnotify){
var source_note = 'Always call the callback when the animation completes.';
var cur_angle = 0,
cur_opacity_scale = 0;
var timer = setInterval(function(){
cur_angle += 10;
if (cur_angle == 360) {
cur_angle = 0;
cur_opacity_scale = 1;
clearInterval(timer);
} else {
cur_opacity_scale = cur_angle / 360;
}
pnotify.css({
'-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
}).fadeTo(0, cur_opacity_scale);
if (cur_angle == 0)
callback();
}, 20);
}, effect_out: function(status, callback, pnotify){
var source_note = 'Always call the callback when the animation completes.';
var cur_angle = 0,
cur_opacity_scale = 1;
var timer = setInterval(function(){
cur_angle += 10;
if (cur_angle == 360) {
cur_angle = 0;
cur_opacity_scale = 0;
clearInterval(timer);
} else {
cur_opacity_scale = cur_angle / 360;
cur_opacity_scale = 1 - cur_opacity_scale;
}
pnotify.css({
'-moz-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-webkit-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-o-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'-ms-transform': ('rotate('+cur_angle+'deg) scale('+cur_opacity_scale+')'),
'filter': ('progid:DXImageTransform.Microsoft.BasicImage(rotation='+(cur_angle / 360 * 4)+')')
}).fadeTo(0, cur_opacity_scale);
if (cur_angle == 0) {
pnotify.hide();
callback();
}
}, 20);
}}
});">Two Functions</button>
</div>
<div class="btn-toolbar well">
<h4>Consuming the Alert Function</h4>
This isn't really a feature of Pines Notify, but it's cool.
<ol>
<li style="margin-bottom: 1em;"><button class="btn source" onclick="alert('I\'m a standard alert, called with alert().')">Display a JavaScript Alert</button></li>
<li style="margin-bottom: 1em;"><button class="btn source" onclick="consume_alert();">Consume alert()</button></li>
<li style="margin-bottom: 1em;">Repeat step 1.</li>
<li style="margin-bottom: 1em;"><button class="btn source" onclick="release_alert();">Release alert()</button></li>
</ol>
</div>
</div>
<div id="theming">
<div class="page-header">
<h2>Theming</h2>
</div>
<p>
The Pines Notify plugin can use either
<a href="http://jqueryui.com/" target="_blank">jQuery UI</a>
or <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter
Bootstrap</a> to style its look and feel, including colors
and background textures. We recommend using the
<a href="http://jqueryui.com/themeroller/" target="_blank">ThemeRoller tool</a>
or <a href="http://bootswatchr.com/" target="_blank">Bootswatchr</a>
to create and download custom themes that are easy to build
and maintain.
</p>
<p>
If a deeper level of customization is needed, there are
widget-specific classes referenced within the
jquery.pnotify.default.css stylesheet that can be modified.
These classes are highlighted in bold below.
</p>
<h3>Sample markup with jQuery UI CSS Framework classes</h3>
<div>
<div style="margin: 0; clear: both; padding-left: 10px;">
&lt;div class="<strong>ui-pnotify</strong> ui-widget ui-helper-clearfix" style="width: 300px; opacity: 1; display: block; right: 15px; top: 15px;"&gt;
<div style="margin: 0; clear: both; padding-left: 10px;">
&lt;div class="<strong>ui-pnotify-container ui-pnotify-shadow</strong> ui-corner-all ui-state-highlight" style="min-height: 16px;"&gt;
<div style="margin: 0; clear: both; padding-left: 10px;">
&lt;div class="<strong>ui-pnotify-closer</strong>" style="cursor: pointer; visibility: hidden;"&gt;
<div style="margin: 0; clear: both; padding-left: 10px;">
&lt;span class="ui-icon ui-icon-circle-close"&gt;&lt;/span&gt;
</div>
&lt;/div&gt;<br />
&lt;div class="<strong>ui-pnotify-icon</strong>"&gt;
<div style="margin: 0; clear: both; padding-left: 10px;">
&lt;span class="ui-icon ui-icon-info"&gt;&lt;/span&gt;
</div>
&lt;/div&gt;<br />
&lt;h4 class="<strong>ui-pnotify-title</strong>"&gt;Pines Notify&lt;/h4&gt;<br />
&lt;div class="<strong>ui-pnotify-text</strong>"&gt;Welcome to Pines Notify.&lt;/div&gt;
</div>
&lt;/div&gt;
</div>
&lt;/div&gt;
</div>
<div class="alert alert-info">
Note: This is a sample of markup generated by Pines Notify, not markup you should use to create a notice. You don't need markup for that.
</div>
</div>
</div>
<div id="comments">
<div class="page-header">
<h2>Comments</h2>
</div>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'pnotify'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div>
<p id="copyright">&copy; 2011-2012 SciActive.com. All Rights Reserved.</p>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.