Forum Discussion

LisaOgan's avatar
LisaOgan
Community Member
6 years ago

Need Javascript Help with Printing a Page (fixed height/width)

Hi there. I need to print a page in a SL 360 course (not a certificate). I found some javascript which has worked great, but there is one issue. The formatting/size of the printed page differs depen...
storyline 360
DaveCox's avatar
DaveCox
Community Member
5 years ago

Hello Julio,

When you just attempt to use the print command, you are restricted to what windows can print based on the current window setup. That is why you are seeing the result that you see. The page laid out for on-screen display, not for printing. The code that I listed above is designed for printing.

  • JulioPalacios's avatar
    JulioPalacios
    Community Member
    5 years ago

    Hi Dave. Thanks for taking the time to review my question.

    I think your solution is a bit too complex for me to understand. Perhaps with a bit of an explanation on the following points I may be able to replicate it.

    Brief explanation of my goal: I’m hoping to create a floorplan map of our library. When users select pertinent accessibility features, it is highlighted on the floor plan. I’d like to provide users with the ability to download a copy of the floorplan (along with the highlighted accessibility features). I’ve added a skeletal working draft in case it helps clarify.

    Deciphering your solution:

    You’ve created a layer that is hosting a webobject. In your scenario the webobject is importing text via variables (Compassiontext1, 2, 3, Trusttext1, 2, 3, etc), stylization via a CSS file and then it’s sent to the printer.

    You mentioned that the layout of the page is located in the index.htm file. Is this the same as the Story.html file that is generated by storyline? Would I need to replicate this as I am not generating a layout, but hoping to push the graphics that are on a slide to print?

    You mentioned that the storyline variables are loaded into the page for printing by the javascript located in the script.js file in the js folder. Can I omit this step as I will not be bringing in variables but rather I’m looking to replicate the slide, as is?

    You mentioned that Styling is handled by the CSS file located in the css folder (in my CSS folder I find a file named output.min.css). Would I be along the correct path to assume that it’s here where I should be making my modifications? Perhaps by adding the following code?

    @media print {
     
     @page {
     size: A4;
     margin: 1in;
     }