Bookmarked Scrolling Panel using JavaScript
Jan 18, 2017
I've been experimenting with bookmarking controls for the Scrolling Panel.
The idea is to provide a pane of scroll controls which remains anchored while the content of the scrolling panel can be scrolled to a particular place (e.g. by PX's).
To the right of the scrolling panel of the project below are buttons with Javascript triggers that scroll the panel to some number of PX's.
Best approach I've found so far is to use JavaScript. This requires discovering the element name of the Scrolling Panel as it is identified in the DOM. If you run the project in Chrome, for example, you then expand the elements using the Chrome Developer Tools elements tab as shown below:
Each of the scroll buttons uses a JavaScript command such as:
document.getElementById('item_5q2sNfoLGnj').scrollTop = 250;
This approach typically works fine when run directly in a browser, however I see mixed results, depending on the browser when the project is uploaded to an LMS.
I'm hoping someone can improve on my approach to make it more reliable.
I've attached my zipped SCORM'ed output as well as the Storyline project to this post.
Thanks,
Bob
5 Replies
Hi Robert,
The problem with this method, is you may not be able to be sure the IDs won't change from one time you publish to the next. But assuming that you can, searching for the item using the document.getElementByID() method should work in all browsers.
You might find you have better results though, if you use jquery. Jquery is really easy to implement, and simplifies a lot of javascript calls. It also provides for better cross browser support. So the statement document.getElementById('item_5q2sNfoLGnj') becomes ("#item_5q2sNfoLGnj). (The # sign indicates you want to search by ID).
All you have to do to enable jquery on your page is embed this script in the head tag of your html page: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> Take a look here to see how jquery works.
Hi Dave, thanks for the info. So if I were to edit the page html, are you implying that I can enter jQuery commands into the Storyline trigger, in place of JavaScript?
Jquery is javascript, or more correctly it is a javascript library. So, if you add the src... script above, then yes you can use jquery statements in a javascript trigger.
OK, but the expectation here is that I need to 're-add' the src script after each time I publish?
Yes, you would need to add this script each time you publish, as Storyline creates these files everytime you publish.
You could modify the source file to include the script. I believe the correct file is .../Program Files/Articulate/Articulate Storyline2/Content/player.html. Be very careful doing that though. This file contains many variables that storyline fills as part of the publishing process.
This discussion is closed. You can start a new discussion or contact Articulate Support.