jQuery ClassyNotty

Overview

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

Free jQuery Plugins, HTML5 and CSS3 Scripts - Providing tons of Jquery Plugins,Html5 and CSS3 Scripts for web developers to preview and download. By using these resources, you can create amazing effects with fancy animations of content elements like text, images and so on.

Instructions

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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classynotty.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'
    });
});

Options

title - the title of the notification. Can be omitted.

content - the content of the notification

img - if the notification will display an image, it's the image location

showTime - will. Options: true/false

timeout - the timeout after which the notification will fade

click - the callback function

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.