Blog Post
Jonathan_Hill
Super Hero
This makes great use of that very familiar act of scrolling through a WhatsApp conversation.
Would be interested to learn more about the variables that power this. Impressive.
Would be interested to learn more about the variables that power this. Impressive.
PreethiR-45f9fe
5 years agoCommunity Member
Thanks, Jonathan. It's the power of javascript + variable. Here is the javascript that captures the scrollbar movement.
var x = document.getElementsByClassName("scrollarea-area");
x[0].scrollTop = 0;
var height = x[0].scrollHeight - x[0].offsetHeight;
x[0].onscroll = function(){
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop);
};
I had created trigger in storyline for the variable 'num'. Everytime, the scrollbar moves, the variable 'num' value changes. Based on the 'num' value, the text state i changed.
var x = document.getElementsByClassName("scrollarea-area");
x[0].scrollTop = 0;
var height = x[0].scrollHeight - x[0].offsetHeight;
x[0].onscroll = function(){
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop);
};
I had created trigger in storyline for the variable 'num'. Everytime, the scrollbar moves, the variable 'num' value changes. Based on the 'num' value, the text state i changed.
- Jonathan_Hill5 years agoSuper HeroThanks for sharing! Good to know!
- JodiSansone5 years agoCommunity MemberThanks for explaining that because I was wondering how you triggered the scrolling.
- Jonathan_Hill5 years agoSuper HeroHey Preethi - thanks again for sharing your JavaScript. I've used it myself in a second demo, below.
It's interesting how it generates a different min/max number when you run it on your local drive, a web server and on a mobile device. The last one is obvious, as it's a smaller screen, but I was surprised at such a big difference when running it locally and on a server.
Perhaps there is a way to obtain the maximum scroll number for a particular screen/device and use this as the basis for the triggers, making it more compatible across devices?- ChrisHodgson5 years agoCommunity MemberI believe it's because the code snippet provided by Preethi was slightly 'unfinished', in that there was a height variable declared to calculate the scroll object but this was not actually called upon within the main function.
When setting the variable in Storyline if we instead said
player.SetVar("num",x[0].scrollTop/height*100);
We would be converting the slider position into a percentage, whereby the very top of the slider would be 0 and the bottom would be 100 across any screen size.
What this doesn't account for however is if the user changes their screen 'window' size during the activity (e.g. if they were on their phone and switched from portrait to landscape mode)
We can however account for this using the .resize event handler in JQuery! So the final code would look something like this:
var x = document.getElementsByClassName("scrollarea-area");
$(window).resize(function(){
var newHeight = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
var height = newHeight;
player.SetVar("height",newHeight);
});
x[0].onscroll = function(){
var height = x[0].scrollHeight - x[0].offsetHeight;
var player = GetPlayer();
player.SetVar("num",x[0].scrollTop/height*100);
player.SetVar("height",height);
};
(Create a variable in Storyline called 'height' to see the value dynamically change when the browser window is resized)
From my own tests this seems to work, but I'd appreciate others giving it a go and feeding back their results.
NOTE: Articulate removed the JQuery library from Storyline published output in early 2020, so you will need to add this line into your story.html file -
https://articulate.com/support/article/Storyline-How-to-Reference-the-jQuery-Library
(Around line 15) - PreethiR-45f9fe5 years agoCommunity MemberHey Jonathan, to answer your question on the maximum scroll number, you can use this script:
var height = x[0].scrollHeight - x[0].offsetHeight;
when x[0].scrollTop == height, it means you have hit the bottom of the scroll.
You can also check the attached source file. I have added script to identify when the scrollbar reaches the middle and the bottom.- Jonathan_Hill5 years agoSuper HeroThanks to both Preethi and Chris - this is really interesting!