Simple and Easy jQuery Notification Plugin - NotifIt

Simple and Easy jQuery Notification Plugin - NotifIt

NotifIt is a simple and fast jQuery plugin used to create various types of notification & alert windows with subtle sliding effects on the web page.

Basic Usage:

1. Load the latest version of jQuery javascript library from google CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Load the jQuery notifIt plugin's stylesheet and script files on the page.

<script type="text/javascript" src="js/notifIt.js"></script>
<link rel="stylesheet" type="text/css" href="css/notifIt.css">

3. Optionally you can create a button to toggle a notification & alert window.

<button onclick="not()">Click me</button>

4. The javascirpt.

<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
</script>

5. Available options.

function not(){
notif({
// success, error, warning, info
type: "info",
// Default size
width = 400,
height = 60,
// Default position
position = "right", // left, center, right, bottom
// Default autohide
autohide = true,
// Default msg
msg = "",
// Default opacity (Only Chrome, Firefox and Safari)
opacity = 1,
multiline: 0,
fade: 0,
bgcolor: "",
color: "",
timeout: 5000,
// The z-index of the notification
zindex: null,
// The offset in pixels from the edge of the screen
offset: 0,
// Callback
callback: null,
clickable: false,
clickable: false,
animation: 'slide'
});
}

6. Default options for notif_confirm() method.

var myCallback = function(choice){
    if(choice){
        notif({
            'type': 'success',
            'msg': 'Yeah!',
            'position': 'center'
        })
    }else{
        notif({
            'type': 'error',
            'msg': ':(',
            'position': 'center'
        })
    }
}
notif_confirm({
    'textaccept': 'Let\'s go!',
    'textcancel': 'I\'ll think about it',
    'message': 'Shall we?',
    'callback': myCallback,
    'fulllscreen': false
})

7. Default options for notif_prompt() method.

notif_prompt{
  'message': 'Tell me something',
  'default_value': '',
  'textaccept': 'Accept',
  'textcancel': 'Cancel',
  'fullscreen': false,
  'callback': null
})

Changelog:

2018-10-08

  • Fixed inner `p` custom color

2016-11-28

  • Notifit Prompt & bugfixes

2016-08-29

  • Fixed jQuery conflict in notif_dismiss

2016-07-29

  • [Fix] notif_confirm()

2016-04-12

  • Fixed timeouts, new option 'fullscreen' to notif_confirm

2015-11-25

  • Added missing style for close button when `clickable: true`

2015-11-18

  • Fixed `clearTimeout` on `destroy`

2015-11-17

2015-09-09

  • JS update.

2015-09-01

2015-06-25

  • Changed 'clearInterval' to 'clearTimeout'

2015-06-17

  • Refactored

2015-05-12

  • Corrected classes namespace

2015-03-13

  • add AMD support

2015-03-10

  • Stop event propagation.

2014-12-17

  • Added callback support
  • Now you can add an element (in the msg) with id 'notifIt_close' for click to close

2014-11-02

  • Fixed: z-index issue as the popup was not appearing properly

2014-10-24

  • added the ability to have the notification appear at the bottom center. This is done by setting the position to "bottom". ¬†Could be useful to do some more work to allow bottom right/bottom left in future.

2014-05-17

  • Make the center position compatible with IE8

2014-04-02

  • Fixed width: "all" bug

This awesome jQuery plugin is developed by naoxink. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 08.10.2018
  • Source