Forum Discussion

BrentMiller-1e7's avatar
BrentMiller-1e7
Community Member
3 months ago

Question: Interactive Design in Scrolling Panel

Hi Community,

I have encountered a difficulty while designing interactive functions in Articulate Storyline Scrolling Panel and would like to seek your help. 

We'd like to show the audience an alphabetical directory. We have displayed A-Z on the left and items on the right, sorted alphabetically. (show below in attachment)

We would like to achieve two functions:

  1. When users scroll the panel, the A-Z letters should remain fixed and always show on the left sidebar.
  2. When users click a letter on the left, it should jump to the first item starting with the same letter.

Could someone help me figure out how to implement these interactive functions? If this is not possible, what other options or ideas would you recommend?

Thanks!!

storyline 360
  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    3 months ago

    You could try something like this. It is a simple approach, but it does the job.

    Demo:  https://360.articulate.com/review/content/14a0f07c-d4e7-41a6-8f3d-ce0f90499de2/review

    First, to hold your index buttons stationary, just place them outside the scrolling panel (on top of it). Arrange them off to the side, outside of the panel. Select them all and drag them into position. If they end up moving inside the panel group, just select them all again, cut them with Ctrl-x, click outside the scroll panel somewhere, and them paste them back with Ctrl-Shift-d (to maintain positioning). They should appear outside the scroll box on the timeline. Tick the locking boxes on the timeline to keep them from moving into the scroll panel.

    Second, add your list of names to the panel. The accessibility tag for each text box should auto set to the name you enter. We will use that next.

    Third, upon clicking an index button, set the index variable to the (Capital) letter marked on the button. Trigger the JavaScript (just three lines of code). It will read the index variable from Storyline to get the letter you want, find the scroll panel, find the first element inside the scroll panel with an accessibility tag starting with the letter in the index variable, and then scroll to that element (which is the target text box). As long as no other elements inside the scroll panel have conflicting accessibility tags (starting with a capital letter), you should be good. There is one entry at the bottom of the list as a placeholder to allow scrolling beyond the end of text boxes. Make it the same color as the background to hide it.

     

Related Content