Tag Archives: Notification

Sticky.js Notification

DEMO DOWNLOAD How to Use?

Sticky. A super simple notification system for jQuery

Let’s face it, your users need sweet little notifications to keep them all warm and fuzzy inside. Sticky allows you to send such messages with ease, and class. Quickly notify a user of software updates, process completions, or annoy them with registration reminders.

HTML

NONE

CSS

<link rel="stylesheet" href="sticky.css" type="text/css" />

JS

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="sticky.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.sticky('<b>You have a new message!</b>');
// or
$('#download_status').sticky();
});
</script>

jui_alert Notification

DEMO DOWNLOAD How to Use?

jui_alert is a jQuery plugin, provides simple notification (with timeout and close button). jQuery UI themes compatible. Localization support.

HTML


<div id="user_message1"></div>
<div id="user_message2"></div>
<div id="user_message3"></div>

CSS

<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.css"/>
<!-- custom classes -->
.container1 {
width: 40%;
margin: 20px;
}
.container2 {
width: 50%;
margin: 20px;
}
.container3 {
width: 60%;
margin: 20px;
}
.message2 {
font-size: 13px;
font-family: Arial, sans-serif;
letter-spacing: 1px;
}

JS

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.min.js"></script>
<script type="text/javascript">
$(function() {
$("#user_message1").jui_alert({
containerClass: "container1 ui-widget",
message: "<img src="images/megaphone.png" style="float: left; width: 30px; margin-right: 10px;">This is a sample message. It will disappear after 6 sec (except you press the pin button)",
timeout: 6000,
messageIconClass: ""
});
$("#user_message2").jui_alert({
containerClass: "container2 ui-widget",
message: "This is a sample message. It will not disappear automatically. More information <a href="http://www.google.com" target="_blank">here</a>.",
messageBodyClass: "message2",
timeout: 0,
use_effect: {effect_name: "slide", effect_options: {"direction": "left"}, effect_duration: "500"}
});
$("#user_message3").jui_alert({
containerClass: "container3 ui-widget",
message: "This is a <strong>sample error message</strong>. It will disappear after 3 sec (except you press the pin button)",
timeout: 3000,
messageAreaClass: "jui_alert_message_area ui-state-error ui-corner-all",
messageIconClass: "jui_alert_icon ui-icon ui-icon-alert"
});
});
</script>

PNotify JavaScript notifications

DEMO DOWNLOAD How to Use?

PNotify provides desktop notifications based on the Web Notifications spec. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.

HTML

NONE

CSS

<link href="pnotify.custom.min.css" media="all" rel="stylesheet" type="text/css" />

JS

<script type="text/javascript" src="pnotify.custom.min.js"></script>
<script type="text/javascript">
$(function(){
new PNotify({
title: 'Regular Notice',
text: 'Check me out! I\'m a notice.'
});
});
</script>

Oh Snap Notification Jquery Popup

DEMO DOWNLOAD How to Use?

A simple notification jQuery/Zepto library designed to be used in mobile apps

HTML


<div id="ohsnap"></div>

CSS


#ohsnap {
position: fixed;
bottom: 5px;
right: 5px;
margin-left: 5px;
z-index: 99;
}


.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid #eed3d7;
border-radius: 4px;

right: 21px;
/* Each alert has its own width */
float: right;
clear: right;
background-color: white;
width: 250px;
}

.alert-red {
color: white;
background-color: #DA4453;
}
.alert-green {
color: white;
background-color: #37BC9B;
}
.alert-blue {
color: white;
background-color: #4A89DC;
}
.alert-yellow {
color: white;
background-color: #F6BB42;
}
.alert-orange {
color:white;
background-color: #E9573F;
}

JS


<script type="text/javascript" src="js/ohsnap.min.js">
<script type="text/javascript">
ohSnap('We are closed right now. Come back tomorrow.', {'color':'red'}, 4000);
</script>

<script type="text/javascript">
$(doucment).redy(function(){
$('#default').on('click', function() { ohSnap('A notification with default options')});
$('#red').on('click', function() { ohSnap('Oh Snap! You can\'t access this page!',

{'color':'red'})});
$('#green').on('click', function() { ohSnap('Ahh Yeah! Your account was created.',

{'color':'green'})});
$('#blue').on('click', function() { ohSnap('We are closed right now. Come back

tomorrow.', {'color':'blue'})});
$('#yellow').on('click', function() { ohSnap('A yellow alert for your... yellow

needs...', {color:'yellow'})});
$('#orange').on('click', function() { ohSnap('A fast one', {'color': 'orange',

'duration':'100'})});
})
</script>