title: create a notification bar
body: <p>Im able to print a message at the top, but the css doesnt work as supposed.
  I want it to look like this and be placed at the bottom:</p>
  
  <p><img src="https://i.stack.imgur.com/1EPvf.jpg" alt="image"></p>
  
  <p>Also, it is an error message i want the color to be red and displaying for 4000 ms, else if it is success i want it to be green and displaying for 1000ms.
  If the notification bar already is showing i want to switch the notification bar to the new one.</p>
  
  <p>The code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function error(msg) {
      $('&lt;div/&gt;').prependTo('body').addClass('#notify-error').html(msg).slideDown();
  }
  
  function success(msg) {
      $('&lt;div/&gt;').prependTo('body').addClass('#notify-success').html(msg).slideDown();
  }
  
  
      $('#notify-error').click(function () {
          $(this).slideUp().empty();
      });
  
      $('#notify-success').click(function () {
          $(this).slideUp().empty();
      });
  
  error('Error!');
  success('Success!');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* css: */
  
       #notify-success {
          position:relative;
          width:100%;
          background-color:green;
          height:30px;
          color:white;
          display:none;
          text-align:center;
          padding:5px;
          font-size:2em;
          line-height:1em;
          font-family: Arial, sans-serif;
          border:2px solid #666;
          cursor:pointer;
      }
      
       #notify-error {
          position:relative;
          width:100%;
          background-color:red;
          height:30px;
          color:white;
          display:none;
          text-align:center;
          padding:5px;
          font-size:2em;
          line-height:1em;
          font-family: Arial, sans-serif;
          border:2px solid #666;
          cursor:pointer;
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/xP37L/" rel="nofollow noreferrer">jsfiddle</a></p>