Infinite Scrolling
Locked
 
|
I'm implementing a blog with many posts. I'd like to implement infinite scrolling so that only a few posts get loaded initially and then subsequent posts get loaded once the person scrolls to the bottom of the page. I'd like to use AJAX prepend to make this happen.
Has anyone implemented something similar? Is there a good way to trigger a seaside ajax call based on an element appearing on screen or a scroll event reaching near the bottom? Cheers, Jeff _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
I made an JQWidgetBox endless scroll widget a while ago, but never shared it I guess. I just uploaded it to Smalltalkhub. see: http://smalltalkhub.com/#!/~Seaside/JQueryWidgetBox
Its a plugin for https://github.com/fredwu/jQuery-Endless-Scroll I'm not sure if/how the Widget is out of sync with the JS code in the git repo but its a start. I used it like this: renderEndlessScroll: html with: aRequest with: id html script: (((html jQuery id: id) endlessScroll) fireDelay: 5000; fireOnce: true; bottomPixels: 850; insertAfter: '.results:visible:last'; visible: '#' , id; callback: (html jQuery ajax script: [ :s | s << (s jQuery class: 'loader') show. s << (s jQuery class: 'results:visible:last') replaceWith: [ :h | | moreItems | moreItems := self getMoreResults: aRequest. self renderMoreItems: moreItems from: aRequest at: id on: h ]. s << (s jQuery class: 'shown:visible') replaceWith: [ :h | (h span) class: 'shown'; with: [html strong: aRequest results oldResults size asStringWithCommas ] ] ]))
|
|
|
Cool. Thanks for sharing. On Mon, Apr 27, 2015 at 7:35 PM Paul DeBruicker <[hidden email]> wrote:
I made an JQWidgetBox endless scroll widget a while ago, but never shared it _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
Re: Infinite Scrolling
|
|
Commentary on Infinite Scrolling,
and the better and worse varieties of implemetation. Hacker News - April 22, 2015 "Ask HN: Please stop making infinite scrolling websites" https://news.ycombinator.com/item?id=9416017 On Tue, Apr 28, 2015 at 10:08 AM, J.F. Rick <[hidden email]> wrote: > Cool. Thanks for sharing. > > On Mon, Apr 27, 2015 at 7:35 PM Paul DeBruicker <[hidden email]> wrote: >> >> I made an JQWidgetBox endless scroll widget a while ago, but never shared >> it >> I guess. I just uploaded it to Smalltalkhub. see: >> http://smalltalkhub.com/#!/~Seaside/JQueryWidgetBox >> >> Its a plugin for https://github.com/fredwu/jQuery-Endless-Scroll >> >> I'm not sure if/how the Widget is out of sync with the JS code in the git >> repo but its a start. >> >> >> I used it like this: >> >> >> renderEndlessScroll: html with: aRequest with: id >> >> html >> script: >> (((html jQuery id: id) endlessScroll) >> fireDelay: 5000; >> fireOnce: true; >> bottomPixels: 850; >> insertAfter: '.results:visible:last'; >> visible: '#' , id; >> callback: >> (html jQuery ajax >> script: [ >> :s | >> s >> << (s jQuery class: 'loader') show. >> s >> << (s jQuery class: 'results:visible:last') >> >> replaceWith: [ :h | | moreItems | >> >> moreItems := self getMoreResults: aRequest. >> >> self renderMoreItems: moreItems from: aRequest at: id on: h ]. >> s >> << (s jQuery class: 'shown:visible') >> >> replaceWith: [ :h | >> >> (h span) >> >> class: 'shown'; >> >> with: [html strong: aRequest results oldResults size >> asStringWithCommas ] ] ])) >> >> >> >> >> jrick wrote >> > I'm implementing a blog with many posts. I'd like to implement infinite >> > scrolling >> > <http://www.sitepoint.com/jquery-infinite-scrolling-demos/> so >> > that only a few posts get loaded initially and then subsequent posts get >> > loaded once the person scrolls to the bottom of the page. I'd like to >> > use >> > AJAX prepend to make this happen. >> > >> > Has anyone implemented something similar? Is there a good way to trigger >> > a >> > seaside ajax call based on an element appearing on screen or a scroll >> > event >> > reaching near the bottom? >> > >> > Cheers, >> > >> > Jeff >> > >> > _______________________________________________ >> > seaside mailing list >> >> > seaside@.squeakfoundation >> >> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside >> >> >> >> >> >> -- >> View this message in context: >> http://forum.world.st/Infinite-Scrolling-tp4821669p4822313.html >> Sent from the Seaside General mailing list archive at Nabble.com. >> _______________________________________________ >> seaside mailing list >> [hidden email] >> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > > > _______________________________________________ > seaside mailing list > [hidden email] > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside > seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
|
Yep, infinite scrolling can be a bad idea. That said, you really need it if you are going to do an updating feed, like Facebook. Cheers, Jeff On Tue, Apr 28, 2015 at 1:32 PM Mark RD Jones <[hidden email]> wrote:
Commentary on Infinite Scrolling, _______________________________________________ seaside mailing list [hidden email] http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside |
|
In reply to this post by Paul DeBruicker
Hi Paul,
thanks for sharing. I try to use it. I think there is a typo in method ^'endessScroll' ==> 'endlessScroll' Could you please send me a piece of code what your >> self renderMoreItems: moreItems from: aRequest at: id on: h does? Regards Sabine |
|
|
Hi Sabine,
Oh you're right that is an integral part. Sorry I left it out earlier. It looks like this: renderMoreItems: someResults from: aRequest at: anId on: html | itemsToRender | itemsToRender := self checkMoreResultsComplete: someResults. itemsToRender isNil ifTrue: [ html script: (((html jQuery id: anId) registeredInterval) delay: 2 seconds; func: (html jQuery ajax script: [ :s | s << ((s jQuery class: 'results:visible:last') replaceWith: [ :h | self renderMoreItems: someResults from: aRequest at: anId on: h ]) ])). (html div) class: 'results'; with: [ html heading level2 with: [ html render: 'waiting for results .... '. html image resourceUrl: '/img/icon-loader.gif' ] ] ] ifFalse: [ html script: (html jQuery id: anId) registeredInterval. itemsToRender := itemsToRender copy select: [ :each | self filterItem: each ]. itemsToRender isEmpty ifTrue: [ self renderNoMoreItemsError: html ] ifFalse: [ self renderItems: itemsToRender on: html self renderEndlessScroll: html with: aRequest with: anId ] ] The someResults object is a future from http://www.squeaksource.com/Futures.html. The #registeredInterval script is just a throwaway script that creates creates a js setInterval and stores it in the DOM to poll whether the future has results or not. Sending it with no arguments clears the interval. If I were writing it again I'd just use setTimeout to do the polling. But thats all orthogonal to your question. Hope this helps Paul
|
|
|
Hi Paul,
thanks a lot. I will work on it and come back if I have more questions, Regards Sabine |
|
|
This post was updated on .
Perhaps somebody is looking for it, too. I ended with the following solution (I add several comments to explain). Comments are welcome!
renderLayoutContentWith: aBlock on: html "I use material design lite and add the scroll event to the layout content element" html mdlLayoutContent onScroll: (html jQuery ajax callback: [ :value | "this part in >>callback:value: gets the scroll event from the view" "there are several views in here, not all use endless scrolling" self currentView hasEndlessScrolling ifTrue: [ value = 'true' ifTrue: [ self session endlessScrollActive: true ] ] ] value: (html javascript add: (JSStream new "if theEnd is 'visible', scroll!" nextPutAll: ' $(window).scrollTop() + $(window).height() > $(''#theEnd'').offset().top'; yourself))) , (html jQuery ajax script: [ :s | | theNextDomainObjects | self session endlessScrollActive ifTrue: [ "if scroll is active, get next domain objects to display" theNextDomainObjects := self currentView nextCurrentDomainObjects. theNextDomainObjects isNil ifFalse: [ theNextDomainObjects do: [ :eachDomainObject | "append the additional domain objects to the existing ones" s << (s jQuery: self currentView gridViewID asSymbol) append: [ :h | self currentView editTileObject: eachDomainObject on: html ] ] ] ]. "no longer active" self session endlessScrollActive: false. "This is for material design lite" s << (JSStream on: 'componentHandler.upgradeDom();') ]); with: aBlock. "important to keep width and height of the end otherwise scroll does not work" html div id: 'theEnd'; style: 'width: 10px;height: 10px'; with: '' ================== This is added several months later: the solution above created a request on the server for each scroll event. I changed it like this which is muchh better: html mdlLayoutContent onScroll: (html jQuery ajax condition: (JSStream new nextPutAll: ' $(''#RKA'').attr(''className'') == ''RKAMobileTripsView'''); script: [ :s | | theNextDomainObjects | theNextDomainObjects := self currentView nextCurrentDomainObjects. theNextDomainObjects isNil ifFalse: [ theNextDomainObjects do: [ :eachDomainObject | s << (s jQuery: self currentView gridViewID asSymbol) append: [ :h | self currentView editTileObject: eachDomainObject on: html ] ] ]. s << (JSStream on: 'componentHandler.upgradeDom();') ]); with: aBlock. html div id: 'theEnd'; style: 'width: 10px;height: 10px'; with: '' |
«
Return to Seaside General
|
1 view|%1 views
| Free forum by Nabble | Edit this page |