Skip to content

Instantly share code, notes, and snippets.

@jalalhejazi

jalalhejazi/index.html

Created April 1, 2013 19:40
Show Gist options
  • Save jalalhejazi/5287170 to your computer and use it in GitHub Desktop.
Save jalalhejazi/5287170 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript: msgNotify.[info][warning][success][error][bookmark]
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>msgNotify examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="msgNotify.css" rel="stylesheet" type="text/css" />
<style>
.row {
margin-left: 0;
}
</style>
</head>
<body style="padding: 30px" class="container">
<section class="row">
<h1>msgNotify</h1>
<a href="https://github.com/Jalalhejazi/msgNotify">//github.com/Jalalhejazi/msgNotify</a>
<div class="well row">
<div class="row span11">
<div class="span4">
<div class="control-group">
<div class="controls">
<label class="control-label" for="title">Title</label>
<input id="title" type="text" class="input-large" placeholder="Enter a title ..."/>
<label class="control-label" for="message">Message</label>
<textarea class="input-large" id="message" rows="3" placeholder="Enter a message ..."></textarea>
</div>
</div>
</div>
<div class="span2">
<div class="control-group" id="msgNotifyTypeGroup">
<div class="controls">
<label >msgNotify Type</label>
<label class="radio">
<input type="radio" name="msgNotifys" value="success" checked/>Success
</label>
<label class="radio">
<input type="radio" name="msgNotifys" value="info"/>
Info
</label>
<label class="radio">
<input type="radio" name="msgNotifys" value="warning"/>
Warning
</label>
<label class="radio">
<input type="radio" name="msgNotifys" value="error"/>
Error
</label>
<label class="radio">
<input type="radio" name="msgNotifys" value="bookmark"/>
bookmark
</label>
</div>
</div>
<div class="control-group" id="positionGroup">
<div class="controls">
<label>Position</label>
<label class="radio"><input type="radio" name="positions" value="msgNotify-top-right" />Top Right</label>
<label class="radio"><input type="radio" name="positions" value="msgNotify-bottom-right"/>Bottom Right</label>
<label class="radio"><input type="radio" name="positions" value="msgNotify-bottom-left"/>Bottom Left</label>
<label class="radio"><input type="radio" name="positions" value="msgNotify-top-left"/>Top Left</label>
<label class="radio"><input type="radio" name="positions" value="msgNotify-top-full-width"/>Top Full Width</label>
<label class="radio"><input type="radio" name="positions" value="msgNotify-bottom-full-width" checked/>Bottom Full Width</label>
</div>
</div>
</div>
<div class="span2" >
<div class="control-group">
<div class="controls">
<label class="control-label" for="">Fade in</label>
<input id="fadeIn" type="text" placeholder="ms" class="input-mini" value="300"/>
<label class="control-label" for="fadeOut">Fade out</label>
<input id="fadeOut" type="text" placeholder="ms" class="input-mini" value="1000"/>
<label class="control-label" for="timeOut">Time out</label>
<input id="timeOut" type="text" placeholder="ms" class="input-mini" value="5000"/>
<label class="control-label" for="timeOut">Extended time out</label>
<input id="extendedTimeOut" type="text" placeholder="ms" class="input-mini" value="1000"/>
</div>
</div>
</div>
<div class="span2">
<div class="control-group">
<div class="controls">
<label class="checkbox" for="debugInfo">
<input id="debugInfo" type="checkbox" value="checked" class="input-mini"/>Debug
</label>
</div>
<div class="controls">
<label class="checkbox" for="addBehaviorOnmsgNotifyClick">
<input id="addBehaviorOnmsgNotifyClick" type="checkbox" value="checked" class="input-mini"/>Add behavior on msgNotify click
</label>
</div>
</div>
</div>
</div>
<div class="row span11">
<button type="button" class="btn btn-primary" id="showmsgNotify">Show msgNotify</button>
<button type="button" class="btn btn-danger" id="clearmsgNotifys">Clear msgNotifys</button>
<button type="button" class="btn btn-danger" id="clearlastmsgNotify">Clear Last msgNotify</button>
</div>
</div>
</section>
<footer class="row">
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="msgNotify.js"></script>
<script type="text/javascript">
$(function () {
var
i = -1,
msgNotifyCount = 0,
$msgNotifylast,
getMessage = function() {
var msgs = ['Please Develop HTML5 WebApps rather than native mobile apps',
'<div><input class="input-small" value="textbox"/>&nbsp;<a href="http://SuperMobile.dk" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Dynamic behavior</button></div>',
'HTML5 is the future of next generation WebApps !',
'Welcome back to the web :-)',
'DO not under estimate the power of CSS.3',
'Everything you see is FREE !'
];
i++;
if (i === msgs.length) {
i = 0;
}
return msgs[i];
};
$('#showmsgNotify').click(function() {
var shortCutFunction = $("#msgNotifyTypeGroup input:radio:checked").val(),
msg = $('#message').val(),
title = $('#title').val() || '',
$fadeIn = $('#fadeIn'),
$fadeOut = $('#fadeOut'),
$timeOut = $('#timeOut'),
$extendedTimeOut = $('#extendedTimeOut'),
msgNotifyIndex = msgNotifyCount++;
msgNotify.options = {
debug: ($('#debugInfo').attr('checked') === 'checked'),
positionClass: $('#positionGroup input:radio:checked').val() || 'msgNotify-top-right',
onclick: null
};
if (($('#addBehaviorOnmsgNotifyClick').attr('checked') === 'checked')) {
msgNotify.options.onclick = function () {
alert('You can perform some custom action after a msgNotify goes away');
};
}
if ($fadeIn.val().length) {
msgNotify.options.fadeIn = + $fadeIn.val();
}
if ($fadeOut.val().length) {
msgNotify.options.fadeOut = + $fadeOut.val();
}
if ($timeOut.val().length) {
msgNotify.options.timeOut = + $timeOut.val();
}
if ($extendedTimeOut.val().length) {
msgNotify.options.extendedTimeOut = + $extendedTimeOut.val();
}
if (!msg) {
msg = getMessage();
}
var $msgNotify = msgNotify[shortCutFunction](msg, title);
// Wire up an event handler to a button in the msgNotify, if it exists
$msgNotifylast = $msgNotify;
if ($msgNotify.find('#okBtn').length) {
$msgNotify.delegate('#okBtn', 'click', function () {
alert('you clicked me. I was msgNotify #' + msgNotifyIndex + '. goodbye!');
$msgNotify.remove();
});
}
if ($msgNotify.find('#surpriseBtn').length) {
$msgNotify.delegate('#surpriseBtn', 'click', function () {
alert('Surprise! you clicked me. I was msgNotify #' + msgNotifyIndex + '. You could perform an action here.');
});
}
$('#clearlastmsgNotify').click(function() {
msgNotify.clear($msgNotifylast);
});
});
$('#clearmsgNotifys').click(function () {
msgNotify.clear();
});
})
</script>
<script type="text/javascript">
// to use the library, just call the global msgNotify:
msgNotify.success(' https://github.com/Jalalhejazi/msgNotify ', 'download sourceCode');
var Add_to_homescreen_msg = '<p>Bookmark your WebApp and restart from home screen </p> <img src="images/touch-icon-iphone.png" />' ;
msgNotify.bookmark(Add_to_homescreen_msg);
</script>
</body>
</html>
Raw
msgNotify.css
/*
GitHub: https://raw.github.com/Jalalhejazi/msgNotify/master/msgNotify.css
Use the Twitter Bootstrap
Responsive Design
*/
.msgNotify-title {
font-weight: bold;
}
.msgNotify-message {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.msgNotify-message a,
.msgNotify-message label {
color: #FFF;
}
.msgNotify-message a:hover {
color: #CCC;
text-decoration: none;
}
.msgNotify-top-full-width {
top: 0;
right: 0;
width: 100%;
}
.msgNotify-bottom-full-width {
bottom: 0;
right: 0;
width: 100%;
}
.msgNotify-top-left {
top: 12px;
left: 12px;
}
.msgNotify-top-right {
top: 12px;
right: 12px;
}
.msgNotify-bottom-right {
right: 12px;
bottom: 12px;
}
.msgNotify-bottom-left {
bottom: 12px;
left: 12px;
}
#msgNotify-container {
position: fixed;
z-index: 999999;
}
#msgNotify-container > div {
margin: 0 0 6px;
padding: 15px 15px 15px 50px;
width: 300px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
-moz-box-shadow: 0 0 12px #999999;
-webkit-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.msgNotify {
background-color: #030303;
}
.msgNotify-success {
background-color: #51A351;
}
.msgNotify-error {
background-color: #BD362F;
}
.msgNotify-info {
background-color: #2F96B4;
}
.msgNotify-warning {
background-color: #F89406;
}
#msgNotify-container > :hover {
-moz-box-shadow: 0 0 12px #000000;
-webkit-box-shadow: 0 0 12px #000000;
box-shadow: 0 0 12px #000000;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
cursor: pointer;
}
#msgNotify-container > .msgNotify-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#msgNotify-container > .msgNotify-error {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#msgNotify-container > .msgNotify-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#msgNotify-container > .msgNotify-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
#msgNotify-container > .msgNotify-bookmark {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
/*Responsive Design*/
@media all and (max-width: 240px) {
#msgNotify-container > div {
padding: 8px 8px 8px 50px;
width: 108px;
}
}
@media all and (min-width: 241px) and (max-width: 320px) {
#msgNotify-container > div {
padding: 8px 8px 8px 50px;
width: 128px;
}
}
@media all and (min-width: 321px) and (max-width: 480px) {
#msgNotify-container > div {
padding: 8px 8px 8px 50px;
width: 192px;
}
}
@media all and (min-width: 481px) and (max-width: 768px) {
#msgNotify-container > div {
padding: 15px 15px 15px 50px;
width: 300px;
}
}
/* overrides */
#msgNotify-container.msgNotify-top-full-width > div,
#msgNotify-container.msgNotify-bottom-full-width > div {
width: 100%;
margin: 1px 0 1px 0;
}
Raw
msgNotify.js
/*
GitHub: https://raw.github.com/Jalalhejazi/msgNotify/master/msgNotify.js
jQuery plugin: msgNotify.js
Usage:
msgNotify.info ('Display info message with no title' );
msgNotify.warning ('Display warning message with no title');
msgNotify.success ('Display success message' , 'with a title')
msgNotify.error ('Display error message', 'with a title');
msgNotify.bookmark('Bookmark your WebApp and restart from home screen');
msgNotify.bookmark();
msgNotify.clear() ;
*/
; (function (define) {
define(['jquery'], function ($) {
return (function () {
var $container,
defaults = {
tapToDismiss: true,
msgNotifyClass: 'msgNotify',
containerId: 'msgNotify-container',
debug: false,
fadeIn: 300,
fadeOut: 1000,
extendedTimeOut: 1000,
iconClasses: {
error: 'msgNotify-error',
info: 'msgNotify-info',
success: 'msgNotify-success',
warning: 'msgNotify-warning',
bookmark: 'msgNotify-bookmark'
},
iconClass: 'msgNotify-info',
positionClass: 'msgNotify-top-right',
timeOut: 5000, // Set timeOut to 0 to make it sticky
titleClass: 'msgNotify-title',
messageClass: 'msgNotify-message',
target: 'body'
},
error = function (message, title, optionsOverride) {
return notify({
iconClass: getOptions().iconClasses.error,
message: message,
optionsOverride: optionsOverride,
title: title
});
},
info = function (message, title, optionsOverride) {
return notify({
iconClass: getOptions().iconClasses.info,
message: message,
optionsOverride: optionsOverride,
title: title
});
},
notify = function (map) {
var
options = getOptions(),
iconClass = map.iconClass || options.iconClass;
if (typeof (map.optionsOverride) !== 'undefined') {
options = $.extend(options, map.optionsOverride);
iconClass = map.optionsOverride.iconClass || iconClass;
}
var
intervalId = null,
$container = getContainer(options),
$msgNotifyElement = $('<div/>'),
$titleElement = $('<div/>'),
$messageElement = $('<div/>'),
response = { options: options, map: map };
if (map.iconClass) {
$msgNotifyElement.addClass(options.msgNotifyClass).addClass(iconClass);
}
if (map.title) {
$titleElement.append(map.title).addClass(options.titleClass);
$msgNotifyElement.append($titleElement);
}
if (map.message) {
$messageElement.append(map.message).addClass(options.messageClass);
$msgNotifyElement.append($messageElement);
}
$msgNotifyElement.hide();
$container.prepend($msgNotifyElement);
$msgNotifyElement.fadeIn(options.fadeIn);
if (options.timeOut > 0) {
intervalId = setTimeout(fadeAway, options.timeOut);
}
$msgNotifyElement.hover(stickAround, delayedFadeAway);
if (!options.onclick && options.tapToDismiss) {
$msgNotifyElement.click(fadeAway);
}
if (options.onclick) {
$msgNotifyElement.click(function () {
options.onclick() && fadeAway();
});
}
if (options.debug && console) {
console.log(response);
}
return $msgNotifyElement;
function fadeAway() {
if ($(':focus', $msgNotifyElement).length > 0) {
return;
}
return $msgNotifyElement.fadeOut(options.fadeOut, function () {
removemsgNotify($msgNotifyElement);
});
}
function delayedFadeAway() {
if (options.timeOut > 0 || options.extendedTimeOut > 0) {
intervalId = setTimeout(fadeAway, options.extendedTimeOut);
}
}
function stickAround() {
clearTimeout(intervalId);
$msgNotifyElement.stop(true, true).fadeIn(options.fadeIn);
}
},
success = function (message, title, optionsOverride) {
return notify({
iconClass: getOptions().iconClasses.success,
message: message,
optionsOverride: optionsOverride,
title: title
});
},
warning = function (message, title, optionsOverride) {
return notify({
iconClass: getOptions().iconClasses.warning,
message: message,
optionsOverride: optionsOverride,
title: title
});
},
bookmark = function (message, title, optionsOverride) {
return notify({
iconClass: getOptions().iconClasses.info,
message: (message ? message : "Bookmark your WebApp and restart from home screen") ,
optionsOverride: optionsOverride,
title: (title ? title : "Add to home screen")
});
},
clear = function ($msgNotifyElement) {
var options = getOptions();
if (!$container)
{
getContainer(options)
}
if ($msgNotifyElement && $(':focus', $msgNotifyElement).length === 0) {
$msgNotifyElement.fadeOut(options.fadeOut, function () {
removemsgNotify($msgNotifyElement);
});
return;
}
if ($container.children().length) {
$container.fadeOut(options.fadeOut, function () {
$container.remove();
});
}
};
var msgNotify = {
getContainer: getContainer,
clear: clear,
info: info,
options: {},
error: error,
success: success,
warning: warning,
bookmark: bookmark,
version: '1.2.3'
};
return msgNotify;
//#region Internal Methods
function getContainer(options) {
if (!options) { options = getOptions(); }
container = $('#' + options.containerId);
if (container.children().length) {
return container;
}
container = $('<div/>')
.attr('id', options.containerId)
.addClass(options.positionClass);
container.appendTo($(options.target));
$container = container;
return container;
}
function getOptions() {
return $.extend({}, defaults, msgNotify.options);
}
function removemsgNotify($msgNotifyElement) {
if (!$container) { $container = getContainer(); }
if ($msgNotifyElement.is(':visible')) {
return;
}
$msgNotifyElement.remove();
$msgNotifyElement = null;
if ($container.children().length === 0) {
$container.remove();
}
}
//#endregion
})();
});
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
if (typeof module !== 'undefined' && module.exports) { //Node
module.exports = factory(require(deps[0]));
} else {
window['msgNotify'] = factory(window['jQuery']);
}
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment