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.