How to create the POST SLIDER on the right side of the Bubble forum?

Need help
1

I just can’t figure out how to make the post slider that’s on the right side of the forum. Like this one:
image

I’m making something a little different but similar to how this works. I’ve been racking my brain for hours trying to figure it out but no luck.

What makes the most sense is something like:

Set state when current cell’s post is visible - but you can’t use “when an element is visible” for a workflow.

Any ideas?

2

But you can numerically

3

Hmmm… interesting challenge. Allow me to let out a few brain farts. I have never tried any of these ideas, I just like the mental challenge.

  1. Maybe using the draggable plugin? But I cannot imagine this being easy. @jdiaz has a great post which you could use for inspiration: Fluid transitions, are they possible on bubble?

  2. Could you lay 2 progress bars on top of each other for the visual and then lay a repeating group on top of all that with the page numbers?

  3. Maybe someone has already made this into a plugin? Otherwise, I would wonder: isn’t Discourse open source so couldn’t you just fork that code and build a plug-in?

4

Thank you so much for taking the time to think a bit about this problem. I like mental challenges too.

My actual use case is for a reference guide - when you scroll down the page, the repeating group on the left side changes color to show where you are on the page. This is shown in the Google docs gif below (notice the left side menu changes color when focus is over that part of the document)

Example

Have you built anything similar to this with Bubble? Any new thoughts on how to achieve it? I can change the color of the left side text when clicking an element, but can’t automatically change it when scrolling or when the text is in focus.

5

You could try this:

Use slider input

  • min value 1
  • Max value: number of replies
  • Vertical orientation

Create a workflow action: When this slider value is changed, scroll to entry for Repeating group’s list of replies:item #slider value

6

So, I spent way too much time on this problem, but I think that I got the first major step worked out. I had to use some Javascript in order to get the entire page height and to calculate the X and Y coordinates for the cells in the repeating group. In a nutshell, I used javascript to get the start and end points for each cell and then used the scrolling position to update the cell.

The slider is made with a floating group, a shape, and a drag/drop group. Right now, it does not work if you drag it, but it moves with scrolling and updates according to cell. There is a popup in the editor that I used to do some calculations and then the workflows use that to determine how far to move the slider.

You can use the same concept to highlight text depending on scroll position, just have to get the same information and adjust according. Take a look below and let me know if you have any questions.

Editor: https://bubble.io/page?type=page&name=slidable_menu&id=bsi-forum-app&tab=tabs-2

Demo: https://bsi-forum-app.bubbleapps.io/version-test/slidable_menu

7

This topic was automatically closed after 70 days. New replies are no longer allowed.