Input
Editors
Data
Charts & Maps
Panel & Layout
Overlay & Feedback
Media
Misc
Resources
Waypoint
Waypoint makes it easy to execute custom logic whenever you scroll to an element. Waypoints are a solid base for modern UI patterns that depend on the scroll position of a page; vertical and horizontal scrolling are supported. Based on Waypoints JS by Caleb Troughton.
Infinite scrolling 1
Infinite scrolling with p:remoteCommand and the offset as a function, which defines a waypoint when the
bottom of the element is in view; it is recalculated automatically when the window is resized. The waypoint is used with
p:callback, which checks the scrolling direction and calls the widget methods disable() and
enable(): disable() temporarily stops the callback from firing but leaves the event bound, and
enable() re-enables it. The demo needs the whole page as scroll context and opens in a new window.
Infinite scrolling 2
Lazy loading of images: the waypoint is bound to all images with a data-src attribute and an offset of
'100%'. When an image scrolls into view its source is set, it is faded in and its waypoint is destroyed. The demo
needs the whole page as scroll context and opens in a new window.
Sticky Elements
A menubar that sticks to the top of the window and a "Back to top" button that appears after scrolling past the page, both
driven by waypoints and p:callback. The demo needs the whole page as scroll context and opens in a new window.
Dial Controls
Waypoints within scrollable non-window elements: the forContext attribute names the scrolling elements (the dials),
and the waypoint is used with p:callback. Scroll the dials to change the font size, width and background color of the
text below them.
Scroll Analytics
Waypoints track user engagement and ad views. The articles scroll inside their own box, which is the scroll context
(forContext), and the waypoints are used with p:ajax and p:callback. The offset'bottom-in-view' is an alias for the function offset of the infinite scrolling demo. Scroll down: each ad turns red when it
comes into view and the server is informed; a message pops up when you reach the end of the articles.
Events
Waypoint can be used either with p:callback or p:ajax. There is only one event, reached: it is fired
when the user scrolls past the element. In the callback function you can access the scrolling direction (down, up,
right, left) and the current waypoint element as a DOM object.
Usage
- waypoint.xhtml
- ScrollAnalyticsController.java
- infiniteScrollingOne.xhtml
- InfiniteScrollController.java
- infiniteScrollingTwo.xhtml
- stickyElements.xhtml
- remoteContentOne.xhtml
- remoteContentSecond.xhtml
<div class="card">
<h5>Infinite scrolling 1</h5>
<p>
Infinite scrolling with <code>p:remoteCommand</code> and the <code>offset</code> as a function, which defines a waypoint when the
bottom of the element is in view; it is recalculated automatically when the window is resized. The waypoint is used with
<code>p:callback</code>, which checks the scrolling direction and calls the widget methods <code>disable()</code> and
<code>enable()</code>: <code>disable()</code> temporarily stops the callback from firing but leaves the event bound, and
<code>enable()</code> re-enables it. The demo needs the whole page as scroll context and opens in a new window.
</p>
<p:linkButton value="Show infinite scrolling 1" icon="pi pi-external-link" target="_blank"
href="#{request.contextPath}/ui/panel/waypoint/standalone/infiniteScrollingOne"/>
</div>
<div class="card">
<h5>Infinite scrolling 2</h5>
<p>
Lazy loading of images: the waypoint is bound to all images with a <code>data-src</code> attribute and an <code>offset</code> of
<code>'100%'</code>. When an image scrolls into view its source is set, it is faded in and its waypoint is destroyed. The demo
needs the whole page as scroll context and opens in a new window.
</p>
<p:linkButton value="Show infinite scrolling 2" icon="pi pi-external-link" target="_blank"
href="#{request.contextPath}/ui/panel/waypoint/standalone/infiniteScrollingTwo"/>
</div>
<div class="card">
<h5>Sticky Elements</h5>
<p>
A menubar that sticks to the top of the window and a "Back to top" button that appears after scrolling past the page, both
driven by waypoints and <code>p:callback</code>. The demo needs the whole page as scroll context and opens in a new window.
</p>
<p:linkButton value="Show sticky elements" icon="pi pi-external-link" target="_blank"
href="#{request.contextPath}/ui/panel/waypoint/standalone/stickyElements"/>
</div>
<div class="card">
<h5>Dial Controls</h5>
<p>
Waypoints within scrollable non-window elements: the <code>forContext</code> attribute names the scrolling elements (the dials),
and the waypoint is used with <code>p:callback</code>. Scroll the dials to change the font size, width and background color of the
text below them.
</p>
<style>
.dial-wrapper {
width: 460px;
margin: 0 auto 0 auto;
overflow: hidden;
}
.dial {
float: left;
width: 140px;
margin-left: 20px;
position: relative;
}
.dial.first {
margin-left: 0;
}
.dial h2 {
font-weight: bold;
}
.dial ul {
background: #fff;
color: #000;
border: 1px solid #bbb;
padding: 25px 0 114px 0;
height: 1px;
overflow-y: scroll;
margin: 0;
list-style: none;
}
.dial ul:before {
content: "";
border: 10px solid #555;
width: 1px;
height: 1px;
display: block;
position: absolute;
bottom: 105px;
left: 0;
z-index: 3;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
}
.dial li {
height: 20px;
line-height: 20px;
padding: 10px 10px 10px 20px;
border-bottom: 1px solid #ddd;
font-size: 20px;
margin: 0;
}
.dial li:first-child {
border-top: 1px solid #ddd;
}
.dial li[data-value="#fff"] {
background: #fff;
}
.dial li[data-value="#d1f2a5"] {
background: #d1f2a5;
}
.dial li[data-value="#effab4"] {
background: #effab4;
}
.dial li[data-value="#ffc48c"] {
background: #ffc48c;
}
.dial li[data-value="#ff9f80"] {
background: #ff9f80;
}
.dial li[data-value="#f56991"] {
background: #f56991;
}
.dial .indicator {
position: absolute;
bottom: 115px;
left: 0;
height: 1px;
width: 120px;
background: red;
}
.dial-text {
font-size: 8px;
line-height: 1.5;
width: 150px;
color: #000;
background: #fff;
border: 1px solid #ccc;
margin: 15px auto auto auto;
padding: 10px;
transition: all 500ms ease-in-out;
}
</style>
<h:form id="formDialControls">
<h:panelGroup id="wrapper" layout="block" styleClass="dial-wrapper">
<div data-property="font-size" class="dial first">
<h3>Font Size:</h3>
<ul>
<li data-value="8px">8px</li>
<li data-value="10px">10px</li>
<li data-value="12px">12px</li>
<li data-value="14px">14px</li>
<li data-value="16px">16px</li>
<li data-value="18px">18px</li>
<li data-value="24px">24px</li>
<li data-value="36px">36px</li>
<li data-value="48px">48px</li>
<li data-value="72px">72px</li>
</ul>
<div class="indicator"></div>
</div>
<div data-property="width" class="dial">
<h3>Width:</h3>
<ul>
<li data-value="150px">150px</li>
<li data-value="200px">200px</li>
<li data-value="250px">250px</li>
<li data-value="300px">300px</li>
<li data-value="350px">350px</li>
<li data-value="400px">400px</li>
<li data-value="500px">500px</li>
<li data-value="600px">600px</li>
<li data-value="700px">700px</li>
<li data-value="800px">800px</li>
<li data-value="1024px">1024px</li>
<li data-value="1280px">1280px</li>
</ul>
<div class="indicator"></div>
</div>
<div data-property="background-color" class="dial">
<h3>BG Color:</h3>
<ul>
<li data-value="#fff">#fff</li>
<li data-value="#d1f2a5">#d1f2a5</li>
<li data-value="#effab4">#effab4</li>
<li data-value="#ffc48c">#ffc48c</li>
<li data-value="#ff9f80">#ff9f80</li>
<li data-value="#f56991">#f56991</li>
</ul>
<div class="indicator"></div>
</div>
</h:panelGroup>
<h:panelGroup id="textContainer" layout="block" styleClass="dial-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit ultrices rutrum. Cras dignissim purus non purus
mattis nec lobortis enim dignissim. Nulla a urna est. Proin volutpat odio id velit tempor sollicitudin. Aliquam lobortis
nunc gravida orci fringilla in commodo lectus gravida. In hac habitasse platea dictumst. Maecenas tincidunt pulvinar
blandit. Suspendisse a diam ligula. Mauris non tellus nisl, in interdum elit. Etiam rhoncus cursus lectus vel venenatis.
Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer
eleifend imperdiet lectus vitae aliquet. Mauris metus lorem, fermentum vitae malesuada quis, pretium id mi.
</h:panelGroup>
<pe:waypoint id="waypoint" for="@(.dial li)" forContext="@(.dial ul)" offset="25">
<p:callback event="reached" execute="handleDialWaypoint(ext);"/>
</pe:waypoint>
</h:form>
<script>
/* <![CDATA[ */
function handleDialWaypoint(ext) {
var $active = $(ext.waypoint);
if (ext.direction === "up") {
$active = $active.prev();
}
if (!$active.length) $active.end();
var cssProperty = $active.closest('.dial').data('property');
var cssValue = $active.data('value');
if (cssProperty && cssValue) {
$('.dial-text').css(cssProperty, cssValue);
}
}
/* ]]> */
</script>
</div>
<div class="card">
<h5>Scroll Analytics</h5>
<p>
Waypoints track user engagement and ad views. The articles scroll inside their own box, which is the scroll context
(<code>forContext</code>), and the waypoints are used with <code>p:ajax</code> and <code>p:callback</code>. The <code>offset</code>
<code>'bottom-in-view'</code> is an alias for the function offset of the infinite scrolling demo. Scroll down: each ad turns red when it
comes into view and the server is informed; a message pops up when you reach the end of the articles.
</p>
<style>
.analytics-scroll {
width: 460px;
max-width: 100%;
height: 320px;
margin: 0 auto 0 auto;
padding: 0 10px;
overflow-y: auto;
border: 1px solid var(--surface-border, #ccc);
}
.ad-unit {
padding: 10px;
margin: 16px 0;
border: 1px solid #000;
color: #000;
text-align: center;
height: 40px;
line-height: 40px;
background: #fafad2;
transition: background-color 500ms ease-in-out;
}
.ad-unit.active {
background: #faa7a7;
}
#article-finished {
position: fixed;
z-index: 999;
bottom: 20px;
right: 20px;
padding: 15px;
font-weight: bold;
font-size: 14px;
border: solid 2px;
width: 300px;
transition: right 700ms ease-in-out;
}
#article-finished.hiding {
right: -340px;
}
</style>
<h:form id="formScrollAnalytics">
<p:growl id="growl"/>
<h:panelGroup id="wrapper" layout="block" styleClass="analytics-scroll">
<h:panelGroup id="container" layout="block">
<div class="article">
<h2>Lorem Ipsum Dolor</h2>
<h:panelGroup id="ad1" layout="block" styleClass="ad-unit">
<f:attribute name="analyticsid" value="0166844"/>
I'm an ad! (ID:0166844)
</h:panelGroup>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus xyx rtel supepr sey reror.</p>
<h:panelGroup id="ad2" layout="block" styleClass="ad-unit">
<f:attribute name="analyticsid" value="8675309"/>
I'm an ad! (ID:8675309)
</h:panelGroup>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Test Consectetuer Adipiscing Elit, consectetuer elit, consectetuer adipiscing.</p>
</div>
<div class="article">
<h2>Sit Amet</h2>
<p>Sit Amet habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Test Consectetuer Adipiscing Elit, consectetuer elit, consectetuer adipiscing.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h:panelGroup id="ad3" layout="block" styleClass="ad-unit">
<f:attribute name="analyticsid" value="1702555"/>
I'm an ad! (ID:1702555)
</h:panelGroup>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<h:panelGroup id="ad4" layout="block" styleClass="ad-unit">
<f:attribute name="analyticsid" value="5112346"/>
I'm an ad! (ID:5112346)
</h:panelGroup>
</div>
<div class="article">
<h2>Consectetuer Adipiscing Elit</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Test Consectetuer Adipiscing Elit, consectetuer elit, consectetuer adipiscing.</p>
</div>
<div class="article">
<h2>Aenean</h2>
<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum
vulputate, nunc, cbuiewe dyxyxew Assdle upsula quite dsenda webald, Aksuid sind luidd svbnm
yxcdqw el ijghfdf dklioe otvet nam sendrt Klimprt, second third aplogi beret treidsd ne.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.</p>
<h:panelGroup id="ad5" layout="block" styleClass="ad-unit">
<f:attribute name="analyticsid" value="3334906"/>
I'm an ad! (ID:3334906)
</h:panelGroup>
<p>Aliquam tincidunt mauris eu risus. Donec consectetuer ligula vulputate sem tristique cursus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate
sem tristique. Waypoint eu vulputate magna eros eu erat. Aliquam erat volutpat.
Aliquam tincidunt mauris eu risus. Donec consectetuer ligula vulputate sem tristique cursus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate
sem tristique. Waypoint eu vulputate magna eros eu erat. Aliquam erat volutpat.</p>
</div>
<div class="article">
<h2>Vestibulum</h2>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros
eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
metus sit amet est et sapien ullamcorper pharetra. Aliquam erat volutpat. Nam dui mi, tincidunt
quis, accumsan porttitor, facilisis luctus. Hello said dkrew qwq ncki juewewe, upsum el.</p>
<h:panelGroup id="ad6" layout="block" styleClass="ad-unit">
<f:attribute name="analyticsid" value="0098873"/>
I'm an ad! (ID:0098873)
</h:panelGroup>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri ssev.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri elektron.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
<p>Aliquam tincidunt mauris eu risus. Donec consectetuer ligula vulputate sem tristique cursus.
Donec ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate
sem tristique. Waypoint eu vulputate magna eros eu erat. Aliquam erat volutpat.</p>
</div>
</h:panelGroup>
</h:panelGroup>
<pe:waypoint id="waypoint1" for="@(.ad-unit)" forContext="@(.analytics-scroll)"
offset="'bottom-in-view'" triggerOnce="true">
<p:ajax event="reached" onstart="$(cfg.ext.waypoint).addClass('active')"
listener="#{scrollAnalyticsController.adInView}" update="growl"/>
</pe:waypoint>
<pe:waypoint id="waypoint2" for="container" forContext="@(.analytics-scroll)"
offset="function(){return $(this).closest('.analytics-scroll').height() - $(this).height()}">
<p:callback event="reached" execute="$('#article-finished').toggleClass('hiding', ext.direction === 'up');"/>
</pe:waypoint>
</h:form>
<script>
/* <![CDATA[ */
$(function() {
if (!$('#article-finished').length) {
$('body').append($("<div class='p-widget p-widget-header hiding' id='article-finished'>" +
"Congrats! You have finished reading the articles.</div>"));
}
});
/* ]]> */
</script>
</div>
package org.primefaces.extensions.showcase.controller.waypoint;
import java.io.Serial;
import java.io.Serializable;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.component.ContextCallback;
import jakarta.faces.component.UIComponent;
import jakarta.faces.component.html.HtmlPanelGroup;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.extensions.event.WaypointEvent;
/**
* WaypointController
*
* @author Oleg Varaksin / last modified by $Author$
* @version $Revision$
*/
@Named
@ViewScoped
public class ScrollAnalyticsController implements Serializable {
@Serial
private static final long serialVersionUID = 20120816L;
public void adInView(final WaypointEvent e) {
final UIComponent container = e.getComponent().findComponent("container");
container.invokeOnComponent(FacesContext.getCurrentInstance(), e.getWaypointId(), new ContextCallback() {
@Override
public void invokeContextCallback(final FacesContext fc, final UIComponent component) {
final HtmlPanelGroup panelGroup = (HtmlPanelGroup) component;
final String analyticsId = panelGroup != null ? (String) panelGroup.getAttributes().get("analyticsid")
: "";
final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO,
"Ad with ID: " + analyticsId + " was read", null);
fc.addMessage(null, msg);
}
});
}
}
<h:form id="formInfiniteScrollingOne">
<h:panelGroup id="wrapper" layout="block">
<h1>Infinite scrolling with Waypoint</h1>
<h:panelGroup id="container" layout="block">
<div class="article">
<h2>Lorem Ipsum Dolor</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus xyx rtel supepr sey reror.</p>
</div>
<div class="article">
<h2>Sit Amet</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="article">
<h2>Consectetuer Adipiscing Elit</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed.
Test Consectetuer Adipiscing Elit, consectetuer elit, consectetuer adipiscing.</p>
</div>
<div class="article">
<h2>Aenean</h2>
<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum
vulputate, nunc, cbuiewe dyxyxew Assdle upsula quite dsenda webald, Aksuid sind luidd svbnm
yxcdqw el ijghfdf dklioe otvet nam sendrt Klimprt, second third aplogi beret treidsd ne.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.</p>
<p>Aliquam tincidunt mauris eu risus. Donec consectetuer ligula vulputate sem tristique cursus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate
sem tristique. Waypoint eu vulputate magna eros eu erat. Aliquam erat volutpat.
Aliquam tincidunt mauris eu risus. Donec consectetuer ligula vulputate sem tristique cursus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate
sem tristique. Waypoint eu vulputate magna eros eu erat. Aliquam erat volutpat.</p>
</div>
<div class="article">
<h2>Vestibulum</h2>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros
eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
metus sit amet est et sapien ullamcorper pharetra. Aliquam erat volutpat. Nam dui mi, tincidunt
quis, accumsan porttitor, facilisis luctus. Hello said dkrew qwq ncki juewewe, upsum el.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri ssev.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri elektron.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
</h:panelGroup>
<h:panelGroup id="remoteContent" style="display:none;">
<ui:include src="#{infiniteScrollController.src}"/>
</h:panelGroup>
<p:remoteCommand id="rcom" name="loadRemoteContent" process="@this" update="remoteContent"
actionListener="#{infiniteScrollController.toggleSrc}"
oncomplete="handleLoadStop()"/>
<p:dialog widgetVar="loadingDlg" resizable="false" showHeader="false">
<h:panelGrid columns="2">
<h:graphicImage library="images" name="ajax-loader1.gif"
style="margin-right: 12px; vertical-align: middle;"/>
<h:outputText value="Content is loading..." style="white-space: nowrap;"/>
</h:panelGrid>
</p:dialog>
<h:panelGroup id="footer" layout="block">
<p:divider/>
Copyright, PrimeFaces Extensions, 2013.
<pe:waypoint id="waypoint" widgetVar="waypointWidget"
offset="function(){return $.waypoints('viewportHeight') - $(this).outerHeight()}">
<p:callback event="reached" execute="handleLoadStart(ext);"/>
</pe:waypoint>
</h:panelGroup>
</h:panelGroup>
<script>
/* <![CDATA[ */
function handleLoadStart(ext) {
if (ext.direction == "down") {
PF('waypointWidget').disable();
PF('loadingDlg').show();
loadRemoteContent();
}
}
function handleLoadStop() {
$(PrimeFaces.escapeClientId('formInfiniteScrollingOne:container')).append($(PrimeFaces.escapeClientId('formInfiniteScrollingOne:remoteContent')).children('div.article'));
PF('loadingDlg').hide();
PF('waypointWidget').enable();
}
/* ]]> */
</script>
</h:form>
package org.primefaces.extensions.showcase.controller.waypoint;
import java.io.*;
import jakarta.annotation.PostConstruct;
import jakarta.faces.event.ActionEvent;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
/**
* InfiniteScrollController
*
* @author Oleg Varaksin / last modified by $Author$
* @version $Revision$
*/
@Named
@ViewScoped
public class InfiniteScrollController implements Serializable {
@Serial
private static final long serialVersionUID = 20120810L;
private static final String CONTENT_PATH_DUMMY = "/ui/panel/waypoint/standalone/remoteContentDummy.xhtml";
private static final String CONTENT_PATH_FIRST = "/ui/panel/waypoint/standalone/remoteContentOne.xhtml";
private static final String CONTENT_PATH_SECOND = "/ui/panel/waypoint/standalone/remoteContentSecond.xhtml";
private String src;
@PostConstruct
public void initialize() {
src = CONTENT_PATH_DUMMY;
}
public void toggleSrc(final ActionEvent evt) {
try {
// simulate a long running request
Thread.sleep(1500);
}
catch (final Exception e) {
// Restore interrupted state...
Thread.currentThread().interrupt();
}
if (CONTENT_PATH_DUMMY.equals(src) || CONTENT_PATH_SECOND.equals(src)) {
src = CONTENT_PATH_FIRST;
}
else if (CONTENT_PATH_FIRST.equals(src)) {
src = CONTENT_PATH_SECOND;
}
}
public String getSrc() {
return src;
}
}
<h:form id="formInfiniteScrollingTwo">
<h1>Flickr search results for lolcats</h1>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1395/530815732_591e117af0_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1006/533314156_5a8f3aae47_m.jpg" width="205" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/202/517143876_262ef0223c_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2414/1800544122_cc4f9c1b86_m.jpg" width="208" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2130/2534664596_59887ab28c_m.jpg" width="177" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1342/743809708_6432c78fee_m.jpg" width="223" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1064/771724890_f8fc22a89a_m.jpg" width="240" height="216"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2307/1516071079_682ad620c4_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3119/2699841820_a7ec988c10_m.jpg" width="240" height="133"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1084/650361412_e6acdf5607_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/196/491476118_4f8095b946_m.jpg" width="240" height="193"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1438/533362045_875d36bb5e_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/209/499409303_bfe28ec063_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3195/2698016803_0f92be091f_m.jpg" width="240" height="178"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/219/456826183_a37d5a1e73_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2016/1544134756_8f41c08a2e_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3291/2541619169_30dc45d902_m.jpg" width="240" height="161"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1247/1057586225_c6fc44b7a0_m.jpg" width="66" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2403/1590736702_99cdaff655_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1046/529503777_60bc65633c_m.jpg" width="240" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1074/528715033_3a6809df8b_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2386/2514987207_5eac7e98af_m.jpg" width="144" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/238/517166948_5c1caac82f_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1132/549310317_b4b74910a4_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/230/484654574_f25e01962a_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1115/703042270_bb5662cf57_m.jpg" width="240" height="192"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/223/513554360_11ccb2b58d_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3289/3019815380_74081c467d_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/167/494015278_2a010d8689_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3124/2479092042_2f412133b6_m.jpg" width="199" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2676/4135411790_eb1cd29a44_m.jpg" width="240" height="189"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1052/525165323_9917220b13_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1413/541521527_267b7197e8_m.jpg" width="240" height="136"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/223/476230230_05606ebd7a_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/184/497710545_351b0d53de_m.jpg" width="240" height="181"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1142/863528833_9e06871d9c_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.static.flickr.com/2264/2805230477_d791b064db_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1087/528722885_6448cdf9df_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.staticflickr.com/2166/2237130234_8a51578093_m.jpg" width="240" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/218/506494645_da93753bd4_m.jpg" width="240" height="103"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1212/1399164139_9919c0cafc_m.jpg" width="240" height="167"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1357/772708512_4d5356939f_m.jpg" width="240" height="136"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/206/520716722_5ba70b2eab_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.staticflickr.com/2366/2237130178_2b21263612_m.jpg" width="220" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.staticflickr.com/2062/2236339819_a75f24fbbb_m.jpg" width="240" height="226"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/230/491252713_9ff762b4c9_m.jpg" width="240" height="160"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3152/2543943607_74915845f2_m.jpg" width="168" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.staticflickr.com/2407/2237131720_c09d82f036_m.jpg" width="218" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/211/491252717_8b64f5cb65_m.jpg" width="240" height="195"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1052/1337430349_12d5e43749_m.jpg" width="181" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/224/491252705_279d00d931_m.jpg" width="240" height="160"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1019/532727518_9757868b18_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1175/1230424000_0f918092c5_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm1.static.flickr.com/171/491252707_0b2a3a0788_m.jpg" width="240" height="160"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.staticflickr.com/2260/2153445669_025fce5512_m.jpg" width="180" height="240"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.staticflickr.com/1074/528715033_3a6809df8b_m.jpg" width="240" height="218"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm3.staticflickr.com/2018/2237132312_ca686fcfa2_m.jpg" width="240" height="234"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3295/3151627503_b7e9f2b6ca_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm2.static.flickr.com/1275/644620280_25f2c0ca61_m.jpg" width="240" height="180"/>
<img alt="image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
data-src="http://farm4.static.flickr.com/3133/3145677692_79763f61a5_m.jpg" width="240" height="180"/>
<pe:waypoint id="waypoint" for="@(img[data-src])" offset="'100%'">
<p:callback event="reached" execute="handleWaypoint(ext);"/>
</pe:waypoint>
<script>
/* <![CDATA[ */
function handleWaypoint(ext) {
var img = $(ext.waypoint);
// show a smooth animation
img.css('opacity', 0);
// change src
img.attr('src', img.attr('data-src'));
// note: call .load() on cached images is not reliable.
// better to use https://github.com/desandro/imagesloaded
img.on("load", function(){
img.animate({ opacity: 1 }, 500);
// remove data-src
img.removeAttr('data-src');
// destroy waypoint
img.waypoint('destroy');
});
}
/* ]]> */
</script>
<style>
img {
border: 0;
padding: 1px;
margin: 40px;
}
</style>
</h:form>
<h:form id="formStickyElements">
<h:panelGroup id="wrapper" layout="block">
<h1>Sticky Menubar and "Back to top" Link</h1>
<h:panelGroup id="main-nav-holder" layout="block">
<p:menubar id="menubar">
<p:menuitem value="File" url="#" icon="pi pi-file"/>
<p:menuitem value="New" url="#" icon="pi pi-user-plus"/>
<p:menuitem value="Edit" url="#" icon="pi pi-pencil"/>
<p:menuitem value="Help" url="#" icon="pi pi-question-circle"/>
<p:menuitem value="Actions" url="#" icon="pi pi-cog"/>
<p:menuitem value="Quit" url="#" icon="pi pi-times"/>
</p:menubar>
</h:panelGroup>
<h:panelGroup id="container" layout="block">
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet
est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit
amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>Sit Amet</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<h1>Consectetuer Adipiscing Elit</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div>
<h1>Aenean</h1>
<p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
nunc. Adid habitant morbi tristique senectus et netus et malesuada, ghrer solid base el dcdw.</p>
<p>Aliquam tincidunt mauris eu risus.</p>
</div>
<div>
<h1>Vestibulum</h1>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique
cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>Sit Amet</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<h1>Consectetuer Adipiscing Elit</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div>
<h1>Aenean</h1>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Aliquam tincidunt mauris eu risus.</p>
</div>
<div>
<h1>Vestibulum</h1>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique
cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
<div>
<h1>Lorem Ipsum Dolor</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est
et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet,
wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus
faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,
tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h1>Sit Amet</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div>
<h1>Consectetuer Adipiscing Elit</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div>
<h1>Aenean</h1>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Aliquam tincidunt mauris eu risus.</p>
</div>
<div>
<h1>Vestibulum</h1>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique
cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
</h:panelGroup>
<p:commandButton id="topLink" type="button" value="TOP" icon="pi pi-angle-up" styleClass="top hidden"
title="Back to top" onclick="$('html, body').animate({scrollTop: 0}, 'fast');"/>
</h:panelGroup>
<pe:waypoint id="waypoint1" for="wrapper" offset="'-100%'">
<p:callback event="reached" execute="$(PrimeFaces.escapeClientId('formStickyElements:topLink')).toggleClass('hidden', ext.direction === 'up');"/>
</pe:waypoint>
<pe:waypoint id="waypoint2" for="main-nav-holder">
<p:callback event="reached" execute="$(ext.waypoint).toggleClass('sticky', ext.direction === 'down');"/>
</pe:waypoint>
<style>
#formStickyElements\:wrapper {
width: 560px;
margin: 0 auto;
}
#formStickyElements\:menubar {
width: 560px;
}
.sticky #formStickyElements\:menubar {
position: fixed;
top: 0;
}
#formStickyElements\:container {
margin-bottom: 20px;
}
.top {
position: fixed;
right: 20px;
bottom: 20px;
font-size: 14px;
box-shadow: 0 0 15px 1px #808080;
}
.top.hidden {
display: none;
}
</style>
</h:form>
<div class="article">
<h2>Vestibulum One</h2>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros
eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
metus sit amet est et sapien ullamcorper pharetra. Aliquam erat volutpat. Nam dui mi, tincidunt
quis, accumsan porttitor, facilisis luctus. Hello said dkrew qwq ncki juewewe, upsum el.
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi zuuiui gf.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri ssev.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri elektron.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
<div class="article">
<h2>Vestibulum Second</h2>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros
eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
metus sit amet est et sapien ullamcorper pharetra. Aliquam erat volutpat. Nam dui mi, tincidunt
quis, accumsan porttitor, facilisis luctus. Hello said dkrew qwq ncki juewewe, upsum el.
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi zuuiui gf.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri ssev.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi tri elektron.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>