Meowsa

Parameters

---

• color: Sets the background color of the notification. You can modify the colors by editing the css code.
  Defaults to "default".
• title: Sets the main title <h3> in the notification.
  Supports HTML code.
  No default set.
• text: Sets the message text in the notification.
  Supports HTML code.
  No default set.
• icon: Sets the icon (like Fontawesome) or image to display in the notification.
  Supports HTML code.
  No default set.
• timeout: Sets the display time of the notification before it fades out.
  Options: null or time in milliseconds.
  Defaults to 5000 (5 seconds).
• action: Call back function if the notification is clicked. This works hand in hand with the dismissable parameter.
  Default is null.
• button: Adds additional html code to the notification. Used mostly in confirmation type notifications.
  Supports HTML code.
  Default is null.
• dismissable: Sets whether the notification is sticky, or will fade out after a set time. Sticky notifications require user interaction. See timeout & action parameters.
  Options: true/false.
  Default is true.

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

---

• jQuery: Meowsa is coded and tested with jQuery v 1.11.3.
• Fontawesome: Meowsa is coded and tested with Fontawesome v 4.6.3
  Fontawesome does not need to be included if you do not want to use it for icons. It does, however, power the close "" in the upper right corner of each notification.

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.

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

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

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

---