in one of the projects I'm working on I want to use the '#topbar-menu-button' element, but it doesn't work. When I put the elements into my .xhtml file (I used the showcase example) The icons and searchbar are shown on the page and even when I zoom in to the page the menu items disappear and are replaced with a single icon. But none of the icons that get rendered are 'clickable'.
If I inspect your showcase page, all the clickable items fire a jQuery event to show a certain menu, but on my local page the events are not loaded up.
The code example I'm talking about:
Code: Select all
<div class="topbar-right">
<a id="topbar-menu-button" href="#">
<i class="material-icons"></i>
</a>
<ul class="topbar-items fadeInDown animated">
<ui:fragment rendered="#{guestPrefeguestPreferences.profileMode == 'overlay'||guestPreferences.menuLayout == 'menu-layout-static menu-layout-horizontal'}">
<li class="profile-item">
<a href="#">
<div class="profile-image"></div>
<span class="topbar-item-name">Jane Williams</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Profile</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Privacy</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Settings</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Logout</span>
</a>
</li>
</ul>
</li>
</ui:fragment>
<li>
<a href="#">
<i class="topbar-icon material-icons"></i>
<span class="topbar-item-name">Settings</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Change Theme</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Favorites</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Lock Screen</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Wallpaper</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons animated swing"></i>
<span class="topbar-badge animated rubberBand">5</span>
<span class="topbar-item-name">Messages</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar1.png" library="ultima-layout" width="35"/>
<span>Give me a call</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar2.png" library="ultima-layout" width="35"/>
<span>Sales reports attached</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar3.png" library="ultima-layout" width="35"/>
<span>About your invoice</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar2.png" library="ultima-layout" width="35"/>
<span>Meeting today at 10pm</span>
</a>
</li>
<li role="menuitem">
<a href="#" class="topbar-message">
<p:graphicImage name="images/avatar4.png" library="ultima-layout" width="35"/>
<span>Out of office</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="topbar-icon material-icons"></i>
<span class="topbar-badge animated rubberBand">4</span>
<span class="topbar-item-name">Notifications</span>
</a>
<ul class="ultima-menu animated">
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Pending tasks</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Meeting today at 3pm</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Download documents</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<i class="material-icons"></i>
<span>Book flight</span>
</a>
</li>
</ul>
</li>
<li class="search-item">
<h:panelGroup styleClass="md-inputfield">
<p:inputText />
<label>Search</label>
<i class="topbar-icon material-icons"></i>
</h:panelGroup>
</li>
</ul>
</div>
You would assume that I have no events that get fired by .js scripts, but there are some
The above example is animation of the searchbar when you click on the searchbar which confuses me even more.
How can some elements fire an animation event and others don't? Do I have to implement something into my code so that the scripts are loaded properly?
In my faces-config.xml I have the following snippet:
Code: Select all
<component>
<component-type>org.primefaces.component.UltimaMenu</component-type>
<component-class>org.primefaces.ultima.component.menu.UltimaMenu</component-class>
</component>
<render-kit>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.UltimaMenuRenderer</renderer-type>
<renderer-class>org.primefaces.ultima.component.menu.UltimaMenuRenderer</renderer-class>
</renderer>
</render-kit>
Code: Select all
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</param-value>
</context-param>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Production</param-value>
</context-param>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>ultima-#{guestPreferences.theme}</param-value>
</context-param>
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/primefaces-ultima.taglib.xml</param-value>
</context-param>
I am currently using primefaces 7.0 with ultima 2.0.0
I've searched for a solution on this issue, but I had no luck in finding it, hopefully you guys can help me.
Best regards!