In this section we will demonstrate how to display the PrimeFaces NotificationBar component and automatically hide it using the JavaScript setTimeout()
function.
Create a NotificationBar widget and buttons to show and hide it using the following code:
<p:notificationBar id="bar" widgetVar="notifBar" position="top" effect="slide" effectSpeed="slow" style="height: 20px; background-color: #8B0000;"> <h:outputText value="There are New Unread Emails in your MailBox." style="color:#FFF;font-size:20px;"/> </p:notificationBar> <h:form> <p:commandButton value="Show" onclick="notifBar.show()"/> <p:commandButton value="Hide" onclick="notifBar.hide()"/> <p:commandButton value="Show & Auto Hide" onclick="showNotifBar()"/> </h:form>
Create an
onclick
event handler JavaScript functionshowNotifBar()
using the following code:<script> var timeoutID = null; function showNotifBar...