Close pop-up OR print properly

smiller7502

I hope I'm missing something simple here, but the longer I work at it the fainter my hope gets.

My ultimate goal is to print a portrait-oriented page from a button on a landscape-oriented page and then take the learner to a third (landscape) page. The portrait page has page dimensions set differently from the course.

When the button action is a simple GoTo, the portrait page prints perfectly from all Lectora views, but once the title is uploaded to the LMS, it prints centered on the browser width without regard to the page's unique dimensions; this results in the right-most third or so of the page being cut off.

I tried Tim K's fix for this here but it had no effect. I would prefer a fix for the printing problem, so if you've got one you can skip the rest.

Next, I tried a Display Page in Popup action instead. Now it prints perfectly even from the LMS -- but the GoTo action to go to the third page displays the third page in the popup. That's no good; I need to close the popup and return to the landscape window.  I saw Math's suggestion here but it seems to me it would require a timer to determine when to close the page; if I set the timer too short the page may not print, too long and the learner might feel stuck.

Help?

mnotermans5114

What you might try Stan... after rereading my own comment on closing a popup... add a function ( either a group closing a specified window or a javascript doing that ) on the parent window. Then on the print popup add a button that calls the group or function. That might work...

mnotermans5114

Hi Stan, tried my idea and do think this works. Here is a Lectora Online .pkg with this solution. You should be able to simply import this in Publisher or Inspire and check the solution.

If not let me know and i convert it in the desktop version.
Basically to call a function on the parent window to close the popup this is used:
window.opener.closeWindow();

Where the function closeWindow() is defined in the mainpage.
//Stores our opened window
var windowOpened;

//Opens our Window

function openWindow() {
windowOpened = window.open("popups_printingpopup.html","ChildWindow", "height=600,width=300");
}
//Closes the window
function closeWindow() {
console.log("called");
windowOpened.close();

}

 

Regards and have fun,
Math

smiller7502

Thanks for this, Math, but I have some concerns about this solution from a sustainability perspective. For one thing, out of three course designers here I'm the only one who knows JavaScript. And for another thing, this solution works for me only after I upload it to SCORM Cloud or the LMS; in Lectora's Run and Preview modes, the popup opens blank, which makes it look broken, and in Preview in Browser mode of course the popup shows a 404, which makes it look even more broken. Sure, I could leave a note in the course saying it has to be uploaded to work, but that complicates troubleshooting.

Additionally, I can't quite get everything to work. Here's where I'm at now:

• Button on page 1 calls JS openWindow(), popup opens.
• Actions on popup change contents of some text boxes, print the page, and call JS window.opener.closeWindow(). This closes the course!

My closeWindow() function:

function closeWindow() {
 windowOpened.close();
 trivExitPage("page2.html");
 }

mnotermans5114

Can you share your example Stan ?...wondering especially the trivExitPage...

And indeed the concerns you mention...yeah... in Lectora Online offcourse it works in run/preview mode... but well...its online.. ;-) If you get me a sample i doublecheck/rebuild things in desktop version...

Regards,

Math

carlfink

Could you have the button in the parent window (original course window) have two actions? One opens the print popup, the other automatically navigates to the third page. The learner would not seen page 3 until they close the popup. Simple, would work in all environments, not perfect.

smiller7502

Carl, that's a good idea, thanks. Still doesn't get me all the way home, though, because no matter what I do, closing the popup closes the course. I even tried taking out the closeWindow() call; uploaded it to SCORM Cloud and saw the page advance behind the popup thanks to Carl's idea -- but when I manually closed the popup by clicking its X, the course closed.

Demo of the problem attached -- and let's not forget that all of this is the wrong solution; I would much rather be able to print the form properly without using a popup at all, because we're trying to design mobile-friendly.

mnotermans5114

So a dynamic change to another size for printing, and then setting it back to the original after printing is what your after actually...

timk

Do you know about CSS "@media print"? This lets you restyle the page only for the printer. There would be no need for a popup.

Also I just tested printing a page in Lectora 17.1.3. It seems like Trivantis changed the "Print current page" action and integrated  some modifications to the page before printing, e.g. it's left-aligned automatically.

--

I don't know which LMS you use. In moodle the following worked:

Open the Popup with a standard "Open page in popup" action

The button in the popup does:

1. Run javascript: getDisplayWindow().opener.trivNextPage(); (Or any other Lectora command to be run on the mainpage)
2. Exit title / close window

 

smiller7502

@Tim K, thank you thank you thank you! I'm not sure why I didn't think of @media print on my own since I've used it before for other purposes, but it worked a peach here. No JS my other designers won't know what to do with, no mobile-unfriendly pop-ups, just a nice clean solution.

Thanks again!

smiller7502

Spoke too soon. Works great from SCORM Cloud, but not from our LMS (Cornerstone). The CSS seems to have no effect. Sigh. I've got:

@media only print {
  body {
    margin-left: 0px;
  }
}

Should I try anything else?

timk

Isn't the page centered via the "left" property of the pageDIV?

@media print{

#pageDIV{

left: 0px !important;

}

}

smiller7502

You're right, but that didn't help. I don't have a left: statement after onresize="Reflow()" (I'm in 17.0.6 and cannot upgrade right now because it could take a week to get our ITS department to approve the installer.)

Here's what I do have after onresize="Reflow()":

<script>
if( is.min ){
 findWH()
 var left = (winW > 700) ? (winW-700)/2 : 0
 document.write('<style type="text/css">#pageDIV { position: absolute; top:0px; left: ' + left + 'px; width:700px; height:835px; clip:rect(0px 700px 835px 0px); overflow:hidden;' )
 if(is.iOS)
 document.write('-webkit-text-size-adjust:100%;')
 document.write('} </style>')
}
</script>

I changed left: ' + left + 'px to left:0px, and still didn't get the results I want. The page prints sort of acceptably. It's small and in the top right corner of the paper, but not cut off.

I tried abandoning the special page size for this page, redoing the form a little to make it fit in the standard course height, and moving it all the way to the left on that page. It prints normal size, but still with a huge left margin that cuts off a couple characters on the right.

Finally I made the page size wider than the rest of the course, almost double the width of the text box, and left the text box all the way to the left. It prints beautifully now. Go figure -- and I'm sure it'll break the next time I upgrade Lectora.

Thanks again for your help!

mnotermans5114

Do stay on 17.0.6 ! The last version of 17 will introduce weird new issues.