ClassyNotty
The notifications you will love!

Introduction

ClassyNotty is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that enables your application to display unobtrusive, beautiful and elegant notifications.

Download it

License

This jQuery plugin is distributed under the MIT license. Enjoy!

Demo

Just a simple text notification.

Title + big chunk of text notification.

Title + big chunk of text + image notification and disabled time.

This notification has 5 seconds timeout.

A notification with a callback.

Custom notification for your heart's desire.


Installation

First you need to include the jQuery library, since ClassyNotty is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyNotty javascript and the css file into your page. You can do it by adding the code below to your page.


Next, you implement the link/element that will trigger the notification. In a real application, you will trigger it by form submit, or ajax calls, etc. This is just an example.

Click here to notty up!

As the last step, you trigger the ClassyNotty() function on the element you just created. In this case, we trigger the function on the link with the id sample1.

$("#sample1").click({
    $.ClassyNotty({
        title : 'Title',
        content : 'This is a notification'
    });
});

Options

  • Parameters


  • title - the title of the notification. Can be omitted.
  • content - the content of the notification, HTML code included
  • img - if the notification will display an image, it's the image location
  • showTime - display time passed since the notification, can be true or false, default is true
  • timeout - the timeout after which the notification will fade, default is 0, which means the notification will stay on the screen until closed manually
  • Callbacks


  • click - the callback function called when the user clicks on the notification

Example

$.ClassyNotty({
    content: 'Click on me to try the callback function',
    click: function() {
        $.ClassyNotty({
            content: 'This notification was just created.',
            title: 'Callback!'
        });
    }
});
$.ClassyNotty({
    title: 'Juno (spacecraft)',
    content: 'Juno is a NASA New Frontiers mission to the planet Jupiter.',
    img: 'images/demo/thumb.jpg',
    showTime: false
});