Meowsa is a small library which provides an easy to use, high performance growl-like browser notifications. Lightweight and straightforward, no matter the type of project, if jQuery is available Meowsa can be included.
<h3> in the notification.
dismissable parameter.
timeout & action parameters.
Meowsa.addNotification({
color: 'primary',
title: 'Parameter Example',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
icon: '<i class="fa fa-check-circle"></i>',
timeout: null,
action: function(id) { console.log('Meowsa notification '+id+' was clicked!'); },
button: '<span class="btn btn-warning btn-meowsa btn-close-notification">Cancel</span>',
dismissable: false
});
Please Note: Meowsa is coded and designed to work with Twitter's Bootstrap. If you do not use Bootstrap, Meowsa will still function, but some of the button classes may not be defined.
Default Primary Info Success Warning Danger Inverse
$(document).ready(function() {
$('#default').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'default',
title: 'Default',
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
action: function(id) {
// do relevant action in web app
console.log('Meowsa notification '+id+' was clicked!');
}
});
});
$('#primary').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'primary',
title: 'Primary',
text: 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.!'
});
});
$('#info').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'info',
title: 'Info',
text: 'Contrary to popular belief, Lorem Ipsum is not simply random text.'
});
});
$('#success').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'success',
title: 'Success',
text: 'It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.'
});
});
$('#warning').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'warning',
title: 'Warning',
text: 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.'
});
});
$('#danger').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'danger',
title: 'Danger',
text: 'The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English.'
});
});
$('#inverse').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'inverse',
title: 'Inverse',
text: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.'
});
});
});
Basic Demo Custom Icon Custom Timeout
$(document).ready(function() {
$('#basic-demo').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'primary',
title: 'Heads up!',
text: 'This alert needs your attention, but it\'s not super important.'
});
});
$('#icon-demo').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'inverse',
title: 'Custom Icons',
text: 'Nice! Supports HTML, Images, and Icon fonts (such as Glyphicon and FontAwesome).',
icon: '<i class="fa fa-globe"></i>'
});
});
$('#custom-timeout-demo').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'info',
title: 'Custom Timeouts',
text: 'This notification has an 8 second timeout, but you can set it to anything you want.',
icon: '<i class="fa fa-clock-o"></i>',
timeout: 8000
});
});
});
Open Notification Close Notification
$(document).ready(function() {
var noTimeoutNotification = null;
$('#no-timeout-open').click(function(e) {
e.preventDefault();
if (Meowsa.isDismissed(noTimeoutNotification)) {
noTimeoutNotification = Meowsa.addNotification({
color: 'success',
title: 'No Timeout',
text: 'Close the notification by pressing the dismiss button on the page or the notification close.',
icon: '<i class="fa fa-ban"></i>',
timeout: null
});
}
});
$('#no-timeout-close').click(function(e) {
e.preventDefault();
Meowsa.removeNotification(noTimeoutNotification);
});
});
$(document).ready(function() {
$('#meow-callback-string').click(function(e) {
e.preventDefault();
Meowsa.addNotification({
color: 'danger',
title: 'String Callback',
text: 'Click this notification to visit a url',
icon: '<i class="fa fa-home fa-lg"></i>',
action: 'http://google.com'
});
});
});
$(document).ready(function() {
$('#meow-callback-function').click(function(e) {
e.preventDefault();
var id = Meowsa.addNotification({
color: 'warning',
title: 'Meowsa Notification #'+(Meowsa.count + 1),
text: 'Click Me!',
icon: '<i class="fa fa-dot-circle-o"></i>',
timeout: null,
action: function(id) {
Meowsa.editNotification(id, {
text: 'You clicked it, awesome! Click again, click the dismiss button, or wait 8 seconds to close it.',
icon: '<i class="fa fa-check-circle"></i>',
timeout: 8000,
action: function(id) {
Meowsa.removeNotification(id);
}
});
}
});
});
});
$(document).ready(function() {
var confirmNotification = null;
$('#confirmation').click(function(e) {
e.preventDefault();
if (Meowsa.isDismissed(confirmNotification)) {
confirmNotification = Meowsa.addNotification({
color: 'default',
title: 'Are you sure?',
text: 'Are you sure you want to do that?',
icon: '<i class="fa fa-sign-out fa-lg"></i>',
button: '<a href="index.php?action=confirmation" class="btn btn-success btn-meowsa">Yes</a> <span class="btn btn-warning btn-meowsa btn-close-notification">Cancel</span>',
timeout: null
});
}
});
});
$(document).ready(function() {
$('#ajax-call').click(function(e) {
e.preventDefault();
var checkType = 'data';
post_data = {'checkType':checkType};
$.post('ajax/data_example.php', post_data, function(resdata) {
$('#theData').html(''); // Clear any data previously loaded
if (resdata) { // Success - Data found
Meowsa.addNotification({
color: 'success',
title: 'Data Loaded',
text: 'Well done! The data has been loaded on your screen.'
});
var theData = $('#theData');
var dataDiv = '';
dataDiv += '<ul class="list-group">';
$.each($.parseJSON(resdata), function(idx, obj) { // Convert JSON string to JavaScript object
dataDiv += '<li class="list-group-item demo-item">';
dataDiv += ' <strong>'+obj.name+'</strong><br />';
dataDiv += ' <small><em>'+obj.title+'</em><br />';
dataDiv += ' Phone: '+obj.phone+'</small>';
dataDiv += '</li>';
});
dataDiv += '</ul>';
theData.append(dataDiv); // Populate the theData div with the results
} else { // Error
Meowsa.addNotification({
color: 'warning',
title: 'Data Error',
text: 'Something went wrong, No data found.'
});
}
});
});
$('#clear-data').click(function(e) {
e.preventDefault();
$('#theData').html('');
Meowsa.addNotification({
color: 'default',
title: 'Cheer!',
text: 'The data has been cleared.'
});
});
});
<!-- HTML Code: -->
<form action="" method="post">
<button type="input" name="submit" value="postone" class="btn btn-success">Submit One</button>
<button type="input" name="submit" value="posttwo" class="btn btn-info">Submit Two</button>
</form>
<!-- PHP Code: -->
// Placed at the top of the HTML file, before any html
if (isset($_GET['action']) && $_GET['action'] == 'signout') {
header( "refresh:5; url=index.php" );
}
$msgBox = '';
if (isset($_POST['submit']) && $_POST['submit'] == 'postone') {
$msgBox = meowsaBox("success", "Success", "Your Post sumbit was successful!", "fa fa-beer", "4000");
}
if (isset($_POST['submit']) && $_POST['submit'] == 'posttwo') {
$msgBox = meowsaBox("info", "Test Two", "Yup yup, Your Post sumbit was successful!", "fa fa-cog", "4500");
}
// Placed at the bootm of the HTML, before the closing <body> tag
<?php if ($msgBox) { echo '$(window).load(function(){'.$msgBox.'});'; } ?>
<!-- Javascript Code: -->
$(window).load(function(){
Meowsa.addNotification({
color: 'success',
title: 'You clicked Yes',
text: 'Awesome, This is your confirmation.',
icon: '<i class="fa fa-check fa-lg"></i>',
timeout: 4500
});
});
/*
* Function to show Meowsa Messages
*
* @param string $color The Meowsa Notification Color
* @param string $title The Meowsa Notification Title
* @param string $text The text message to display
* @param string $icon The Font Awesome Icon
* @param string $timeout The Time in milliseconds before the Meowsa Notification closes
*
* @return string The Meowsa Notification
*/
function meowsaBox($color, $title, $text, $icon, $timeout) {
return "
Meowsa.addNotification({
color: '$color',
title: '$title',
text: '$text',
icon: '<i class=\"$icon\"></i>',
timeout: '$timeout'
});
";
}
Like Meowsa?
I work hard to provide PHP scripts that are user-friendly, responsive and free of bugs.
If you find an issue with any of my free scripts, please drop me a message from my site:
Contact Me
You can also help spead the word about grindStone by sharing it.
2016 by Jennifer Perrin · Meowsa License