New to Kendo UI for jQuery? Download free 30-day trial

Move Popup Notifications on Window Resize

The following example demonstrates how to move popup notifications on browser window resize, so that they remain within the viewport boundaries.

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

    <div id="example">

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

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

        $(document).ready(function() {

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



          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.
                var element = $(this);
                  top: parseInt(element.parent().css("top"), 10) +,
                  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) {
            timeOut = window.setTimeout(timeOutMoveFunction, 100);



See Also

In this article
Not finding the help you need? Improve this article