ScrollTo within Dynamic Panel

#1

I’d like to have a button that when clicked will scroll to a specific spot within a separate dynamic panel.

The dynamic panel content is larger than the panel viewport.

I’ve tried Scroll, which seems to scroll the whole page.

I’ve also tried ‘move’, which has promise, but I’m not sure how to dynamically figure out how to move to the right location from an arbitrary point.

See this video for more explanation: https://youtu.be/so-yKG6Fwso

Thanks!

#2

Yes, the Scroll to Widget applies to the entire page, not any widgets therein. You cannot dynamically scroll a dynamic panel via an action, but the user can scroll a dynamic panel via scrollbar, scroll-wheel on a mouse, or via touch in the mobile previewer, but that does not actually move the location of any content within the dynamic panel–all your widget (x, y) locations stay the same.

From your video, it looks like you are moving your map content around via the Dragged event and Move action, which makes sense for a dynamic panel. So, you’ll want to use the Move action for specific locations, resetting, etc. I’ve found it is best to use nested dynamic panels for things like this, rather than grouped widgets because there are bugs in the way location properties of widgets are handled in groups. Calculating the x and y coordinates of things can be tricky and it can help to just hand sketch some “keyframe” states to think through what math is needed. Here is a quick demo of moving to the location of a widget like you have in your video. The math for this is pretty simple: the star widget is at a fairly random location relative to the background image (what would be your map) but regardless of where it is, I can snap the content so that it is at the upper-left of the “mask” dynamic panel (my panel viewport) by moving all the content to [[-star.x]] and [[-star.y]] as that is its “offset location” relative to the background image. So, if I were to move all the content to (0, 0) it would be at the upper-left of the background image, right? If the star is at (50, 100) within the “content” dynamic panel–with the image at (0, 0)–then I would need to move the “content” panel to (-50, -100) to get the star to be in the upper-left of the (parent, or outer, or “mask”) panel.

Move DP Content.rp (83.6 KB)

Scroll to Widget from Repeater to Repeater
#3

Place an HotSpot widget to where you want to scroll to and scroll to that hotspot you can try that see if it works

#4

Thanks for your response, can you explain what star.x and star.y are? I don’t see any elements named ‘star’, or any variables attached to your sample project.

#5

Yes. Very briefly, these refer to the location of a widget. The expression, [[-star.x]] refers to the negative of the horizontal location (the ‘x value’ in a Cartesian coordinate system or “(x, y) grid”) on the web page, where “star” is a local variable pointing to a widget (named “my star” and located in the dynamic panel named “my content” which in turn is located in the dynamic panel named “my mask”.)

Let’s back up a bit… First of all, when using algorithms in Axure, variables and mathematical expressions are wrapped in “double-square brackets”, e.g., [[2 + 3]] equates to ‘5’ and not the text string, ‘2 + 3’. Secondly, widgets, groups, global variables, environment variables, even the web page itself have properties which can be read and set, including location information on the page’s (x, y) grid. Thirdly, in order to get or set the value of a widget’s property, Axure uses what they call Local Variables (which can differ a bit from most programming languages’ notions of local variables.) So, [[LVAR1.x]] is the horizontal location of the widget named MyWidget, where LVAR1 is a local variable representing (think, “a pointer to”) the widget named, MyWidget. While “LVAR1” is the default name for a local variable, this can be changed to make the algorithms easier to read and understand. Finally, all of these mathematical expressions and local variables are accessed through the Edit Value dialog, a.k.a, “fx” or “function” dialog–which is opened by clicking on the little “fx” icon next to property fields in actions.

Now what I did in the prototype was to create a local variable named, “star” which points to the widget named, “my star” Here is how I did that:

image
image.jpg1415×817 169 KB

  1. Select the ‘RESET’ button and create a Click or Tap event.
  2. Add a Move action and choose to move the dynamic panel widget named “my content” (and later on, click on this action to access the MOVE details.)
  3. Click the “fx” icon next to the “x” input (and next to the “y” input as well) to open the Edit Value dialog.
  4. Click “Add Local Variable”.
  5. (Optional) Change the default “LVAR1” to “star”.
  6. Select “widget” and not the default “text on widget” for this variable.
  7. Click “This” (default target name) and browse to find your target widget, in this case, “my star” --Use the search feature to start typing any portion of the widget name in order to quickly find it.
  8. Enter your expression to access the properties of “my star” by referring to its local variable name, in this case, “star”.
    *. (Optional) Click on “Insert Variable or Function…” to access all the possible properties and functions. In this case, you could look under the “Widget” category and select “x” or “left” (two ways to get the same value, where “left” can be easier to read for some.)
    Edit: The local variable, ‘img’ is actually not used or needed. I first thought I would use its location to calculate the new location to move the “my content” panel, but it turned out I did not need it.

A few other things that might help you understand what’s going on here…

  • In the “my mask” dynamic panel there is one widget, a dynamic panel, named “my content”. The size of “my mask” is fixed at 431 x 236 (arbitrary size) by simply dragging any of its handles to resize (and/or entering a value in its width (“W”) or height (“H”) fields, and/or by unchecking the “Fit to Content” checkbox in the STYLE pane.) This “mask” acts as a viewport for the image area (in your case, your map.)
  • Notice in the “my mask” dynamic panel, the initial location of “my content” is (-574, -345) which results in the “my star” widget appearing in the upper left of “my mask”. When the RESET button is clicked, the idea is to return “my content” to this same location.
  • In the “my content” dynamic panel there are two widgets, the background image, named “my image” and the star shape, named “my star”. Because these widgets are in a dynamic panel, their location properties are relative to that dynamic panel. Moving the dynamic panel changes that panel’s (x, y) properties, but not the location of widgets within it.
  • Also notice in the “my content” dynamic panel, the location of “my image” is (0, 0) and the location of “my star” is (574, 345).
  • This arrangement makes it easy to calculate the position of “my content” in order to place any widget within “my content” at the upper left of the viewport–“my mask” by simply referring to the negative of that widget’s location. Note that you do not need to know the actual (x, y) location values because you can programmatically get these by referring to the .x and .y properties via Axure’s Local Variable.

Here is Axure’s documentation on variables, local variables, expressions and math functions:

closed #7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.