jNotify can display information boxes in just one line of code.
Three kind of boxes are allowed : information, success and failure.
The whole box is entirely skinnable with css. For example, you could use it for a mail being successfully sent or a validation error of a form.
Download: https://github.com/Delzon/jNotify
Demonstration:
Plugin homepage:
Implementation:
1. First, include the css & jquery files
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jNotify.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jNotify.jquery.js"></script>2. Now, call one of the jNotify methods
<script type="text/javascript">
$(document).ready(function(){
// simple Notify box call
jNotify();
// simple Error box call
jError();
// simple Success box call
jSuccess();
// more complex Notify box call
jNotify(
'Here the message !!<br />You can write HTML code, <strong>bold</strong>,...',
{
autoHide : true, // added in v2.0
TimeShown : 3000,
HorizontalPosition : 'center',
onCompleted : function(){ // added in v2.0
alert('jNofity is completed !');
}
}
); // close jNotify
}); // close document.ready
</script>Options:
| autoHide | Boolean | Default : true – jNotify closed after TimeShown ms or by clicking on it |
| clickOverlay | Boolean | Default : false – If false, disables closing jNotify by clicking on the background overlay. |
| MinWidth | Integer | Default : 200 – In pixel, the min-width css property of the boxes. |
| TimeShown | Integer | Default : 1500 – In ms, time of the boxes appearances. |
| ShowTimeEffect | Integer | Default : 200 – In ms, duration of the Show effect |
| HideTimeEffect | Integer | Default : 200 – In ms, duration of the Hide effect |
| LongTrip | Integer | Default : 15 – Length of the move effect (‘top’ and ‘bottom’ verticals positions only) |
| HorizontalPosition | String | Default : right – Horizontal position. Can be set to ‘left’, ‘center’, ‘right’ |
| VerticalPosition | String | Default : top – Vertical position. Can be set to ‘top’, ‘center’, ‘bottom’. |
| ShowOverlay | Boolean | Default : true – If true, a background overlay appears behind the jNotify boxes |
| ColorOverlay | String | Default : #000 – Color of the overlay background (only Hex. color code) |
| OpacityOverlay | Integer | Default : 0.3 – Opacity CSS property of the overlay background. From 0 to 1 max. |
Methods:
| onCompleted | Function | Returns : null – Callback that fires right after jNotify content is displayed. |
| onClosed | Function | Returns : null – Callback that fires once jNotify is closed |
Screenshots:
