Storyline Content In An IFrame

Hi Jeremy,

Are you using the directions here? Are you only seeing this behavior in the HTML5 output? What browsers are you using to view it - you'll want to make sure you're using one of the supported environments detailed here. 

Hi Jeremy,

I see that you are using a script to set the height of the iFrame based on a height/width ratio applied to the current width - nice :)

Your example that you have right now will probably work perfectly with flash content and you will never see scrollbars.

I suspect the issue with HTML5 is how the calculated dimensions are rounded.

Anyways, to fix this, you just need to add the following to your iframe html:

scrolling="no"

Right now your iframe is looking like this:

<iframe width="100%" height="xxx" frameborder="0" src="Lesson1/story_html5.html" class="storylineContent" style="height: xxx"></iframe>

So just add the scrollbar property so it looks like this:

<iframe width="100%" height="xxx" frameborder="0" src="Lesson1/story_html5.html" class="storylineContent" style="height: xxx" scrolling="no"></iframe>

I have tested this in your example, and it seems to work perfectly.

You will always have the odd flash of a scrollbar while resizing, but once you stop resizing, there wont be any scrollbars.

Hope that helps.

EDIT: Sorry Jeremy, its not scrollbar="no", should be scrolling="no"

@Ashley Terwilliger 

I have followed the instructions yes I am only noticing this with html5. Also the not all browsers are behaving the same. Most layout issues are in Google Chrome. Chrome will almost cut off content in the storyline content since it seems to be around 10 - 20 pixels off at times.

@jacques roux

I did already try hiding the scrollbars which will fix the issue in most browsers. The problem lies with the layout in Google Chrome which seems a little to popular to ignore. Even with scrollbars turned off, when you start resizing the browser window you will see the storyline content tweaking out as you resize as it is shifting constantly where the scrollbars would be showing up. Then when you stop at points where scrollbars would of been then you see the content of the iframe not centered as it is not fitting its container.

Hi Jeremy,

I've implemented the solution above, and I'm pulling your project into an iFrame and have added your iFrame resize script as well.

Have a look if that is what you want.

Here is the link.

I kinda see what you mean with the SL content 'tweaking'. I think the solution for this might be to use a fixed height to with ratio (say like 0.6) in your JavaScript, but I'm not 100% on that.

Work time for me :(

Hi Jacques,

Thanks for sharing that - I see it add the scroll bar as well - but since the story size looks to be larger than my standard Chrome browser (on a 15" laptop display) I'd expect that the scroll bars would appear if you've set it to lock the player at the optimal size and therefore it'll display at the size you created. 

We are not talking about the browser scrollbar but the scrollbars that appear in the iframe container.

This explains my confusion a bit more Jeremy - as I only see the browser scroll bars. I checked in Chrome and Firefox. 

Ok so after a little digging into the player.js I discovered the issue is with the framewrap class not being positioned correctly. I have found a fix for my issue in 

Frame.prototype.updateFrameLayout 

I found 2 variables that get the left and top position of the framewrap class.

f = parseInt((c - e * a) / 2 - 1);
g = parseInt((b - d * a) / 2 - 1);

and a little further down

player.scaleWithTransform || (f = parseInt((c - e * a) / 2 / a - 1), g = parseInt((b - d * a) / 2 / a - 1));

So i changed the subtraction value at the end of the formulas from 1 to 2. So they look like so,

f = parseInt((c - e * a) / 2 - 2);
g = parseInt((b - d * a) / 2 - 2);

player.scaleWithTransform || (f = parseInt((c - e * a) / 2 / a - 2), g = parseInt((b - d * a) / 2 / a - 2));

Now when I scale the content I get no scollbars and the storlyline content is not flickering all over the place.

Is there somewhere I can file a bug report for this?

Hi Jeremy

If you want to connect with our Support Engineers they'll be happy to take a look as well, but since I didn't see the issue I'm unclear on what may be happening and any next steps. Have you tested it in a few different browser? On any other sites to embed the iFrame? As a note, we're unable to support modifications to the published output, so the changes you made above are also not something we can assist with. 

Hi Jeremy, that is brilliant, well done, nice to see that you've sorted it.

I'm with Ashley, I think script work fine as is when using a normal embed method, i.e. not adjusting the height of the iFrame dynamically to account for responsive designs.

This is good to know though, as I use a similar method to adjust iFrame height, and can be a real pain in responsive LMSs.

You display.js scripts to resize the iFrame height is something that more people should probably use. though. As without it, a responsive LMS or other page would just leave a big blank space above and below the player as the viewport gets smaller.

Would make a nice tutorial :)

Thought I would post a little bash script that I created for making the changes in the player_compiled.js file. If you are on mac you can add this in automator so you can just right click the file and apply the shell script to it.

#!/bin/bash

OLD='f=parseInt((c-e\*a)/2-1);g=parseInt((b-d\*a)/2-1);player.scaleWithTransform||(f=parseInt((c-e\*a)/2/a-1),g=parseInt((b-d\*a)/2/a-1));'
NEW='f=parseInt((c-e\*a)/2-2);g=parseInt((b-d\*a)/2-2);player.scaleWithTransform||(f=parseInt((c-e\*a)/2/a-2),g=parseInt((b-d\*a)/2/a-2));'
TFILE="/tmp/out.tmp.$$"
SRCFILE=$1

if [ -f "$SRCFILE" -a -r "$SRCFILE" ]; then
 sed "s:$OLD:$NEW:g" "$SRCFILE" > $TFILE && mv $TFILE "$SRCFILE"
else
 echo "Error: Cannot read $SRCFILE"
fi

Many thanks for stopping back in with an update, Jeremy! I'm sure many others will appreciate your contribution. :)