15 Replies
Daniel Gavriliuc

I have a button that trigger this JS:

if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}

Harshad Joglekar

Thanks, Matthew. I tried it, but it gives the same result - works on alternate screen, when published. What I have done is add this script to first slide in the the 'master slide' section - Executive javascript when timeline starts. When the course loads, it's not full screen. When I click next, it becomes full screen. And then, it repeats alternately. 

Matthew Bibby
Harshad Joglekar

Thanks, Matthew. I tried it, but it gives the same result - works on alternate screen, when published. What I have done is add this script to first slide in the the 'master slide' section - Executive javascript when timeline starts. When the course loads, it's not full screen. When I click next, it becomes full screen. And then, it repeats alternately. 

Sounds like it's working! That code is doing exactly what it should. The code means:

If the thing is not full screen, make it full screen, or if it is full screen, then make it not full screen.

So, because this in on the slide master, it runs each time a new slide starts.

It makes it fullscreen, then not full screen, then back to full screen etc.

This could be fixed by only using the first part of the code:

if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
}

This just makes things fullscreen. So it stops that alternating between fullscreen and unfullscreen. (Let's just pretend that's a word).

However, it still won't work.

Why? 

Because you aren't allowed to do that.

It's a security thing.

Switching to fullscreen must be initiated by a user gesture. 

This means (in the context of Storyline output), that once the user has clicked anywhere in a course, that is considered a user gesture.

So then the next time this code runs (i.e. when you go to a different slide), it'll be allowed to do its thing.

If you open up your JavaScript console, you'd see this message, which explains why the code requesting fullscreen stuff was ignored:

By the way, this whole "initiated by a user gesture" stuff crops up at other times as well.

So what's the best solution? 

Respect the user.

Let them choose if they want some of that good old fullscreen magic. 

I probably should stop writing now. 

But... if you really need to make the thing go fullscreen no matter what, then you could do something like this: demo | source.

Keep in mind that when resuming, users will see this screen:

Selecting either resume or restart counts as a user gesture, so fullscreen stuff would happen once an option was chosen.

So that works.

But you know what?

I still wouldn't do it.

Why?

Because the user can exit fullscreen mode at any time by pressing the ESC key.

Everyone knows this. Because it's what they do on YouTube.

So people are going to do that.

Then they are going to go to the next slide... and you know what's going to happen?

It's going to go fullscreen again.

That's not how you make friends.