Move Popup Notifications on Window Resize

Environment

Product	Progress® Kendo UI® Notification for jQuery
Operating System	Windows 10 64bit
Visual Studio Version	Visual Studio 2017
Preferred Language	JavaScript

Description

How can I move popup notifications on browser window resize, so that they remain within the viewport boundaries?

Solution

The code from the example below executes the following actions:

1. Ensures that the timeOutMoveFunction function is executed once, some time after browser window resizing is complete.
2. Calculates the expected position of the first (oldest) notification popup and compare it with the current position.
3. Moves all notification popups, according to the discrepancy derived from the previous point.

  <div id="example">

      <span id="notification" style="display:none;"></span>

      <p>
        <button id="showNotification" >Show a notification</button>
      </p>
      <h4>Hide notifications:</h4>
      <p>
        <button id="hideAllNotifications">Hide all notifications</button>
      </p>

      <script>
        $(document).ready(function() {

          var notification = $("#notification").kendoNotification({
            position: {
              bottom: 30,
              right: 30
            },
            autoHideAfter: 0
          }).data("kendoNotification");

          $("#showNotification").kendoButton({
            click:function(){
              notification.info("foo");
            }
          });

          $("#hideAllNotifications").kendoButton({
            click:function(){
              notification.hide();
            }
          });

          var timeOut = -1;
          var timeOutMoveFunction = function(){
            var allNotificationPopups = $("body > .k-animation-container > .k-notification");
            if (allNotificationPopups[0]) {
              var firstPopupInstance = allNotificationPopups.first().data("kendoPopup");

              // Calculate the expected Notification popup position according to the widget settings and popup size.
              var x = $(window).width() - firstPopupInstance.element.width() - notification.options.position.right;
              var y = $(window).height() - firstPopupInstance.element.height() - notification.options.position.bottom;

              // Compare the expected and actual popup position.
              var diff = {
                top: y - parseInt(firstPopupInstance.wrapper.css("top"), 10),
                left: x - parseInt(firstPopupInstance.wrapper.css("left"), 10)
              };

              firstPopupInstance.wrapper.css({top: y, left: x});

              // Move all notification popups except for the first one.
              allNotificationPopups.not(allNotificationPopups.first()).each(function(){
                var element = $(this);
                element.parent().css({
                  top: parseInt(element.parent().css("top"), 10) + diff.top,
                  left: parseInt(element.parent().css("left"), 10) + diff.left
                });
              });
            }
          };

          // Attach a window.resize handler, which will be executed once, after the browser window resizing is complete.
          $(window).resize(function() {
            if (timeOut != -1) {
              window.clearTimeout(timeOut);
            }
            timeOut = window.setTimeout(timeOutMoveFunction, 100);
          });

        });
      </script>
  </div>

See Also

• Basic Usage of the Notification (Demo)
• Using the API of the Notification (Demo)
• JavaScript API Reference of the Notification