Skip to content
This repository has been archived by the owner on Mar 24, 2024. It is now read-only.

Latest commit

 

History

History
122 lines (100 loc) · 3.19 KB

README.md

File metadata and controls

122 lines (100 loc) · 3.19 KB

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