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

Dec 05, 2018

I am trying to create a print capability for my results page using the window.print(): java script.  It will print the page, but it is off center (to the right) and cuts off part of the page.

This training is for more than 850 people, so workarounds are difficult to use effectively.  I would like to set it up so it automatically prints correctly without the user having to make any adjustments.

Any ideas?

10 Replies
Shiela Marie Marcos

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!

Tamara Tarasova

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.

Ginny Asher

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();
}

Martin Sinclair

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!

Jean-Guy  Boulay

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