title: Show growl using Javascript
body: <p>I want to display a growl in client-side using Javascript.</p>
  
  <p>I mean this UI-component: </p>
  
  <p><img src="https://i.stack.imgur.com/jqQst.png" alt="enter image description here"></p>
  
  <p>I found this <a href="https://stackoverflow.com/questions/5730054/how-to-display-notification-with-welcome-message-when-logged-in">thread</a> , However , I can't find an object called :<code>topBar</code></p>
  
  <p>Known also that using: </p>
  
  <p><code>grep -rl</code> to find text in files leads to discover this JS : </p>
  
  <pre><code>/**
   * PrimeFaces NotificationBar Widget
   */
  PrimeFaces.widget.NotificationBar = PrimeFaces.widget.BaseWidget.extend({
  
      init: function(cfg) {
          this._super(cfg);
  
          var _self = this;
  
          //relocate
          this.jq.css(this.cfg.position, '0').appendTo($('body'));
  
          //display initially
          if(this.cfg.autoDisplay) {
              $(this.jq).css('display','block')
          }
  
          //bind events
          this.jq.children('.ui-notificationbar-close').click(function() {
              _self.hide();
          });
      },
  
      show: function() {
          if(this.cfg.effect === 'slide')
              $(this.jq).slideDown(this.cfg.effect);
          else if(this.cfg.effect === 'fade')
              $(this.jq).fadeIn(this.cfg.effect);
          else if(this.cfg.effect === 'none')
              $(this.jq).show();
      },
  
      hide: function() {
          if(this.cfg.effect === 'slide')
              $(this.jq).slideUp(this.cfg.effect);
          else if(this.cfg.effect === 'fade')
              $(this.jq).fadeOut(this.cfg.effect);
          else if(this.cfg.effect === 'none')
              $(this.jq).hide();
      },
  
      isVisible: function() {
          return this.jq.is(':visible');
      },
  
      toggle: function() {
          if(this.isVisible())
              this.hide();
          else
              this.show();
      }
  
  });
  </code></pre>