Adding a Print Button to the Player and other SL3 / 360 Player Hacks
Jun 26, 2017
Similar to my post about adding a logo to the player, you can add a print button directly to the player too! Here is how:
- Add a T/F variable to control running the JavaScript only once. Set its initial value to True.
- Add your JavaScript trigger to run When timeline starts if your control variable is equal to true. (See JavaScript explanation below)
- Set your control variable equal to false When timeline starts and be sure it is in the trigger stack below your JavaScript trigger
- Be sure the Volume Control has been selected in the Player Properties Window. (You can hide this later if you want to, but for now you will need it to use as a location target.)
Here is the JavaScript:
//First we are going to create and add a Print Button to the webpage
//Create a new input element and set its attributes
var printButton = document.createElement('input');
printButton.setAttribute('type', 'button');
printButton.setAttribute('id', 'CustomPrint');
printButton.setAttribute('value', 'Print Page');
printButton.setAttribute('onClick', 'window.print()');
//Add your button to the page
document.body.insertBefore(printButton, document.body.firstChild);
//This next part uses a bit of JQuery to find the volume control in the StoryLine player and then move the button you just created to be right after it.
$(".volume").after($("#CustomPrint"));
//Format the button with the same style as other player buttons.
$("#CustomPrint").addClass('btn cs-button')
//If you want to hide the volume control, add the following line.
$(".volume").hide();
The StoryLine file I'm including demonstrates adding a Logo, adding a Print button, hiding various player elements, and showing elements that you've previously hidden.
Credits: Thanks to James Kingsley for the inspiration. His "Hacking the Player" webinar was very useful. You can view it here: Webinar Recording
36 Replies
Thanks for sharing the steps with us, Owen.
That is a great use of the JS!
Add this line to style it too look like the built in buttons:
$("#CustomPrint").addClass('btn cs-button')My pleasure; hopefully, some one will find it useful.
Thanks James. I updated the original post and the SL3 file to include this. :-)
Thanks Owen!!
Hope it was useful Wendy. :-)
This looks great, Owen.
When I do this in Storyline 360, the Print Page button is not on the player but up in the corner (see below). Could be because I'm using CC, so the CC button is on the Player next to the Volume Control? Looks like I've just run out of room...
It looks like it is breaking at the jquery part. It might be the code you are using or it might be crowded player. Can you post your code here or share your file?
Hi Owen -- thanks for you reply. It looks like it automagically fixed itself...I love when that happens. Thanks again for this code and the logo code!
I love and hate when that happens. I'm always happy it is working, but hate not knowing what caused the "glitch in the matrix" to begin with. :-)
Hi Ed, saw your image above. I recently finished a suite of Vocera eLearning packages: Vocera badges, Vocera Collaboration Suite (VCS) and web console. Do you want to share viewing access?
Cheers Christine
Thanks, Christine. I'll ping you directly.
Hi Owen, can ypu post the updated script? Thanks Garry
I am not sure what updated script you are looking for. I have not had to change any of the scripting here.
Hi Owen,
I wanted to play with your file.
When I publish it and launch it with IE / Chrome, my print button appears exactly like Ed, mentionned above, on up left part of the webpage, out of the Storyline content/player
When I use IE, while clicking on Print button, a popup appears called 'Message from webpage', with following text 'There was an interanl error, and Internet Explorer is unable to print this document'.
Are you aware of this issue and do you have any idea to solve it?
What version of SL are you using? Did you make any changes to my file? What publish settings did you choose? Can you share some screen shots?
Hi Owen,
I'm using Storyline 3, Update 1: 3.1.12115.0. I tried different things:
* Before changing your file : the "Print button" appears now properly inside the player, like for Ed...very strange! But it still leads to an error message, which appears after allowing to pick a printer
* after changing your file (only change the player) : print button appears still "out of the content"...and still an issue while clicking on the button...
I publish as LMS, Tin Can API as Output option, and I have a look to the story.html file
I attach 3 different screenshots of the content
It appears that you are changing the links and this might break some of the JavaScript used to move the button into the player. The JavaScript is looking for certain elements to be in certain places for this to work. Can you send me your .story file?
Regarding the other print issue, that seems to be a browser/driver issue unrelated to StoryLine.
See this link for help: https://www.techwalla.com/articles/there-was-an-internal-error-internet-explorer-is-unable-to-print-this-document
Hi Owen,
Do you want me to share the file here? or do you want I send it to you by mail?
Concerning the print issue, you're right, this is not related to Storyline...This is another topic, could be linked to printer drivers ,according to a few websites...but, if it does not work also with PDFCReator, I'm not so sure this is a driver issue
regards
Olivier
Posting it here would be best.
I have 2 different files, which look very similar, I will post only one...
Thanks again, Owen
OK - several issues that I see that could be the culprit.
Issue 1: This leverages HTML 5 functionality and your publish setting are for Flash with HTML 5 fallback. You need to change this to HTML 5 with Flash fallback.
Issue 2: As noted in the post, you need to have the volume button selected in order move the Print Button next to it. From the post....
//This next part uses a bit of JQuery to find the volume control in the StoryLine player and then move the button you just created to be right after it.
$(".volume").after($("#CustomPrint"));
//Format the button with the same style as other player buttons.
$("#CustomPrint").addClass('btn cs-button')
//If you want to hide the volume control, add the following line.
$(".volume").hide();
Fix these issues and see if that resolves the problem.
Hi Owen,
Thansk for your very quick answer!
Just to be ensure I do not make mistakes, should I open the story.html and check that everything is fine on it or should I launch the story.swf or story_html5.html ?
With IE, it seems that your print button well appears with story_html5.html, but not with story.html, is it normal?
Olivier
Story_html5.html is the file you should use.
story.html is the page associated with flash output.
I would also change your default publishing setting to html 5 with flash fallback as flash support is being dropped by modern browsers.
Can someone help me with why this will not work? I just simply added the print onto the media player to test before I went any further or built out a print view results slide. When I publish it and click the print page, it pulls up the printer view but there is nothing there.
Would appreciate any tips!!
Thanks!
This discussion is closed. You can start a new discussion or contact Articulate Support.