Storyline 2: Hyperlinks and buttons in scrolling panel in lightbox not working in HTLM5/iPad

Mar 19, 2015

I've been building a lightbox slide with scrolling content which contains buttons and hyperlinks. When I view the flash version, everything functions perfectly. When I view the HTML5 output on computer or iPad, all the links that are below the bottom of the scrolling window initially, will not function when they are scrolled into view.

I've built a single slide replica which demonstrates the problem. It's only the HTML5 output that has a problem.

25 Replies
Leslie McKerchie
Jamie Moorcroft-Sharp

I've been having massive issues with this in a glossary I've made for a client. The hyperlinks and hotspots are fine, until you scroll, then they all seem to shift upwards, to the point where they move up two words once you've scrolled to the bottom.

Originally I had this issue with hotspots, and after some re-arranging decided to use hyperlinks as I thought they would work better. However they simply do exactly the same thing.

Is there any chance this has been fixed yet? 

Jamie Moorcroft-Sharp

My workaround for this has, sadly, been to jump directly to the slide with the hotspots/hyperlinks in a scroll box. I did some testing and the issue seems to occur when you Lightbox the slide with the hotspots/hyperlinks in the scroll box. 

See the attached file for an example of what I mean. Notice when you lightbox the second slide that the hyperlinks shift upward for the lower Terms. Whereas if you select the second slide in the menu you actually don't seem to have this issue at all.

Of course this doesn't help you if, like me, you're using Variables to trigger a certain definition to show once you Lightbox, or now Jump To, that particular slide. The way I work it is to have a definition for each term which is set to True when the user clicks it, and also Lighboxes the relevant glossary slide. I then have a trigger that shows the correct glossary layer on that slide when the timeline begins, if the Variable for that term is set to True, otherwise it won't show unless the Term is clicked.

My workaround will now be, I have to correct the entire thing, to have a Variable for each Slide. When the timeline starts on that slide, the Variable will be set to True. when the user clicks Next or Previous, the variable will be set to False. 

As before, the variables for each Glossary term will still change from False to True when they are clicked, but the hotspot that does this will also now Jump To the correct slide, for example, Glossary C. The glossary will work as intended, and then the user will click a close button in the top right, which I will add to each of my glossary Slides. The button will check for for Slide Variables that are set to True, and if they are True, for example Slide 1, then they will Jump To that slide. 

This is the workaround I will be using to ensure that the user is taken back to the Slide they are currently on in the course, therefore maintaining the current progression and not moving them away from where they are currently in the course.

Please do comment below and let me know if you have any questions. I've registered a ticket and hope that Articulate fix this soon, otherwise I hope my workaround serves you well.

Shobit Dabral

Thanks Leslie,

Yes, this is dated, but the issue still exist in storyline 2 output. 

I see this thread is 4 yrs old and this issue has not been addressed till now, its kind of disappointing.

Yes it is working fine on the sample you just shared, I'm using storyline 2.

Any idea when this will be taken care in this version??

Ashley Terwilliger-Pollard

Hi Sunny,

I'm sorry you're running into an issue here. We've addressed this bug in Storyline 3 and in the latest version of Storyline, Storyline 360.

We are maintaining the basic functionality of Storyline 2, but our primary focus is on current versions of Storyline. We'd recommend that you consider using an updated version of Storyline to address this.

Shobit Dabral


Actually I'm working on a source which is developed in storyline 2 and it is a 5 hr learning course.!!!. I just upgraded the source to 360 and yes it did resolve that issue, but have encountered other several conversion issue, like stretched and misplaced images throughout the course. 

Ashley Terwilliger-Pollard

Hi Sunny,

I'm glad you were able to update to fix the initial issue, but sorry that you hit some initial snags upon upgrading! Let's get to the bottom of those to keep you working. 

I know our team is investigating an issue in Storyline 360 where audio from other slide layers is playing at the same time after closing a lightbox opened from a slide layer. Does that match your setup? If so, I'll include this discussion in the report as the team is investigating and then we'll be able to update you here once we have more info. Also, one workaround to implement until we have more, look at adding a “Play media trigger when the timeline starts” to all the audio files in each slide layer.

For your images, were they on a slide master or throughout the course? If so, in Storyline 2, go to Slide Master, right-click on the image and select Size and Positioning and uncheck the Lock Aspect Ratio option in the Size tab in before upgrading the file.

Let me know if you need anything else! 

Manish Agarwal

Hi Sunny,

Yes, Buttons or links are not clickable in the lightbox under the scrollbar in Storyline2 and this is the default behavior of the storyline 2. However, after doing many hours research finally I was able to achieve this functionality in storyline 2 or you can say fixed this issue in a different way.

I am mentioning here the troubleshooting and solution which I have done so far for the same.

Troubleshooting: This happens due to the scaling. whenever you use a lightbox for a particular slide than its scale the whole slide according to the width and height and due to this, buttons or links shift upward in the scroll area. That's why button or links are not working in the scrollbar.

Solution: Please use this solution only if you have no choice. Personally, I will not recommend you to use because we are breaking the by default feature of the tool. Here are the steps to resolve this issue:

1. Remove the scaling code for a slide in the player_compiled.js file.
2. Add your own scrollbar and update the same in the player.css file.
3. Set the width and height for the lightbox and scrollbar in the player.css file.

Hope this helps!

Please let me know if you required more information on this.



Manish Agarwal


Shobit Dabral

Yes, the issue is same. 

“Play media trigger when the timeline starts” will make all the audio to loose seek bar control and that will cause another issue.(user will not be able to drag audio time with slide)

No they are not in master slide, Actually they are on slide level and are on most of the slides and the course is freaking 5 hr long... So for now we have opted for inbuilt menu so we don't have to spend hrs to fix those issues globally.

Please report these issues to the debugging team and fix these critical issues on coming updates. Thanks.

Shobit Dabral

Thanks Manish for your Rnd effort and coming up with the given solution. As you know that we already moved to creating inbuilt menu functionality as we were out of time with this. 

Anyone who's following this thread can implement the given solution if you are also stuck with the same issue on light-box functionality.

I hope that all of the conversion issues will be resolved soon by the Articulate team.

Leslie McKerchie

Great news!  We just released another update for Articulate 360, and included a few important fixes that you'll see in the release notes here.  

The item you'll be interested in is:

Fixed: Audio tracks from multiple layers could play simultaneously, even when the layers weren't open.

Just launch the Articulate 360 desktop app on your computer and click the Update button for Storyline 360. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly.