Attempting to make a timeline using a repeater with uneven spacing

repeater-widget
advanced-prototyping

#1

Hello all,

I am attempting to create a timeline using a repeater, with the repeater containing instances of symbols that represent individual points on the timeline.

The issue I’m having is getting points on the timeline to appear in the desired location across the timeline, using an item in the repeater called “Item.Timestamp” to represent the point in time (seconds) for that symbol. Essentially, I want the Timestamp item to be how far along the timeline the symbol appears. I’ve been using the interaction:

OnItemLoad
Move Symbol to [[Item.Timestamp - Target.width]]

To get each symbol to move horizontally to 4 seconds, 8 seconds, etc. - which is represented by the Timestamp item. However, Axure seems to interpret the coordinates “0,0” as starting in a different place for each item in the repeater, so their positioning is off.

I realize this might be a bit difficult to follow, so I’ve attached the file below:

Timeline_Repeater.rp (99.8 KB)

Thanks for any help, advice, or suggestions!


#2

Hi, ease. You were on the right track. I made a few changes.

  • To get all the markers showing up relative to the origin, I hid the marker widget in the repeater and then showed it OnItemLoad. This effectively sets the width of the repeater item to zero, instead of the width of the marker. (Note the repeater itself is now a tiny dot on the 0s line. You might have to zoom in to see and select it.)
  • I also unchecked the “Fit to content in HTML” option in the properties pane of the repeater, to avoid each moved marker from pushing out the ones after it.
  • Since each mark on the timeline is about 8 pixels apart, I multiplied the distance moved by 8.

Another option would have been to adjust the times in the repeater table to be the offset from the prior point.

HTH,
Jeff

Timeline_Repeater.rp (100.0 KB)
.


#3

Excellent, thank you! I hadn’t thought to hide the marker widget like that, and I didn’t know that “Fit to content in HTML” pushes each instance of widgets within a repeater. I had previously tried adjusting the times to offset the horizontal movement as well multiplying the movement distance by 8 like you mentioned, but I hadn’t used those other techniques. Thanks for the help and explanation!