Jump to specific point in a scrolling panel

Nov 04, 2021

Hi all !

I made a global glossary using storyline and i'ma actually implementing the research functionnality using storyline.

To have a nice list of words, I used a scrolling panel.

Is it possible to jump to the position of a certain object in the scrolling panel ? I don't want to only send the learners to the slide, as he would have to scroll all the way down to the word he's searching. 

Is that possible or should I just try another approach ?

Thanks !

7 Replies
Bernadette Neal

This video is great and I think it may solve a problem I'm having, but the author left out some details that I just can't figure out.

Note: I have zero experience in javascript, but I get that I need to tweak some text in the code.

This is the code he used:

var boxthree = document.querySelectorAll('[data-acc-test~="msgthree"]');boxthree[0].scrollIntoView({block: "end", inline: "nearest"});

Can you tell me what "boxthree" is? I'm guessing a variable. Did he create a variable in Storyline? If so, what is the value I should assign it in Storyline? What does it represent? Where is it used? I know I need to tweak this to whatever I want, but I don't know where this is coming from.

IF I can figure out what I'm supposed to do with "boxthree" I might be able to use this solution.

Nedim Ramic

A 'boxthree' is a variable name. This variable was not created in Storyline. You can rename it to something more meaningful to you. In summary, this JavaScript code selects all HTML elements that have the data-acc-test (I think it should be data-acc-text) attribute containing the word 'msgthree' and stores them in the variable 'boxthree'. You can then use this variable to access and manipulate these selected elements in your JavaScript code. Now, in order for this code to work, you need to make sure that msgthree is typed in Accessibility text box in Storyline. You can type what ever you like but ensure that this value is updated in the code above as well.
For example, my code could look like this:

var myScrollObjects = document.querySelectorAll('[data-acc-test~="scrollobj"]');
myScrollObjects[0].scrollIntoView({block: "end", inline: "nearest"});

If you have two objects with the same  data-acc-text attribute but you only want to move the second one, you would execute the following line:

myScrollObjects[1].scrollIntoView({block: "end", inline: "nearest"});
// in JavaScript the indexing starts from 0, not 1

Bernadette Neal

Thank you!!!  You solved my problem!

1. I understood the whole accessibility text thing, but I just couldn't get past that the variable part is literally just whatever I want and it didn't have to refer to something specific. I thought I had to create a variable, for example, that matched the object's name or it had to match a variable I needed to create in Storyline, or something along those lines. But, it's literally just anything I want and it doesn't have to refer to anything.

2. But, here's where you solved it for me...I had a typo! And you pointed it out...I had data-acc-test when it should have been data-acc-text.

I tested it out and it works. I can't believe I made such an simple error. Thank you so much!!! :)