jNotify : Disply animated boxes (informations, errors, success) in just one line of code

Tags :

Plugin submitted by alpixel

Plugin rate :

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 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 taht fires once jNotify is closed

Screenshots

An information box. jNotify();
An error box. jError();
A success box. jSuccess();

Comments

kirikou October 17, 2012

Thanks for this great plugin !
Easy to implement.

I have a question regarding the ShowTimeEffect : it seems that it doesn't have any effect for me. Is there something to do to enable it ?

Thanks

Maiki October 17, 2012

Hi Kirikou,

Thanks for your message :)

The option 'ShowTimeEffect' is the time during the notify box appears.. It don't work your you ? If you disabled it, the box will not appear.
Try to test with a very long time (more than 5 seconds), and try with a very short time (less than 1 second) to see if it changes something.

Regards,
Maiki

zirano November 14, 2012

hi i set autoHide : false for error box so that the user can still see what is missing in the entry. but if the user didn't click on the error message box it won't disappear and how to clear that. thanks.

Maiki November 14, 2012

Hi,

If you want the user have the time to read what is missing, you can set the option 'TimeShown' to 4 or 5 seconds, 'clickOverlay' to 'true' and 'autoHide' to 'false'.

Regards,

zirano November 15, 2012

Hi Maiki,

I mod a little bit of ur code by adding class="msgbox" and remove the msgbox div at the start of every calls. so it make sure showing only one notification at a time. at least it fits to my requirement.

_construct:function(id, msg) {
                        $Div = 
                        $('<div id="'+id+'" class="msgbox"/>')
                        .css({ opacity: opts.ShowOverlay ? 0 : opts.OpacityOverlay, minWidth: opts.MinWidth })
                        .html(msg)
                        .appendTo('body');
                        return $Div;
                },
 
 
jError = function (msg, options) {
            $(".msgbox").each(function () {
                $(this).remove();
            });
                if($.jNotify._isReadable('jError'))
                        $.jNotify.init(msg,options,'jError');
        };

yiqing-95 December 5, 2012

better to support customize icon and color . we can call it something like this :
jNotify('my message',{color:#ffddcc,icon:eye});

but i don't know how to implements it . i think it 's easy for you guys to implement such functionality .

Nate Dunham January 16, 2013

JNotify sure preserves balance in all things.

no deposit forex bonus

Marcus January 30, 2013

I've tried to add a function to manually close any notifications that are open. Even though adding this, it does not work. Any tips?

(added to the bottom, right under jNotify)
jClose = function() {
if($.jNotify._isReadable('jClose'))
$.jNotify._close();
};

brady April 24, 2013

Awsome plugin, very nice job.

Thanks you very much.

Easy to place, easy to skin, just what i was looking for.

LU biao April 26, 2013

jLoading = function(msg,options) {
if($.jNotify._isReadable('jLoading'))
$.jNotify.init(msg,options,'jLoading');
};
I think a loading box is valuable for you plugin!
/****************/
/** jLoading CSS **/
/****************/
#jLoading {
position:absolute;
background:#d8e6fc url('loading.gif') no-repeat 15px center;
color:#8a1f11;
border:1px solid #a7c3f0;
padding:10px;
padding-left:50px;
margin:50px;
z-index:9999;
-moz-border-radius : 5px;
border-radius:5px;
-webkit-border-radius:5px;
}
#jLoading a {color:#8a1f11 !important;text-decoration:none;}

Madeline May 18, 2013

Pretty! This was an extremely wonderful post. Thank you for providing these details.

jNotify : Disply animated boxes (informations, errors, success) in just one line of code

Tags :

Plugin rate :

1. First, include the css & jquery files

2. Now, call one of the jNotify methods

Comments

Add new comment

Plain text

Informations

jNotify : Disply animated boxes (informations, errors, success) in just one line of code

Tags :

Plugin rate :

1. First, include the css & jquery files

2. Now, call one of the jNotify methods

Comments

Add new comment

Plain text

Informations

Plugins Categories