Hey man, you should put your package on bower!

Jou!
If use plugin with Prototype Library (Magento):
notifIt/notifIt/js/notifIt.js:328 > Uncaught TypeError: Cannot read property 'animate' of null

Solution:
add to function notif_dismiss():
$ = jQuery;
like this solved into other plugin functions, but not notif_dismiss()

maybe you can use $(window).width() instead of screen.width in case the browser is not full screen.

In the demo at http://naoxink.hol.es/notifIt/, the last one says you can pass time to control it. That wasn't working for me, so I referred to the GitHub docs and noticed it is timeout. Should probably update that.

Hi, Thansk for your lovely plugin.

Current CSS rules are not in a proper namespace and affect other part of website which use the same class name (.info, .…). Here is a better style (in less format):
Please also consider using a simpler name for notifIt!-1.1 folder. I suggest notifit for both css class and folder name. Thanks.

#ui_notifIt {
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  overflow: hidden;
  -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
  -wekbit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  z-index: 2000;
  /* Color setup */
  /* You are free to change all of this */
  &.success {
    background-color: yellowgreen;
    color: white;
  }
  &.error {
    background-color: orangered;
    color: white;
  }
  &.warning {
    background-color: orange;
    color: white;
  }
  &.info {
    background-color: deepskyblue;
    color: white;
  }
  &.default {
    background-color: #EEE;
    color: #444;

  }
  &:hover {
    opacity: 1 !important;
  }
  p {
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
  }

}

When I use the bottom position in the notification, while the notification exits it teleports to the top of the screen instead of falling and fading to the bottom of the screen.

notif({
            msg: "<b>Success:</b> Survey was successfully saved",
            bgcolor:"#000000",
            opacity:0.9,
            position:"bottom",
            offset:80,
 })

I want to run an ajax request based on response of confirm response. However I cant find a way to pass variables, if i try i lose confirm alert response of which button was clicked..
Can you suggest a workaround?

How can i avoid this "Examle Text In Message" i want show "Example text in message"

Thank you.

What if I need to add clickable inside msg content, since the notification close on.click replacing this behavior with click link to close.

Nice start. It would great if you feature to show multiple notifications at the same time. E.g. how it is done here http://www.jqueryrain.com/?4NmZRZ2C

Hi, I change your script adding the modal behaviour.

this is my code:

in css:

ui_overlay_notifIt{

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index:2;

}

in javascript:
var overlay = '

clearInterval(to);
if(defaults.modal) $("body").append(overlay); //NEW
$("body").append(div);

function notifit_dismiss(to, config) {
clearInterval(to);
if (!config.fade) {
switch(config.position){
case "center":
$("#ui_notifIt").animate({
top: parseInt(config.height - (config.height / 2))
}, 100, function() {
$("#ui_notifIt").animate({
top: parseInt(0 - (config.height * 2))
}, 100, function() {
$("#ui_notifIt").remove();
if(config.modal)$("#ui_overlay_notifIt").remove(); //NEW
});
});
break;
case "right":
$("#ui_notifIt").animate({
right: parseFloat(config.width - (config.width * 0.9))
}, 100, function() {
$("#ui_notifIt").animate({
right: parseInt(0 - (config.width * 2))
}, 100, function() {
$("#ui_notifIt").remove();
if(config.modal)$("#ui_overlay_notifIt").remove(); //NEW
});
});
break;
case "left":
$("#ui_notifIt").animate({
left: parseFloat(config.width - (config.width * 0.9))
}, 100, function() {
$("#ui_notifIt").animate({
left: parseInt(0 - (config.width * 2))
}, 100, function() {
$("#ui_notifIt").remove();
if(config.modal)$("#ui_overlay_notifIt").remove(); //NEW
});
});
break;
}
} else {
$("#ui_notifIt").fadeOut("slow", function() {
$("#ui_notifIt").remove();
if(config.modal)$("#ui_overlay_notifIt").remove(); //NEW
});
}
}

thanks for your work
Marco

Please. Thanks.

Excellent project @naoxink!

I kept getting "TypeError: Cannot read property 'extend' of undefined"

So in my setup I needed to replace references to "$" with "jQuery".

Is this something we should consider in the source here as well? Presumably other people might have conflicts with $ used for other purposes as well. I believe there's a way to do it without flat out replacing all the references.

Thanks for sharing a nice jquery plugin!

Could you add LICENSE file?

https://github.com/blog/1530-choosing-an-open-source-license
might help.

Thanks.

Hi

Suppose i'm adding z-index, it not considering.

i'm adding like this

"z-index" : 100000,

Thanks,
kanna.

I don't know why, but if I import the JS at the end of the page, a default info notification appears under my fixed-top navbar.

Exception :
Uncaught TypeError: $bg.hide is not a function
Trace:
_show @ notifIt.js:386
notif_confirm @ notifIt.js:438

Cause:
$bg and $confirm will get the DOM Element but not Jquery Object while notif_confirm() is called second time. See notifIt.js:354-355

Fixed:
[Line 354] var $confirm = $('.notifit_confirm')[0] ? $('.notifit_confirm') : null;
[Line 355] var $bg = $('.notifit_confirm_bg')[0] ? $('.notifit_confirm_bg') : null;