Support changes from gh-pages, css custom notification folder, and ne…

…w index.html with .gitignore

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+

css/styles/alert-bangtidy.css

@@ -0,0 +1,23 @@
+/**
+ * bangTidy2 Style - Ported from Growl Style
+ * Ported By Nijikokun @vizualover @nijikokun
+ * Original Author Daryl Ginn
+ * Based On http://dribbble.com/shots/527056-Growl-Theme-2
+ *
+ * To use, for style use: bangTidy
+ *
+ */
+.alert-bangTidy {
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.88));
+  border: 1px solid #000;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.1);
+  -webkit-border-radius: 4px;
+  overflow: hidden;
+  color: white;
+  -webkit-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
+  -moz-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
+  -o-text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
+  -webkit-font-smoothing: antialiased;
+}

examples/basic.html → examples/index.html

@@ -25,18 +25,26 @@
         <div class="span3">
           <div class="span12">&nbsp;</div>
 
-          <div class="span12">
-            <a href="https://github.com/Nijikokun/bootstrap-notify" class='btn'>Fork On Github</a>
+          <div class="span3">
+            <iframe src="http://nijikokun.github.com/github-buttons/github-btn.html?user=Nijikokun&repo=bootstrap-notify&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+            <iframe src="http://nijikokun.github.com/github-buttons/github-btn.html?user=Nijikokun&repo=bootstrap-notify&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+
+            <br />
+
+            <a href="https://twitter.com/share" class="twitter-share-button" data-via="vizualover" data-related="nijikokun" data-hashtags="twitterextensions">Tweet</a>
           </div>
 
           <div class="span12">&nbsp;</div>
           <div class="span12">&nbsp;</div>
 
           <div class="span12">
-            <button class='btn btn-warning show-notification'>Click For A Notification</button>
+            <button class='btn btn-warning show-notification'>Click For A Random Notification</button>
           </div>
 
           <div class='notifications top-right'></div>
+          <div class='notifications bottom-right'></div>
+          <div class='notifications top-left'></div>
+          <div class='notifications bottom-left'></div>
         </div>
         <div class="span9">
           <div class='page-header'>
@@ -89,9 +97,8 @@ <h5>Position Options:</h5>
           <h4>Js:</h4>
 
 <pre class='prettyprint'>
-  $('.notifications').notify({
-    message: { text: message[1] },
-    type: message[0]
+  $('.top-left').notify({
+    message: { text: 'Aw yeah, It works!' }
   }).show(); // for the ones that aren't closable and don't fade out there is a .close() function.
 </pre>
 
@@ -111,7 +118,7 @@ <h5>Options:</h5>
                 <td>type</td>
                 <td>string</td>
                 <td>'success'</td>
-                <td>Alert style, emit <code>alert-</code> from style name.</td>
+                <td>Alert style, omit <code>alert-</code> from style name.</td>
               </tr>
               <tr>
                 <td>closable</td>
@@ -164,6 +171,7 @@ <h5>Options:</h5>
 
     <!-- Le javascript
     ================================================== -->
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
     <script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
@@ -173,13 +181,13 @@ <h5>Options:</h5>
     <script>
       // Random Messages
       var messages = [
-        [ 'info', 'Gah this is awesome.'],
-        [ 'success', 'I love Nijiko, he is my creator' ],
-        [ 'warning', 'Soda is bad.' ],
-        [ 'danger', "I'm sorry dave, I'm afraid I can't let you do that." ],
-        [ 'info', "There are only three rules." ],
-        [ 'inverse', 'Do you hear me now?' ],
-        [ 'info', 'You should fork this!' ]
+        [ 'bottom-right', 'info',     'Gah this is awesome.'],
+        [ 'top-right',    'success',  'I love Nijiko, he is my creator.' ],
+        [ 'bottom-left',  'warning',  'Soda is bad.' ],
+        [ 'bottom-left',  'danger',   "I'm sorry dave, I'm afraid I can't let you do that." ],
+        [ 'bottom-right', 'info',     "There are only three rules." ],
+        [ 'top-right',    'inverse',  'Do you hear me now?' ],
+        [ 'bottom-left',  'info',     'You should fork this!' ]
       ];
 
       // Pretty print
@@ -188,9 +196,10 @@ <h5>Options:</h5>
       // Basic Features, style isn't even required.
       $('.show-notification').click(function (e) {
         var message = messages[Math.floor(Math.random() * messages.length)];
-        $('.notifications').notify({
-          message: { text: message[1] },
-          type: message[0]
+
+        $('.' + message[0]).notify({
+          message: { text: message[2] },
+          type: message[1]
         }).show();
       });
     </script>