Skip to main content

Our brand new Articulate Storyline 360 Magic Series continues to offer fantastic tips and tricks for advanced-level Storyline developers looking to further enhance their skills, particularly in areas such as JavaScript and CSS.

In Episode Two of our video tutorial series, Chris Hodgson will once again guide you through some of the cool things that are possible with your Storyline-generated eLearning content with some customisation on the backend code that produced the project. This time the focus of the episode is on Scrolling Panels, and ways in which we can manipulate the position of a scrolling panel using JavaScript.

Here is the latest episode to watch right now:

Be sure to subscribe to the Discover eLearning YouTube Channel to be notified of future episodes!

Discover eLearning are specialists in the development of engaging interactive digital learning content using Articulate Storyline 360, having created award-winning public exhibition eLearning work utilising everything that the software has to offer, as well as our entries into weekly eLearning Heroes Challenge ran on the official Articulate website.

A copy of the written transcript for this episode of our Storyline Magic Series is available to read here:

Hi this Chris from Discover eLearning, and welcome back to another episode of our Storyline Magic Series where we explore some of the things that Articulate Storyline can do with some experimentation on the coding side of things.

For this episode we’re going to take a closer look at a project that I’d created for a recent eLearning Heroes challenge, which comes fully recommended for Articulate Storyline creatives of any experience level to test and share their ideas and receive valuable feedback from the wider community on their projects.

Challenge number 361 asked developers to create a mobile device text conversation interface in any way they wished, and I used this opportunity to showcase a trick that is possible using JavaScript to control the position of any scrolling panel that you may have in your project.

Using JavaScript allowed me to create the timeline based animation that you are seeing here within my Articulate Storyline project using only one slide and a single layer, and all on screen elements visible and editible on one timeline.

The code that is used at each point in the timeline where I want to jump to a specific object’s location in the scrolling panel is displayed here.

As you can see, this trick takes advantage of Storyline’s in-built Accessiblity Text value, which you can set for any on-slide object by right clicking and selecting ‘Accessibility’. You can type any value you wish into this box.

We are then ‘usually’ able to target any specific object in Storyline using this data-accessiblity-text assignment as shown here, and you will see later in the series that we are going to be using this trick quite a lot for other cool tricks.

The final part of the code uses the scrollIntoView method that is available in JavaScript. This lets us scroll to that specific object with no pixel value calculations needed!

So we’re now going to use this JavaScript trick to achieve something else.

The project we’re now looking at is yet another one of my eLearning heroes challenge entries, which works as an interactive scrolling infographic with each section loading on screen as we scroll. We’ll be covering how this is possible in another episode of our Storyline Magic Series very soon, so make sure you are subscribed to our YouTube channel for future updates!

What I’m going to do is upgrade this project by adding five buttons which will appear when the user reaches the bottom of the infograph, and we will add a JavaScript trigger to each button that scrolls the user instantly back to that sea creature when they click!

With the new buttons in place, we’ll start by adding our accessibility text value to each of the zone section’s dotted dividing line in the infographic.

A tip if you ever want to add a little space between the top of the screen and the object to focus on, is to add in an invisible dummy object that you can use as your scrollIntoView anchor point instead.

I’ve got each of these set up now, so I will click on each button in turn and add a new trigger of Execute JavaScript when the user clicks the button.

Click on the red text link to open the JavaScript editor, and we’ll now enter our code.

Starting with declaring a new variable, and we will assign our Epipelagic Zone dotted divider line to this variable using a querySelect method. This JS method allows us to target an object in the DOM using a data attribute, such as the accessibility text that we just entered.

Then on a new line we will use a scrollIntoView method, along with the following recommended parameters. Make sure each line is finished with a semi-colon.

Now that’s done for each of the five buttons, I’ll go ahead and publish my project and upload to my web server so that we can view the results!

So when we get to the bottom of the scrolling infographic our five navigation buttons appear, and as the viewer I can now click on any of these buttons to be immediately transported back to that specific section of the infographic.

Thank you for joining us for this episode of our Storyline Magic Series, and be sure to like this video, tell us in the comments if you plan to use this trick in one of your own Storyline projects, and subscribe to the Discover eLearning YouTube Channel for notifications of future episodes.

Bye for now!

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports organisations of all sizes to implement engaging, meaningful, and impactful eLearning solutions. Chris has over 15 years’ experience working in both private and public sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.