Make PrimeFaces messages disappear after 5 seconds - jsf

Question

My new task is to have PrimeFaces <p:messages> dissappear after 5 seconds after appearing. I haven't found any specific setting for that in PF's user guide, nor on their webpage. I thought maybe I could bind an JavaScript event to <p:messages> appearing, but don't know where to start.
My messages are in the Template:
<p:messages id="messages" globalOnly="true" autoUpdate="true" closable="true" rendered="#{not suppressMessages}" />
and render such an empty <div> in DOM:
<div id="messages" class="ui-messages ui-widget" aria-live="polite"></div>
and full:
<div id="messages" class="ui-messages ui-widget" aria-live="polite">
<div class="ui-messages-info ui-corner-all">
<a class="ui-messages-close" onclick="$(this).parent().slideUp();return false;" href="#">
<span class="ui-messages-info-icon"></span>
<ul>
<li>
<span class="ui-messages-info-summary">Sample info message</span>
</li>
</ul>
</div>
</div>
Does anyone know of a jQuery or Primefaces specific solution?
Solution
I've found the combination of jQuery and <p:ajaxStatus> to be the solution to my problem. I've added:
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="setTimeout(function() { $('.ui-messages').slideUp(); }, 5000); PF('statusDialog').hide();" />
to my <p:ajaxStatus> and some jQuery in case of non ajax messages.
jQuery(document).ready(function() {
if(!$.trim($(".ui-messages").html())==''){
//console.log("messages found");
setTimeout(function() {$('.ui-messages').slideUp();}, 5000);
} else {
//console.log("messages not found");
}
});
Thanks for the lead BalusC!

Answer 1

You can use <p:ajaxStatus> to hook on ajax start, complete, success and error events. You can then just fire a setTimeout() on a slideUp() of the messages.
<p:ajaxStatus oncomplete="setTimeout(function() { $('.ui-messages').slideUp(); }, 5000)" />
Or, more generically, you could also use jQuery's $.ajaxStop() for this.
$(document).ajaxStop(function() {
setTimeout(function() {
$('.ui-messages').slideUp();
}, 5000);
});