Infinite scrolling

nicetohave
#1

Hi there, altough it is somehow possible, a nice addition would be infinite scrolling

#2

what makes you cant do it now?

#3

well ome solutiom is to create a paging and on click to reveal all. What would you suggest?

#4

you can use data view and a button and some inview animations
will that work?

1 Like
#5

have to test it. Thank you

#6

I have done it on this page … is this the kind of thing you are thinking of in theory?

https://lawryk.ca/posters.php

1 Like
#7

Yes it could be, the only difference is that I would like data to load on scroll. In your example the are already loaded and you display them with an inview animation. This of course is very cool and creates the result I am looking for. The only ‘issue’ is that I would prefer to load them from the database while scrolling.

I guess this could be a dynamic server action, equal to ‘success’ , ‘done’, ‘error’. Maybe an ‘onscroll’ server action could work.

Thank you for your demo

1 Like
#8

Good looking site @brad, and very nice looking posters too, quite the designer aren’t you…

1 Like
#9

Thanks @psweb, theatre and theatre posters is my therapy. With out theatre I’d be in a padded room and a jacket with very long sleeves wrapped around me. lol

2 Likes
#10

Your art work @brad, if so well impressed

#11

Thanks @Hyperbytes, live theatre is my second life.

#12

Is there any new development on this feature request? Using paged query, I’m thinking of updating Limit value on scroll. I think it should work but I’m not sure yet how and where could I trigger scroll event to run the server connect.

#13

Update: So I have successfully implement it by updating the current paged query Limit + x number onscroll (when window height = document height). Anyway I still vote this to be implemented directly in Wappler via ui. Cheers :ok_hand:

4 Likes
#14

That is indeed the way to do it. Maybe you can share a guide for other users how this can be done. It will be very helpful.

1 Like
#15

Well, there are few ways to achieve it. Here is one of them;

$( window ) . scroll( function () {
            if ( $( window ) . scrollTop() + $( window ) . height() == $( document ) . height() ) {
                $( "#application_scroll" ) . trigger( "click" );
            }
        } );

then

<button id="application_scroll" dmx-on:click="vessel_paged.load({limit: vessel_paged.data.paged_vessel.limit + 10})"></button>

Perhaps App Connect Browser extension can replace the jquery to run the server connect onscroll when the page reaches % viewport?

1 Like
#16

Thanks @transcoderm. This solution works very well.

If this feature were incorporated into Wappler, it would be useful to have an option to include an offset so the scrolling starts a little before the bottom of the page (eg where there are large footers).

#17

How about trying this out. It is simpler and will give you some offset. Just change the amount of - 300 to value that you need.

if ( $( window ).scrollTop() - 300 ) {
                $( "#application_scroll" ).trigger( "click" );
            }

Anyway I still wish this can be done fully with App Connect.

#18

Thanks again. I realise I can tweak the code to get the result. I thought it worth mentioning in case the feature is added to Wappler but doesn’t have this type of flexibility built in.