Notifications center position

[remithomas]

It's possible to align the notification in the center (top) of the page ?
thanks

[remithomas]

ok I found a solution

$.pnotify({
  title: "this is center",
  text: "blablabla",
  opacity: 0.90,
  type: "info",
  width:"390px",
  before_open: function(pnotify){
    pnotify.css({
      "top":"50px", 
      "left": ($(window).width() / 2) - (pnotify.width() / 2)
    });
  }
});

[jeacott]

when you do this though, the notification doesn't move when the screen is re-sized. so if you're resizing to a smaller screen you just lose your notification/alert/form offscreen. any hints for a fix?

[adonisnafeh]

you can recenter the notification every time the screen is re-sized

function get_center_pos(width, top){
    // top is empty when creating a new notification and is set when recentering
    if (!top){
        top = 30;
        // this part is needed to avoid notification stacking on top of each other
        $('.ui-pnotify').each(function() { top += $(this).outerHeight() + 20; });
    }

    return {"top": top, "left": ($(window).width() / 2) - (width / 2)}
}
$(document).ready(function () {

    new PNotify({
        title: "this is center",
        text: "blablabla",
        opacity: 0.90,
        type: "info",
        width:"390px",
        before_open: function (PNotify) {
            PNotify.get().css(get_center_pos(PNotify.get().width()));
        }
    });

    $(window).resize(function () {
        $(".ui-pnotify").each(function () {
            $(this).css(get_center_pos($(this).width(), $(this).position().top))
        });
    });
});

[pandur]

Hi,
I'm using latest PNotify - is it possible that before_open is not called?
Above center example does not work....

[Nezam]

Yeah this trick does not work in the latest release.Confirmed from myend.

[hperrin]

This should be done with a stack.

[hperrin]

This should work for you:

var stack_center = {"dir1": "down", "dir2": "right", "firstpos1": 25, "firstpos2": ($(window).width() / 2) - (Number(PNotify.prototype.options.width.replace(/\D/g, '')) / 2)};
$(window).resize(function(){
    stack_center.firstpos2 = ($(window).width() / 2) - (Number(PNotify.prototype.options.width.replace(/\D/g, '')) / 2);
});
new PNotify({text: "Hi there.", stack: stack_center});

[matihick]

Thanks hperrin! That stack should be included on the release.