Published: 3 years ago

jQuery CSS3 Notifications

Great looking CSS3 notifications in a lightweight script with an easy to use api. Perfect for your next web app

Usage

//Initialize the simple notifications plugin:

      //Use default options:
      var notifications = $('body').ttwSimpleNotifications();

      //Use custom options:
      var notifications = $('body').ttwSimpleNotifications({
            position:'bottom right',
            autoHide:true,
            autoHideDelay:3000,
            clickCallback:function(){
               //some callback function
            },
            showCallback:null,
            hideCallback:null
        });
//Call desired plugin methods:

       //A simple notification with no options:
       notifications.show('codebasehero.com rocks my socks off');

       //A notification with html and an icon:
       notifications.show({msg:'Make sure to bookmark Codebase Hero and check back often', icon:'images/icon.png'});

       //A notification that overrides the default options:
       notifications.show({msg:'Don\'t forget to check out my Premium Files', icon:'images/icon.png', autoHide:false});

       //Closing a notification programatically::
       var thisNotif = notifications.show('Yeah, I know I'm awesome :)');
       thisNotif.hide();

       //Get a handle to the active notifications array:
       var actives = notifications.notifications;
2 Comments.
  1. Alisson says:

    I have a sequence of notifications and want to hide one as I could do that, you can put an id for each notification

  2. Tom Ashley says:

    Wow three years ago and still looks to be a great solution. I’m going to use it for the registration page on http://www.Torrentflix.com (A new site that lets users watch movies online).

Have a Comment?

Some HTML is OK