0

I have a component with in a page that shows paginated search results (). Instead I am looking for a scrollable pagination (eliminating the need to click next>). I have googled for several hours, I am not really an expert in Jquery/Javascript. Can some one point me in the right direction to achieve my goal.

Chandrashekar
  • 61
  • 1
  • 5
  • this will definitely be a 'roll your own' type thing, first find the javascript to do it, then integrate with tapestry. – pstanton Apr 27 '12 at 20:13
  • I rolled my own using a jquery scrollbar plugin. I thought it wud be difficult. But at the end, it seemed not that difficult. Thanks for your comment. – Chandrashekar May 09 '12 at 11:33

1 Answers1

1

There is a ZoneUpdater mixin, which can register to any javascript event and updte a tapestry zone when it is triggered.

I do not recommend to hook it to the scroll event (because this one is called very often). However, you can append it to ANY element on ANY event and just trigger the event when you want:

$('foo').simulate('click');

or you give the zoneupdater a specific prefix, and call it directly using

<t:any id="mytrigger" t:id="mytrigger" t:mixin="zoneupdater" t:prefix="mytrigger">

mytriggersZoneUpdater.updateZone.bindAsEventListener(mytriggersZoneUpdater);

to onserve the scrolling you could also use a prototype script

Event.observe(window, 'load', function() {
    Event.observe(window, 'scroll', function(evt){
        // what the y position of the scroll is
        var yPos = document.viewport.getScrollOffsets().top;

        var referenceItem = $('myScrollTriggerReferenceItem').cumulativeOffset().top;
        if( yPos > referenceItem ){
        /* the scroll point is below a predefined element, so let's trigger the update */
            //$('mytrigger').simulate('click');
            // OR
            //mytriggersZoneUpdater.updateZone.bindAsEventListener(mytriggersZoneUpdater);
        }
    });
}
dube
  • 4,377
  • 2
  • 20
  • 36