Edit this page

Move Visible Notifications after Hiding Others

The example below demonstrates how to move the remaining visible notifications after some have been hidden and empty spaces in the stack have been created.

The idea is to use static notification messages inside a positioned container. This creates the impression that popup notification messages are used.

The position settings, which are normally applied to the Notification widget, should be replaced by appropriate CSS styles applied to the static messages' container.

The example is based on the following API and widget functionality:

Example
<style>

  #appendto {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 200px;
  }

</style>

<div id="example">

  <span id="staticNotification"></span>
  <button id="showNotifications" class="k-button">Show some notifications</button>
  <button id="hideNotifications" class="k-button">Hide all</button>

  <div id="appendto"></div>

  <script>
    $(function() {
      // initialize the Notification widget
      var staticNotification = $("#staticNotification").kendoNotification({
        appendTo: "#appendto",
        stacking: "up"
      }).data("kendoNotification");

      // show some Notification messages with variable hide timeout
      function showNotifications() {
        for (var j = 0; j < 10; j++) {
          staticNotification.setOptions({
            autoHideAfter: Math.ceil(Math.random() * 10000)
          });

          var d = new Date();
          staticNotification.show(kendo.toString(d, 'HH:MM:ss.') +
                                  kendo.toString(d.getMilliseconds(), "000"), "info");
        }
      }

      // show handler
      $("#showNotifications").click(showNotifications);

      // hide handler
      $("#hideNotifications").click(function(){
        staticNotification.hide();
      });

      // show some Notification messages automatically
      showNotifications();

    });
  </script>
</div>

See Also

Other articles on the Kendo UI Notification:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy