ClassyNotty
The notifications you will love!

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

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.

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.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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.

<script src="js/jquery.classynotty.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classynotty.min.css" />

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.

<a id="sample1" href="#">Click here to notty up!</a>

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

• 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

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