Printing off center using the window.print(); java script

Hi Luke,

Is the menu visible on the slide that you want to print? I've noticed that if the menu is showing on a slide, using the window.print(); function will also try to print the menu and push the rest of the content to the right which will result in it cutting off.

If this is the case and you want to avoid having the learners to manually hide the menu, you can disable the menu for just that slide by going into the slide properties and changing the player features from "Player defaults" to "Custom for the selected slides" and unchecking the Menu option.

Here's a community article that describes this better. Storyline 360: Adjusting Slide Properties

Hope this helps and happy holidays!

Hi

I stumbled across this searching for an answer - I was using javascript to open a print dialogue box from my SL360 course. It was pushing everything over to the right rather than scaling to fit paper, meaning learners had to fiddle with the print properties to ensure the page they wanted to print wasnt cut off.

SOLUTION:

the above was happening when I had 'Menu and Controls' switched off within the player, to give it a seamless modern feel. Despite them being off, when attempting to print it was still pushing everything to the right to make room for the invisible menu etc.

Instead, I turned Menus and Controls back ON, and manually switched off the resource tab, the previous/next buttons, the volume control etc. Basically created the seamless modern player the old fashioned way.

And voila! When I now print, it centres the content automatically and no longer pushes everything off to the right.

Old conversation but hope this helps someone!

Unfortunately, I run into the same problem with the menu being hidden. It is a bit worse in Chrome cutting significantly a part of a page but in  IE the slide will still not print correctly. Things used to work fine in Flash with a more complex code but now when I am transferring the course to HTML5, I am using window.print(); to print the certificate and it is a mess.  Would greatly appreciate your help.

Hi Tamara,

Storyline 360 has a built-in Print Results feature that can be added to the Result Slide.

With Javascript issues, the community will likely need to take a look at your .story file and the Javascript code you added to see what's going on.

Hi- did we get any feed back on this? I was using the following Java script within my slide when click the button it triggers the javacscript. I have imported the flash file print.swf- worked abosultely fine in storyline 2, but in storyline 360 I am getting half the page missing when publishing to HTML5. Anyone with any ideas?

if (document.location.href.indexOf('html5') < 0) {
GetPlayer().printSlide()
} else {
if(!window.hasPrintStyle){
window.hasPrintStyle = true;
var css = "@media print {div.controls.grid-row.inflexible,div.area-secondary.cs-left.inflexible,header.header-primary.centered-title.extended-height,div.presentation-wrapper:after {display:none !important; visibility:hidden !important;}}";
head = document.head || document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
window.print();
file.print();
}

Unfortunately, it didn't work for me.  Using Internet Explorer (company mandated). Running off a server, not local. Still pushed everything to the right and cut off the content.

This is a little older, but did anyone check the scaling option when printing? Each browser handles that differently. If I scale down from 100% to say 80% it looks and prints fine.

Still an issue, I have to scale down to 70% for the screen to fit in, but I have ridiculously large margins now.

I have a better solution than scaling the content. Being inspired by ChristianKing in another thread I created a style to translate the content horizontally. Storyline always wraps content in a Div called "wrapper". So we can target that Div. It works perfectly if you reduce your print margins to zero, otherwise you might have to adjust the scale to something like 95% if you want margins.

//document.body.style.zoom = .95; //set scale to 95% if you need margins

document.getElementById("wrapper").style.transform = "translate(-220px)";

setTimeout(window.print(), 1000);

//setTimeout(document.body.style.zoom = 1, 1010); //set scale back to normal