Improve Notification docs and new stacking how-to

Author: Dimo Dimov

web/notification/how-to/stacking-left-right.md

@@ -0,0 +1,79 @@
+---
+title: Stack static notifications to the left or right
+page_title: Stack static notifications to the left or right
+description: Stack static notifications to the left or right
+---
+
+# Stack static notifications to the left or right
+
+The following demo shows how to stack static notifications to the left or to the right
+
+#### Example
+
+```html
+<style>
+
+    .notification-container
+    {
+        min-height: 2.6em;
+        padding: .3em .6em;
+        overflow: auto;
+    }
+
+    #ntfLeft
+    {
+        text-align: right;
+    }
+
+    .notification-container .k-notification
+    {
+        padding: .3em .6em;
+    }
+
+</style>
+
+<script id="my-template" type="text/x-kendo-template">
+    <div class="my-container">
+      #= message #
+    </div>
+</script>
+
+<p><button id="buttonRight" class="k-button">Stack to the right</button></p>
+<div id="ntfRight" class="k-block notification-container"></div>
+
+<p><button id="buttonLeft" class="k-button">Stack to the left</button></p>
+<div id="ntfLeft" class="k-block notification-container"></div>
+
+<script>
+
+$(function() { 
+  var options = {
+    stacking: "down",
+    autoHideAfter: 0,
+    templates: [{
+      type: "my-type",
+      template: $("#my-template").html()
+    }],
+    show: function(e) {
+      e.element.css("display", "inline-block");
+    }
+  };
+  var ntfRight = $("#ntfRight").kendoNotification($.extend(options, {stacking: "down", appendTo: "#ntfRight"})).data("kendoNotification");
+  var ntfLeft = $("#ntfLeft").kendoNotification($.extend(options, {stacking: "up", appendTo: "#ntfLeft"})).data("kendoNotification");
+  
+  $(".k-button").click(function (e) {
+    var notificationWidget = $(e.target).is("#buttonLeft") ? ntfLeft : ntfRight;
+    var d = new Date();
+    notificationWidget.show({
+      message: kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000")
+    }, "my-type");
+
+    var container = $(notificationWidget.options.appendTo);
+    container.scrollTop(container[0].scrollHeight);
+  });
+
+  
+});
+
+</script>
+```

web/notification/overview.md

@@ -103,6 +103,8 @@ By default, postponing is disabled.
 
 ## Positioning and stacking
 
+### Popup messages
+
 By default, the **Notification** widget creates popups, which overlay the other page content. If no position settings are defined,
 the first popup will be displayed near the bottom-right corner of the browser viewport and subsequent popups will stack upwards.
 Positioning and stacking can be controlled independently. If no stacking setting is defined, the popups will stack upwards or downwards, depending on the positioning settings
@@ -146,9 +148,12 @@ In this way every **Notification** instance can recognize and manage its own cur
 
 > Using several **Notification** widget instances, which display notifications at the same place on the page is not recommended, because the notifications from the multiple instances will overlap.
 
+### Static messages
+
 The **Notification** widget can also display "static" notifications, which do not overlay other elements, but instead take part in the so-called *normal flow* of the page content.
-In this case positioning settings do not make sense and are ignored. Stacking can be downwards (by default) or upwards.
-Static notifications are displayed, if a target container is specified. One widget instance can display either popup or static notifications, not both at the same time.
+In this case positioning settings do not make sense and are ignored. When static notifications are used, the stacking direction can only be set to `down` (default) or `up`,
+depending on whether new messages should appear after or before existing ones. Static notifications are displayed, if a target container is specified.
+One widget instance can display either popup or static notifications, not both at the same time.
 
 ### Example - enable static notifications