Printing a slide in Captivate 6 HTML5 output via javascript

Report · Dec 26, 2013

I have been googling for the past 3 work days trying to figure this out.

I had some limited success with printing a div via javascript and pointing it at the slide div (I know it happens to be Slide16952).

Which is fine, except it doesn't keep the CSS elements of the slide which is what makes it a pretty completion certificate. Print widgets won't work because I have to publish to HTML5 and not flash (no, no choice in this). I am struggling to get any javascript working.

I have this right now which I just picked up as a generic to try and get me going

function PrintElem(elem)

{

Popup($('<div/>').append($(elem).clone()).html());

}

function Popup(data)

{

var mywindow;

mywindow = window.open('', 'mydiv','height=1280,width=720,scrollbars=no','');

mywindow.document.write('<html><head><title>my div</title>');

mywindow.document.write('<style type="text/css" media="print,screen">.hideMe{display:none;}.NoPrintClass{display:none;}</style>');

mywindow.document.write('</head><body>');

mywindow.document.write('drop down selected value in parent: '+mywindow.opener.document.getElementById('testSelect').options[mywindow.opener.document.getElementById('testSelect').selectedIndex].text+'<br/>');

mywindow.document.write('contentStarts<br/>');

mywindow.document.write(' using jquery: '+data);

mywindow.document.write(' using javascript: '+mywindow.opener.document.getElementById('mydiv').innerHTML);

mywindow.document.write('<br/>contentEnds');

mywindow.document.write('<br/>');

mywindow.document.write('</body></html>');

mywindow.document.focus();

mywindow.document.close();

mywindow.print();

return true;

}

I then point my print button at PrintElem('Slide16952') via a javascript window.

obviously I haven't written this to fit my particular project yet, but the part I am having the most issue with is trying to get the captivate CSS stuff to come through. mydiv should = Slide16952 I think. The CSS form that captivate creates has several block visible elements, but I believe the one I am trying to make sure I get is .cp-shape in CPLibrary.css, but there could be others I want too and I am not sure which.

has anyone had any luck getting a single slide printed in HTML? window.print() only gets me like 95% of the slide and a loft of white space around it.

Report · Dec 26, 2013

Just a suggestion, why not create your certificate outside of Cp.. for example, here's a clever solution from the Articulate Storyline community:

http://community.articulate.com/forums/p/12471/74857.aspx

A very similar solution can be done via Captivate with minimal effort.

Report · Dec 26, 2013

hmmm, well mostly because This will not work in the iOS output or HTML5.

I'll see what I can come up with for making an HTML page and linking the certificate button to it and then grabbing the Name variable from captivate for it. Might be easier than trying to play with captivate's CSS and modifying the HTML output file a ton. The bigger issue is that once the user printed the certificate there was supposed to be an exit button that came up and exited the course, if I do an external certificate page I will have to redesign my training course to account for that in someway by putting an exit button somewhere else.

Report · Dec 27, 2013

So I am closer, but it's not perfect.

function printPartofPage() {

var DocumentContainer = document.getElementById('Slide16952');

var WindowObject = window.open('', 'PrintWindow', 'width=1280,height=720,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');

WindowObject.document.writeln('<!DOCTYPE html>');

WindowObject.document.writeln('<html><head><title></title>');

WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="assets/css/CPLibrary.css">');

WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="assets/css/CPLibrary1.css">');

WindowObject.document.writeln('</head><body>');

WindowObject.document.writeln(DocumentContainer.innerHTML);

WindowObject.document.writeln('</body></html>');

WindowObject.document.close();

WindowObject.focus();

//WindowObject.print();

//WindowObject.close();

}

what I get out of this code is just the text on slide16952. I am trying to figure out how to get the background and a couple of other parts of the slide to show up. I think I might combine this with the idea of using an external completion certificate HTML document or at least just an image.

Report · Dec 27, 2013

function printPartofPage() {

var DocumentContainer = document.getElementById('Slide16952');

var WindowObject = window.open('', 'PrintWindow', 'width=1280,height=720,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=no');

WindowObject.document.writeln('<!DOCTYPE html>');

WindowObject.document.writeln('<html><head><title></title>');

WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="assets/css/CPLibrary.css">');

WindowObject.document.writeln('</head><body>');

WindowObject.document.writeln('<body style="background-image:url(dr/CertBorder.png);">');

WindowObject.document.writeln('<h1 style="text-align:center; top: 30px;">Certificate of Completion</h1>');

WindowObject.document.writeln(DocumentContainer.innerHTML);

WindowObject.document.writeln('<img src="dr/17170_271_44.png" style="position:absolute; left: 896px; top: 464px; width: 294px; height: 73px;"></img>');

WindowObjext.document.writeln('<p style="text-decoration:overline; position:absolute; left: 908px; top: 494px;">Authorized Signature</p>');

WindowObject.document.writeln('</body></html>');

WindowObject.document.close();

WindowObject.focus();

//WindowObject.print();

//WindowObject.close();

}

latest code update. Almost everything is working now. I am going to get rid of the h1 line because I am going to redesign the certificate image and incorporate the Certificate of Completion part in the image file CertBorder. I may also do that for the image (which is a signature) and the <p></p> portion, so that I am pulling all of that into the image template and aligning it where it needs to be and just grabbing the image.

I have the WindowObject.print and .close commented out so I can get it all working. Once I know it works I will uncomment those for final testing.

This isn't a great solution, but it's the only one I can seem to make work at this point and it will be pretty transparent to the user once it's done. So far it doesn't set off the pop-up blocker for me, but I am doing this all locally on my hard drive so I suspect that may become an issue once published.

also, all credit where credit is due (here is where I got my baseline code ideas http://jsfiddle.net/Zmqzb/)

Report · Dec 27, 2013

function printPartofPage() {

var DocumentContainer = document.getElementById('Slide16952');

var WindowObject = window.open('', 'PrintWindow', 'width=1280,height=720,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=no');

WindowObject.document.writeln('<!DOCTYPE html>');

WindowObject.document.writeln('<html><head><title></title>');

WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="assets/css/CPLibrary.css">');

WindowObject.document.writeln('</head><body>');

WindowObject.document.writeln('<body style="background-image:url(dr/CertBorder.png);">');

WindowObject.document.writeln(DocumentContainer.innerHTML);

WindowObject.document.writeln('</body></html>');

WindowObject.document.close();

WindowObject.focus();

WindowObject.print();

WindowObject.close();

}

Final code after creating a CertBorder.png that has all the other elements that I need. The only thing I cannont control is if the user doesn't click to print background images and such it doesn't come through. I can't see a way to force that from Javascript, but maybe there is a way.

Report · Jan 14, 2014

You should be able to use CSS in your HTML5 output without it getting stripped out. I notice that your example code above alternates between using a double quote in some of your statements and a single quote in others. I've found that it works fine when you use the double quotes for your JavaScript statements and the single quotes for your HTML.

In your first example, it looks like you are using a pop-up. I wouldn't recommend that since most browsers have a pop-up blocker. I understand that you probably want the certificate to display in a separate window so that the user doesn't have to leave the main screen but you might consider some other method (iframe perhaps?).

In your final example, you are including the CSS in a separate file. That seems messy as you will have to manually copy that file to the published folder. You are compromising by using the certificate as a background image since most browsers do not print background images by default. You CAN use CSS to position the text over the image. Like I said, I think the problem is with the quotes.

Below is a working example using CSS to position the text over the image. It has to be published to HTML5 to work.

https://app.box.com/s/5vj6wjm7ji75z28eh2dy

Report · Jan 15, 2014

@ErickJ: Nice work! The cert looks great!

I tried the demo file and the certificate was produced, but I got a recurring error in the console:

Uncaught TypeError: Cannot read property 'play' of null.

I guessing this is because the code overwrites what was in the browser without refreshing the page, the Captivate JavaScript code is still there expecting there to be a Captivate object... but the document.write statements removed the Captivate object.

If you don't want to display the cert in a new window, I'd recommend using the innerHTML property of a div tag to show the certificate. This would leave the Cp project intact, but still display the certificate below the course. I would avoid using an iframe since that changes the scope of your JavaScript (not impossible to do, but it makes things harder).

Well done and thank you for sharing your solution with the community!

Report · Jan 15, 2014

What do you mean by innerHTML property of a div tag?

Report · Jan 15, 2014

Take a look here:

https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

Adobe Community

Printing a slide in Captivate 6 HTML5 output via javascript