Forum Discussion
Show Scrolling panel at the end
Hi Heroes, I used to use a code for showing the scrolling panel at the end when the timeline starts. It worked perfectly before. However, it doesn't work anymore, even when I republish the origina...
Hello Nathan_Hilliard . I was very interested in the little file and code you generously share. If I understand correctly (by studying how the code works by targeting the position of a text tag by its acc-text), I just need to change in the first trigger “Begining” by another acc-text of one of the 3 other text tags arranged in the scroll panel (for example: End). I run the Preview and... nothing. Still on the “Begining” position. I skip the numerous attempts to change the default accessible texts, but still nothing. And I get an error message from the console: Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state (which means absolutely nothing to me 😅). What did I miss that works well for you? Please. Thank you in advance.
Hi Thierry. Sorry, this example is a bit confusing as a starting point for what you are asking.
Normally, objects on the SL slide are tagged with a data-acc-text attribute that matches what you find if you right-click on the entry in the timeline and select Accesibility. In these cases, yes, you can use JavaScript and the document.querySelector() function to locate objects from your slide (often the top level <div> that contains the object).
Some objects, like the scroll panel, do not update this tag so you can't find them this way. There are other options, but they often rely on tag or class names which could possibly change in the future. One way is to use the data-acc-text attribute to locate the first object inside the scroll panel (which happens to be the text "Begining"). We then use the .parentNode method to go up two levels to obtain the actual <div> that corresponds to the scroll panel.
When you tried to select the other text entries and applied .parentNode.parentNode, you were just getting the same scroll panel <div> as the result since those text boxes are all at the same level in the hierarchy.
The Warning message you noted is just something that is generated by SL occasionally and doesn't really have anything to do with the script or something you were doing wrong.
The scroll panel is actually being postioned by setting a variable to a value between 0 and 1, representing a fraction of the maximum scrollable height. As the dial turns, the value increases or decreases. The script calculates where the scroll handle should be positioned (in pixels) based upon the current size of the panel and what proportion of scrolling you specified with the dial.
Don't apologize, Nathan_Hilliard , and thank you so much for taking the time to respond and explain to a non-coder like me.
First of all, I hadn't commented on the dial / scroll panel part, as it works PERFECTLY.
In fact, I had looked for the text tags in the console and couldn't find them outside the panel itself. Which is consistent with what you're explaining. I know that it's possible to target elements by data-acc-text and how to create/modify the acc text of an element. As for the rest (the .parentNode method), I'm a bit lost, but that's okay: I'll just have to study some simpler code. My voyage of discovery through JS has just begun.
Thanks again for your help.
