jcblw/Notify

Notify - Let them know

Notify is a jquery plugin/extension that makes webpage notification handling easy.

$.notify('Notify - Let them know');

Adding it to your site.

Add the two files plus the optional image.

<link type="text/css" media="screen" href="jquery.notify.css">
<script src="jquery.notify.js"></script>

Oh in case you dont have it add jQuery before script

Is it working?

add this line to your console

$.notify('YES it is');

if you see a bar across the top of you page congrats. Now go ahead and close it.

    $.notify.close();

Options

    $.notify('string', {options});

close

Close will add a X in the top right corner so that the user has the ability to close the notification

    {close : true}//Default is false - boolean

autoClose

autoClose will close the notification automatically with a timer

    {autoClose : 1000}//units are milliseconds - integer

occupySpace

This allows the notification to occupy its height at the top of the page

    {occupySpace : true}//default is false - boolean

btn new

This will add a btn to the right hand side of the notification

value optional

You are allowed to give the button a value to display on the Notification

callback required

Gives you the ability to run some script once the button has been clicked

    {
        btn: { // object
            buttonName : { //object
                value : 'a string of text', //optional will display buttonName if not specified - string
                calback : function(){
                    //Do stuff
                } // required - function
            }
        }
    }

All Together

    $.notify('a string', {
        close : true,
        autoClose : 1000,
        occupySpace : true,
        btn : {
            buttonName : {
                value : 'A button',
                callback : function(){
                    console.log('Callback Successful');
                }
            }
            //Also supports multiple buttons
        }
    })

Changing the style of Notify

Grey isnt always the best fit for a notifcation so we baked in some extra styles just for that reason.

####Success

Success is a green scheme

    $.notify.success('Success it Worked');

####Alert

Alert is a yellow scheme

    $.notify.alert('Something needs your attention');

####Error

Error is a red scheme

    $.notify.error('Please Fill out Required Feilds');

####and Basic

This is the basic grey theme. For backwards compatability we still support

    $.notify.basic('Check us out on Facebook');

But now it just so much easier to use

    $.notify('Check us out on Google +');

####Custom Styles

Have a situation when you need something differnt? Maybe a blue theme. No problem.

First just create your styles. Here is a good Gradient Generator. The class of the new style will be

    .notify-%new-style-name%

Once your styles are set then just call

    $.notify.custom('%new-style-name%', 'Hello World');

As you can see just replace %new-style-name% with a word describing the style. eg blue, attention, bulletin.

Lets say you want to use it multiple times with having to use the custom method. Just extend Notify.

    $.extend( $.notify, {
        blueCustom : function(txt, options){
            $.notify.custom('blueCustom', txt, options);
        }
    };
    
    //Now just do this
    
    $.notify.blueCustom('Yeeeah it custom styles work');

As long as the styles are defined right then your good.

Returning the Notify Element

Brand new feature that is still on the chopping block but could be very useful. Now when using the shorthand $.notify('Hello World'), the function will return the Notify element. This will allow you to chain on functions to manipulate the element. Lets say we would like to add an extra class on to the Notify element.

    $.notify('Extra class added').addClass('extra-class');

You can also edit the CSS of the Notify element

    $.notify('You edited my text color, badass').css('color', '#bada55');

Note: this will over write all text color on all styles. The style will only be removed if you do it manually.

    $.notify('Removed those pesky styles').attr('style', '');
    
    //or
    
    $('#notify').attr('style', '');

###Notify will bend to your needs

All styles are done in the CSS. except height. So you can edit exsisting styles to suit your needs.

jcblw / Notify