waypoint/stickyelements problem

Community Driven Extensions Project
Post Reply
cibo
Posts: 20
Joined: 12 Jul 2012, 11:13

31 Oct 2012, 12:22

Hi,

Hello,

I try to build just to waypoint.
But it does not work! What am I doing wrong?
Here is the code.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>Simple JSF Facelets page</title>
</h:head>

<h:body>
    <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="ui-icon-document"/>
                <p:menuitem value="New" url="#" icon="ui-icon-contact"/>
            </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
                </p>
            </div>
          .....
        </h:panelGroup>

    </h:panelGroup>

    <pe:waypoint id="waypoint2" for="main-nav-holder">
        <pe:javascript event="reached" execute="$(ext.waypoint).toggleClass('sticky', ext.direction === 'down');"/>
    </pe:waypoint>

    <h:outputStylesheet id="waypointCSS">
        #wrapper {
            width: 560px;
            margin: 0 auto;
        }

        #menubar {
            width: 560px;
        }

        .sticky #menubar {
            position: fixed;
            top: 0;
        }

        #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;
        }
    </h:outputStylesheet>
</h:body>

</html>

Can someone help me?

Cheers!
Primefaces: 3.4,Primefaces Extensions 0.6.1, Mojarra: 2.1.8, Glassfish 3.1.2, Gentoo 64Bit, Intellij IDEA 13

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

31 Oct 2012, 16:11

Hi,

Can you write something in execute, e.g. execute="alert('Waipoint reached')" and look if execute is called?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

31 Oct 2012, 16:13

By the way, why do you have

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?

Simple write

Code: Select all

<!DOCTYPE html>
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

cibo
Posts: 20
Joined: 12 Jul 2012, 11:13

31 Oct 2012, 16:25

Hi,
thanks for the answer!

yes and yes!

I have the example 1:1 from schowcase.

Do you have another tip?

Cheers
Primefaces: 3.4,Primefaces Extensions 0.6.1, Mojarra: 2.1.8, Glassfish 3.1.2, Gentoo 64Bit, Intellij IDEA 13

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

31 Oct 2012, 19:08

No ideas then. If you have the page 1:1 with the showcase then it should work. Because it works in the showcase ;) Please try to find difference, source code is here http://code.google.com/p/primefaces-ext ... e/checkout.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests