Search code examples
positionpnotify

How to set top-center position for pnotify


How to set non pixels position? I try this

var stack = { "dir1": "down", "dir2": "right", "firstpos1": 50, "firstpos2": 50 };

But I this it is bad because of different screen resolution.


Solution

  • there's a similar question with an answer here. As per the first example in the stacks documentation, you can center the initial position of the notification by setting the top/left css propreties in before_open. You also need to reposition the notification everytime the window is resized.

    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))
        });
      });
    });