Skip to main content
J
j_pulley1996
Known Participant
December 26, 2013
Question

Printing a slide in Captivate 6 HTML5 output via javascript

  • December 26, 2013
  • 2 replies
  • 3506 views

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.

This topic has been closed for replies.

2 replies

E
ErickJ
Inspiring
January 15, 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

J
Jim Leichliter
Legend
January 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!

E
ErickJ
Inspiring
January 16, 2014

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

J
Jim Leichliter
Legend
December 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.

J
j_pulley1996Author
Known Participant
December 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.

J
j_pulley1996Author
Known Participant
December 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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices