Infinite Scroll Progress Indicator

rp-7
newbie-question

#1

Hello All,

I am currently working on implementing a progress indicator to an infinite scroll setup. I have a content ticker set up with a progress bar underneath it that slowly fills as you scroll down the page.

Where I am having issues is two fold:

  1. Defining specifically when that progress bar starts to fill instead of it automatically starting as soon as you scroll.

  2. Resetting the progress bar to 0 when the user scrolls to the next article.

I have the RP file attached and a preview URL below. Any help would be appreciated. Thanks!

Link
http://s8ct3s.axshare.com

RP File
MultiScroll-ArticleIndicator1.rp (92.9 KB)


#2

Hi Nico_Giancarlo,

After poking around your file, it looks like you can reset the progress bar to 0 for each article by adding a couple of additional conditions and doing some extra math.

To start, you’ll want to add another condition to your first “Show Blue Progress Bar” case of the “OnWindowScroll” event. This condition will check if the value of Window.scrollY is less than the bottom of the Article 1 dynamic panel, so that the entire case fires only when Window.scrollY is both greater than Article1.Top and less than Article1.Bottom. This restricts the “Set Size” action in this case to only fire when scrolling through Article 1:

After that, you’ll want to create an identical case (you can just copy and paste the first case), except this time changing the conditions and actions to target the Article2 dynamic panel wherever the Article1 panel was originally targeted. Note that you’ll need to change the local variables inside the functions as well.

Then in equation of the Set Size action of this new case, subtract the total height of the widgets above Article2 (which in this case, is 1348) from Window.scrollY before dividing it by Article2’s height. This will effectively reset the Window.scrollY value, which in turn will reset the size of the blue progress bar when scrolling through Article 2:

I’ve attached an edited version of your file with these changes implemented, adding an extra “Article3” to the bottom to help better show what this would look like. As for defining when the progress bar would start to fill, you should be able to do this by adjusting the condition for when the Set Size action is initially triggered (e.g. “if Window.scrollY is greater than…”).

MultiScroll-ArticleIndicator_edited.rp (94.0 KB)

I hope this helps! Please let me know if you have any questions.


#3

This is great. Works like a charm. Good reference for me going forward. Thanks Simon.


closed #4

unlisted #5