Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A jQuery Notifications Plugin
JavaScript
branch: v3

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
images
js
README.md
index.html
index_pt-BR.html

README.md

jQuery jNotifica Plugin

What is it?

jNotifica is a jQuery plugin that provides a beautiful and simple notifications system. It's usefull for substitute JavaScript alerts.

It works in which browsers?

jNotifica is compatible with the most of modern browsers:

  • Firefox
  • Opera
  • Google Chrome
  • Internet Explorer 7
  • Internet Explorer 8

And also Microsoft Internet Explorer 6, but...

...there is a poor support, because IE6 don't support CSS position: fixed. I had to use a "gambiarra" (something like "quick fix" in English), and this solution not provides a good "user experience". But works.

Some examples

  1. Top message:

    $.jnotifica('Hello from Brazil!',{
        margin : 10,
        width  : 400,
        effect : 'fade',
        padding: 25,
        msgCss : {
            textAlign : 'center',
            fontSize  : '138.5%',
            fontWeight: 'bold'
        }
    });
    
  2. Right/bottom message:

    $.jnotifica('Hey! You here? ;-D',{
        margin    : 10,
        position  : 'bottom',
        align     : 'right',
        background: 'purple',
        width     : 400
    });
    
  3. Big bottom message:

    var timer, color;
    $.jnotifica('BUY ME! BUY ME!',{
        position  : 'bottom',
        background: 'navy',
        onShow    : function(Main){
            timer = setInterval(function(){
                Main.find('.jnotifica_bg').css('backgroundColor',color?'red':'navy');
                color = color ? false : true;
            },200);
        },
        onClose   : function(Main){
            clearInterval(timer);
        }
    });
    
  4. Message with HTML

    $('span.example_4').jnotifica({
        position  : 'bottom',
        background: 'green',
        clickClose: false,
        timeout   : 0,
        cursor    : 'default'
    });
    
  5. Rounded corners

    $.jnotifica('Beautiful! *-*',{
        position  : 'bottom',
        width     : 300,
        msgCss    : {
            textAlign: 'center'
        },
        background: 'blue',
        opacity   : 0.5,
        margin    : 30,
        classes   : 'rounded_corners'
    });
    

Basic usage:

Show notification:

$.jnotifica(MESSAGE[, OPTIONS]); ...or: $.jN(MESSAGE[, OPTIONS]);

Close notification:

$.jnotifica.close(); ...or: $.jN.close();

Notification from element:

$(ELEMENT).jnotifica([OPTIONS]); ...or: $(ELEMENT).jN([OPTIONS]);

All options:

Please visit jnotifica.lenonmarcel.com.br.

License

Dual licensed under the MIT and GPL licenses.

Copyright 2009, 2010 Lenon Marcel

Something went wrong with that request. Please try again.