Added Some Options

css/jquery.gritter.css

@@ -1,27 +1,30 @@
 /* the norm */
-#gritter-notice-wrapper {
+.gritter-notice-wrapper {
 	position:fixed;
-	top:20px;
-	right:20px;
 	width:301px;
 	z-index:9999;
 }
-#gritter-notice-wrapper.top-left {
-    left: 20px;
-    right: auto;
+
+.gritter-notice-wrapper.tl {
+	top:20px;
+	left:20px;
 }
-#gritter-notice-wrapper.bottom-right {
-    top: auto;
-    left: auto;
-    bottom: 20px;
-    right: 20px;
+
+.gritter-notice-wrapper.tr {
+	top:20px;
+	right:20px;
+}
+
+.gritter-notice-wrapper.br {
+	bottom:20px;
+	right:20px;
 }
-#gritter-notice-wrapper.bottom-left {
-    top: auto;
-    right: auto;
-    bottom: 20px;
-    left: 20px;
+
+.gritter-notice-wrapper.bl {
+	bottom:20px;
+	left:20px;
 }
+
 .gritter-item-wrapper {
 	position:relative;
 	margin:0 0 10px 0;

index.html

@@ -51,7 +51,16 @@ <h1>Gritter Demo</h1>
 			<a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a>
 		</li>
         <li>
-            <a href="#" id="add-max">Add notification with max of 3</a>: If there are 3 messages already on screen, it won't show another one.
+            <a href="#" id="add-max">Add notification with global max of 3</a>: If there are 3 messages already on screen, it won't show another one.
+        </li>
+        <li>
+            <a href="#" id="add-max-bubble">Add notification with max of 3 and bubble</a>: Limit to 3 messages with bubble effect.
+        </li>
+        <li>
+            <a href="#" id="add-max-bubble-force">Add notification with max of 3 and bubble all</a>: Limit to 3 messages with bubble effect and include sticky notifications.
+        </li>
+        <li>
+            <a href="#" id="add-regular-bl">Add a notification in the bottom left corner</a>
         </li>
 		<li>
 			<a href="#" id="remove-all">Remove all notifications</a>
@@ -142,7 +151,7 @@ <h1>Gritter Demo</h1>
                 sticky: false,
                 // (function) before the gritter notice is opened
                 before_open: function(){
-                    if($('.gritter-item-wrapper').length == 3)
+                    if($('.gritter-item-wrapper').length >= 3)
                     {
                         // Returning false prevents a new gritter from opening
                         return false;
@@ -152,6 +161,60 @@ <h1>Gritter Demo</h1>
 
             return false;
 
+        });
+
+        $('#add-max-bubble').click(function(){
+
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a notice with a max of 3 and bubbling!',
+                // (string | mandatory) the text inside the notification
+                text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
+                // (string | optional) the image to display on the left
+                image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
+                // (bool | optional) if you want it to fade out on its own or just sit there
+                sticky: false,
+                // (integer / optional) maximum allowed notices in bubbling gritter
+                maximum: 3,
+                // (boolean / optional) whether to simultaneously fade and collapse during overflow bubble
+                overflow_delay_collapse: '',
+                // (integer / optional) collapse speed during overflow bubbling (top item)
+                overflow_collapse_speed: '',
+                // (integer / optional) fade out speed during overflow bubbling (top item)
+                overflow_fade_out_speed: '',
+                // (boolean / default:false) does bubbling remove sticky objects?
+                overflow_kills_sticky: ''
+            });
+
+            return false;
+
+        });
+
+        $('#add-max-bubble-force').click(function(){
+
+            $.gritter.add({
+                // (string | mandatory) the heading of the notification
+                title: 'This is a notice with a max of 3 and bubbling!',
+                // (string | mandatory) the text inside the notification
+                text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
+                // (string | optional) the image to display on the left
+                image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
+                // (bool | optional) if you want it to fade out on its own or just sit there
+                sticky: false,
+                // (integer / optional) maximum allowed notices in bubbling gritter
+                maximum: 3,
+                // (boolean / optional) whether to simultaneously fade and collapse during overflow bubble
+                overflow_delay_collapse: '',
+                // (integer / optional) collapse speed during overflow bubbling (top item)
+                overflow_collapse_speed: '',
+                // (integer / optional) fade out speed during overflow bubbling (top item)
+                overflow_fade_out_speed: '',
+                // (boolean / default:false) does bubbling remove sticky objects?
+                overflow_kills_sticky: true
+            });
+
+            return false;
+
         });
 
 		$('#add-without-image').click(function(){
@@ -240,6 +303,21 @@ <h1>Gritter Demo</h1>
 
 		});
 
+		$('#add-regular-bl').click(function(){
+
+			$.gritter.add({
+				// (string | mandatory) the heading of the notification
+				title: 'This one is bottom left!',
+				// (string | mandatory) the text inside the notification
+				text: 'I am a notification appearing on the bottom left corner of the screen. I transition appropriately based on my position. I can also be placed in the top left or bottom right.',
+				// (string | optional | default:'tr' ) where to place < 'tl', 'tr', 'br', 'bl' >
+				position: 'bl'
+			});
+
+			return false;
+
+		});
+
 		$("#remove-all").click(function(){
 
 			$.gritter.removeAll();
@@ -266,4 +344,4 @@ <h1>Gritter Demo</h1>
 </script>
 
 </body>
-</html>
+</html>