Primefaces mobile swipe overlaypanel

UI Components for JSF
Post Reply
Posts: 2
Joined: 16 Nov 2016, 17:04

16 Nov 2016, 17:23

Hi, I want to have an overlaypanel which appears on the left when the user clicks a button or when the user swipes to the right anywhere on the screen.

I have successfully achieved part of the behavior using the example on the primefaces mobile showcase:

Code: Select all

<pm:content styleClass="jqm-content">
    <p:panelGrid columns="2">
        <p:commandButton id="btn-basic" value="Basic" type="button"/>
<p:overlayPanel for="btn-basic" widgetVar="pnl-basic" at="left" showEffect="overlay">
     <h2>Panel Content</h2>
         <p:menuitem value="Link 1" url="#" />
         <p:menuitem value="Link 2" url="#" />
         <p:menuitem value="Link 3" url="#" />
I am having trouble to manage to show the overlaypanel when the user swipes anywhere on the screen and I was wondering if that is even possible to do with primefaces. Any ideas?

I think it could be done using: <p:ajax event="swiperight" listener=#{bean.method()} update=.../> but I don't know where to include this event to obtain the desired result(swipe anywhere on the screen and get the overlaypanel to show). I tried some options like including it on the pm:page component but that component doesn't support event handling.

I'd be grateful if you people can shed some light over this.

Posts: 2
Joined: 16 Nov 2016, 17:04

08 Dec 2016, 20:42

I did it with Jquery:

Code: Select all

          $( "div.ui-page" ).on( "swiperight", swiperightHandler );
	  function swiperightHandler( event ){

div.ui-page references the div that encapsulates the pm:page, then "#pagina\\:Menu\\:btnMenu" is the HTML id of the commandbutton.

Basically the button is clicked everytime the user swipes right on the page generating the desired behavior.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests