Meowsa
Growl Like Web Notifications

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.


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
});

Dependencies

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.


Colors

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.'
        });
    });
});

The Basics

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
        });
    });
});

No Timeouts

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);
    });
});

Action: String/Url

Open Notification

$(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'
        });
    });
});

Action: Callback Function

Open Notification

$(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);
                    }
                });
            }
        });
    });
});

Action: Confirmation

Are you sure?

$(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
            });
        }
    });
});

Action: Ajax Call

Load Data Clear Data

$(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.'
        });
    });
});

Action: Post

<!-- 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'
        });
    ";
}

2016 by Jennifer Perrin (aka Luminary on Code Canyon) · Meowsa License