[Plugin Announcement]: Scrollspy

HEY!!!
THANK YOU!!!
it works like a charm!!!

1 Like

Hello!

I will be very glad if you can help me with my question. I’m using a mobile app plugin to create a spinning list for date pickers (I’m attaching a photo). This is a list that scrolls around. The list is a vertical scrolling repeating group that only shows 3 lines

DataTimeApp

My problem is that the list is a small repeating group that can be in any position on the screen (top, bottom, middle) when the user starts to select a date in it. However, in the plugin, you need to enter the percentage of the page height on which it will read information. This is a problem, because the percentage will always be different. Is there any way to bind plagin to the repeating group itself and read 50% of it, regardless of where it is on the page at the moment.

I tried to solve the problem in another way: I added a repeating group to the floating group and attached it to the top of the page in the hope that then I could read the necessary information. However, the height of the screen on the phone is different for everyone, I cannot track it. In this case, it would be very convenient to enter not percentages, but pixels from the top of the page. The pixels will always be the same because this is a floating group attached to the ceiling.

So, I tried to approach this problem in different ways, but unfortunately I could not cope with it. Perhaps you can help me? I will be very grateful for any help!

Awesome!! Happy to hear that!! :fire:

This is a great plugin, thanks Sam!

The one thing I haven’t been able to figure out is if it’s possible to use scrollspy on a vertical repeating group that is nested inside another vertical repeating group. I haven’t been able to make it work so far. Is it possible?
Thanks!

Thank you for your feedback!
The Scrollspy element receives an id of the repeating group:

Therefore it will not be possible to inject scrollspy into each item of the RG.

1 Like

Hi, I just purchased the plugin and I am using the Scrollspybyclassname. However, the current id is always empty.

Here you can see my settings:

I would appreciate any help. Thanks!

Hi there,
From your example it looks like there is no scroll on the page and that’s why the sections are not triggered. I’d suggest you to increase the page’s height and add your “Scrollspy current id” label into a fixed-position box so it always will be visible on the screen

Hi @BubbleSam

Thank you for the plugin. Would really appreciate it if it worked. Somehow it doesn’t for me.

Does the page have to be responsive?

(Horizontal Scrollspy is on the page. Data source, Element ID and percentage are all correct. Content is image) Here is a video of my editor: https://we.tl/t-15W2JPRBGa

Would appreciate if you helped me out here.

Hi there,
Did you correctly config the Repeating Group’s id?

Yes, the RG ID and the ScrollSpyElement ID are both “rgviewservice” so this shouldn’t be the problem.

Here is another video where I replicated the issue on another page:
Video: SwissTransfer.com - Send large files securely and free of charge

@BubbleSam Do you have any feedback? Would love to get it to work!

Hi there,
Are you using the latest Bubble’s template engine? If not, you should downgrade your extension to a previous version that supports the old engine.

Also, are you able to replicate one of our demo applications?

Yes, just checked I’m using the latest bubble engine.

No unfortunately not. Were you able to check out the video I sent? Maybe you spot something I’m doing wrong…

On the video I don’t see anything that you did wrong but it’s not obvious to spot an error that way :slight_smile:
Could you literally replicate one of our demo apps and then replace the mock data by yours?

I upgraded my page to responsive and it immediately worked!

This was the issue. Your latest update of the plugin must have made it work with responsive pages but broke the ability to work with fixed width pages…

Anyhow: Thank you for helping me out!

1 Like

Hi @BubbleSam is it possible that the plugin doesn’t work in wrapped apps?

Best, Lars

Hi, what do you call a “wrapped app”? Are you using an iframe?

Hi @BubbleSam

I just purchased the plugin and it is fantastic, clear documentation and examples in the Bubble Editor. I am still having a hard time figuring out how to implement it for my use case so I wanted to see if perhaps you could guide me in the right direction.

Basically, I have a video that is full screen running through the VideoJS plugin and I would like for it to play when a user scrolls down the page and then stop when the scrolling stops. And then if the user resumes scrolling then it should start playing again, etc. So the playback should be animated and interactive but I can’t quite get this setup.

Any help would very much appreciated.

Hi there! Thank you for your feedback! :slight_smile:
I think you can wrap your video into a group with a unique ID.
Workflow: When scroll spy’s current_id equals to Group ID then resume the video.