Really simple jQuery alerts

Over the last few month’s I have been using jQuery more and more in my web projects to do everything from style forms to adding interactivty to lists via drag and drop. In this post I will share with you my simple jQuery alert plugin.

About

Simple jQuery alert that is just that – really simple

Use it to give feedback to your users when they have updated a page for example.

Features

There are three types of alert:

1. Success
2. Error
3. Information

 
The alert can fade away after a specified amount of time

The alert can be clicked to fade away

Usage

Include the CSS and plugin files in your header

<link href="css/alerts.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/alerts.js"></script>

To call simply add this function call:

$('.msg').simpleAlerter();

You can pass in a parameter which is the number of seconds (in millisecons) for which to display the alert. If you leave it blank the alert will stay on screen until clicked

$('.msg').simpleAlerter(5000);

And then apply the class of “msg” and either success, error or information to your html element. For example:

<p class="success msg">This is a success alert on a paragraph</p>
<div class="error msg">This is an error alert on a div</div>
<ul>
<li class="information msg">This is an information alert on a list item</li>
</ul>

Demo

Click here to view a demo page and to read more about how to use it.

Click here to download the files