Infinite Scrolling

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

Infinite Scrolling

jrick
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
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

Paul DeBruicker
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
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

jrick
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
> &lt;http://www.sitepoint.com/jquery-infinite-scrolling-demos/&gt; 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
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

Redtexture - Mark Jones
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
>> > &lt;http://www.sitepoint.com/jquery-infinite-scrolling-demos/&gt; 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
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

jrick
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,
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
>> > &lt;http://www.sitepoint.com/jquery-infinite-scrolling-demos/&gt; 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

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

Sabine Manaa
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
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

Paul DeBruicker
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




Sabine Manaa wrote
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
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

Sabine Manaa
Hi Paul,

thanks a lot. I will work on it and come back if I have more questions,

Regards
Sabine
Reply | Threaded
Open this post in threaded view
|

Re: Infinite Scrolling

Sabine Manaa
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: ''