Scroll dynamic panel content on click

advanced-prototyping

#1

Hello,
does anybody now how to scroll the dynamic panel content initialising it by clicking the button outside of dynamic panel? Let’s assume that we have table inside dynamic panel with horizontal scroll visible. I have two buttons outside of dynamic panel: “Move left” and “Move right”. Clicking each of the buttons moves scrolls the table by one column either left or right. I would be thankful for any suggestions how to do it.

Regards,
Maciek


#2

This is possible, yes. Basically, when the Move Left button is clicked, your OnClick code will move the table to the right (assuming the user intent is to see what is further to the left) and visa-versa for the Move Right button. The dynamic panel (dp) containing the table must be set to a fixed size (uncheck the Fit To Content checkbox in the Inspecor Pane or the right-click menu for the dp) so it will act as a viewport mask.

You can either move a fixed amount, like 20 px, or try to snap to a column edge if you know the width of your columns. specifically the columns just to the left and right of the visible table area (which is defined by the width of your dp.) If all your columns are the same width then that is how far you move your table. You can dynamically determine the column widths depending on how the table is represented/created. Is it an actual Table Widget, did you create it with a Repeater Widget, is it in an Inline Frame Widget, Google Chart, hand-built, etc.?

Here is a quick demonstration: demoTableMove.rp (67.0 KB)


#3

I have a similar issue but the content in my Dynamic Panel is a bunch of labels and boxes - not anything as neat as a table. I would like to scroll the contents of the Dynamic Panel when a person clicks a scroller image underneath the Dynamic Panel (it’s not inside it)


#4

Same basic approach. You would just need to select all of your content and create a group or “convert” to a dynamic panel (your preference.) Place it in a fixed-size dynamic panel (which will act like a mask or viewport window) and move it with your external button (scroller image) for a scrolling effect. Play around with how much to move the content per click, and play around with animation (linear, ease in, etc) and timing until it feels right. You can also use the OnMouseDown event to scroll continuously.

When you move your group or panel (of contents) use boundaries to limit how much it can move. Typically when “scrolling” vertically, you set a top boundary of “less than or equal to 0” and a bottom boundary of “greater than or equal to [[LVAR1.height]]” where LVAR1 is a local variable pointing to the outer (mask) dynamic panel.


#5

Thanks. All my content is in fixed size a Dynamic Panel. Is there a Scroll method I can call for the Dynamic Panel to scroll the contents vertically?


#6

To scroll remotely, via another widget or event (like a key press or scroll wheel) you need to move the inner panel using the Move action. You can also provide “direct scrolling” by “showing scrollbars as needed” (right click on the outer dynamic panel to find this option in the context menu.)

If you can post your .rp file (RP8, as I don’t yet have RP9) I can show you a solution.