Forum Discussion
Javascript for Scrolling Panel to start at the bottom
Hi,
I need to reverse a scrolling panel to begin at the bottom and scroll up instead of the current default which begins at the top and scrolls down. Does anyone have custom javascript to accomplish this? Also, does this impact the functionality in an LMS?
Thank you!
Dina
- WaltHamiltonSuper Hero
I’m not in a position to test it right now, but the first thing I would try would be to rotate the content 180 degrees, place it in the panel, and rotate the panel 180.
- DinaParker-3c47Community Member
Hi Walt - thank you for taking a stab at this! You can only make the window taller or longer but you can't rotate a scrolling panel.
- WaltHamiltonSuper Hero
If you group a panel with another object, you can rotate the group. (That’s how to create a side-to-side scroll function, by the way.) If the object is invisible, it doesn’t interfere, and it can take a lot of trial and error to get it exactly right. Set everything else first, and rotate last.
- DinaParker-3c47Community Member
Wow! You're brilliant. That does in fact work! The scroll bar is on the wrong side but I think I can work with it. Thank you so much Walt!
- WaltHamiltonSuper HeroNot original with me, but you're welcome. PIAWYC (Pass it along when you can).
- KarenCoteCommunity Member
I need the scroll to start at the bottom as well, but this work-around wouldn't be as useful in my case because it is a software simulation and I don't want to confuse learners by having the scroll bar suddenly appear on the opposite side as they work through the simulation. I will request future development for an option to at least choose start scroll panel at top, middle, or bottom.
- DinaParker-3c47Community Member
Hi Karen,
Ultimately this solution didn't work for me either. I ended up having someone create a custom javascript for me which works well. I can share the code with you but I can't guarantee that it's perfect.
- KarenCoteCommunity Member
Yes please, I would love that! I'll give it a try. Thanks for reaching out.
- DinaParker-3c47Community Member
Here is the Javascript that I used:
var myCode = function() {
$('.scrollarea-area').scrollTop($('.scrollarea-area')[0].scrollHeight);
}
if (window.$ != null) { // If jQuery has already loaded, run myCode.
myCode();
} else { // Else, load jQuery and then run myCode.
var jQueryLoader = document.createElement("script");
jQueryLoader.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
jQueryLoader.onload = function() {
jQueryLoader.onload = null;
myCode();
}
document.head.appendChild(jQueryLoader);
}Use the trigger Execute JavaScript and paste this code into the Javascript editor.
I hope this helps.
Dina
- KarenCoteCommunity Member
Thanks for sharing Dina. I just added the trigger, inserted the JavaScript, and published. Unfortunately, it is not working for me, and I don't do any coding so I'm not sure if I would need to modify anything in the code to make it work for me. It was worth a try! I put in a request for a future development to add an option to either start scoll panel at top, middle, or bottom. Or even better, have the scroll bar open to exactly where it is in the Storyline development slide. Maybe one day.....
- eloiselerisson-Community Member
Hello Karen,
I figured it out by simply adding this code inside the html file (with notepad++ for example) :
More information here : https://articulate.com/fr-FR/support/article/Storyline-How-to-Reference-the-jQuery-Library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>