Printing a slide in Captivate 6 HTML5 output via javascript

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.

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/)

Similar Messages

How to get current slide from embedded HTML5 output

I am using php to run a web application that displays HTML5 captivate files embeded in a HTML web page. What I need to be able to do is when a user clicks a button OUTSIDE of captivate (say maybe a "Finish" button) I need to be able to check if they have completed the interactive captivate capture. My research so far has show that there is little to no documentation on captivates APIs but they do exist. It looks like java script is the best option. How can I embed the captivate HTML5 output and find out if the user completed the Captivate. This could be by slide (i.e. 10/10 slides) or by percentage or a simple "Complete" would work. I just need the value so I can pass it back to php so my app can do its thing.

You already got addon running in the active ie instance. You just need to catch the WindowStateChanged event in every instance so you can write down the last event with OLECMDIDF_WINDOWSTATE_USERVISIBLE somewhere. When you need the active IE instance, just
pull from your save.
Note an IE tab may crash and take your addon with it. It is better to start a broker process to store your global data.
Visual C++ MVP

Calling Captivate HTML5 Output from an application

I want to call Adobe HTML5 and Flash Captivate published output from an application. There are several issues I'm currently experiencing duing this:
1) Iframe.
Using an Iframe works for the most part, except that we are hosting many Captivate presentations and there's a bloated number of files when showing the presentation this way, since each one gets the full set of support files needed.
There's also a bug when hiding and reshowing the Captivate presentation (using jQuery.hide and jQuery.show respectively on the parent form): when reshowing the video player controls disappear.
To get around this I progammatically set the height of the iframe to zero, and then set it back to desired screen height when showing the presentation.
2) view in app.
I'm guessing this could work but there's such a mishmash of published files and resources, in our case over 200 in all.
There are several issues we run into in general:
1) jQuery in the published captivate is an old version of jQuery 2.0.0 is current.
2. jQuery ui in the published captivate is an old version of jQuery. 1.10.2 is current.
3. [presentation_name].htm files do not capture javaScript events or open urls currently in the proesentation, only the index.html file does.
-David

The following Thread helped me to solve this issue...
Switching applications without logging in again
Thanks

Audio Not Working in Captivate HTML5 Output

Does anyone have difficulty with HTML5 audio playing? Specifically, slide audio does not play after a Random Question slide.
To duplicate the issue:
1. create a new Captivate 7 (or 8!) project
2. insert 2 blank slides, each with Slide Audio
3. Create a question pool with 2 multiple choice questions and insert a Random Question slide between the 2 previously created Blank slides
When playing in HTML5 from the start (F11), the second background audio does play (is muted). Is there a workaround I can try? We need both: slide audio and random questions.
Thank you.

For those having this difficulty:
I think I've found a workaround for this issue. I’m finding when audio is placed on each question slide in the pool, the audio on subsequent slides play. The audio on the question slides has to be different from audio used on non-question slides (but all the question slides can use the same audio). Also, the question slide audio can be a very short and silent piece of audio, so nothing is heard on the question slide itself.
Bruce

Print pdf from another frame in IE via javascript

I am responsible for a little web application. There we have 2 frames. In one frame is an pdf-file, this frame is not visible for the user. In the other frame is an button. By clicking the button the pdf-file should be printed.
The onclick event handler of the button looks like that:
parent.pdf.focus();
parent.pdf.print();
This works with firefox with all acrobat reader versions and IE up to acrobat reader version 6. But there is a problem with IE an adobe reader plugin version 7 and 8. In this constellation the user is presented the normal printing dialog of the IE and not the printing dialog of the adobe reader plugin.
Is there any workaround to solve the problem.
Pressing the print-button of the adobe reader plugin is no solution because the frame with the pdf-file is not visible for the user.
Thanks a lot
Matthias G.

iText creates PDFs, but it doesn't print PDFs. I'll look at gsprint; hopefully, it'll do what I need it to do. I do have the luxury of knowing that all users will have a version of Acrobat Reader, so it's too bad I can't kick off a process. The best I could do is kick the process off using Acrobat Reader to open the file and then print from the menu. This won't work since I need a way to ask for type pdf and have windows use the version registered, not the version hardcoded.
For example,
Process pr=null;
String arr[] = {"C:\\Program Files\\Adobe\\Acrobat 5.0\\Reader\\AcroRd32.exe",tmpf.getPath()};
try {
pr = Runtime.getRuntime().exec(arr);
} catch (Exception e) {
e.printStackTrace();
//Handle the exception
I tried using AcroRd32.exe, but it failed in finding it. Anyway, this would be last resort, since the user wants to press a Print button and grab it from the printer. I looked at the Java Print API (we are still on 1.2.2.008, so it'll be end of year before making the leap to 1.4) and it's worse than getting a root canal without novacaine.

Question about .swf and HTML5 output and passing variables via querystring

Hello,
I am using Captivate 7. We're developing a program that we would like to output both for desktop users and mobile users.If I'm correct, multiscreen.html will determine whether or not to load index.html (which is for mobile users) or yourprogram.htm (for desktop users).
Currently, we pull and push data from the database using .NET via a querystring and Javascript into yourprogram.htm. In the program, there's a Response.Redirect which sends that data (what screen you've finished reviewing as well as quiz data). So it basically reloads yourprogram.htm after each "save" point. We're wondering how to best approach it if multiscreen.html is first loaded, we imagine the variables may not get passed back and forth correctly into the index.html(HTML5 output)? Has anyone had experience with developing a program this way?
Looking forward to your insights, recommendations and anything to look out for.
Thanks,
Ruth

Basically, the code is meant to be an example of using a wrapper to modify output before it gets written to the file. So, println is called and the wrapper just alters any text that comes to it before it gets printed to the file. Think of writing to a message to an error log and appending the Date and time to the front.
The code works fine if you only work on the string that is passed in by itself such as:
s = s.replace('1', '2');When I try to add text onto the string s I run into problems. I need to send the length of the string to the write function but then length ends up being 8202 on the new string. I don't understand why. I am wondering if this has to do with converting chars to string or the way strings are passed to methods.
This method is called first and then calls the write method with the string as a param.
public void write(char[] cbuf, int off, int len) throws IOException {
                String s= new String(cbuf);
                this.write(s, off, len);
        }but for some reason when I try to create a new string from the string passed in or try to append text to it, the length of the string gets message up.
Does that help?
Sorry, I am just trying to understand what is going on here.
Thanks.

Is there a way to customize HTML5 output from Captivate?

I am working on some JavaScript navigation for a project in Captivate 6 and I noticed that when it gets published as HTML5 content, every JavaScript call that is performed is followed up by a cpCmndResume = 1 in the Project.js file. It would make sense to leave it up to the programmer to include this call if it is necessary for the code. It causes problems when testing the slides inside Captivate. In order to test the project, I have to publish it and edit the Project.js content to remove all of the cpCmndResume = 1 commands. I have a navBar that pauses slides via a JavaScript call and the cpCmndResume = 1 kills the functionality of that completely. I have other nav buttons that get disabled when the slide is paused, so when they get clicked, they don't do anything, but the movie gets resumed because of the cpCmndResume = 1 in the Project.js after the JavaScript call. Any ideas or suggestions to fix this issue?

I think you need to remember that the HTML5 output from Captivate 6 has been designed for people that do NOT want to fiddle with the JS code after publishing. It's targeted at non-programmers.
So if you've customised certain output components (e.g. playbars or navigation) and now find that things are not working as you like, the cause is most likely going to be something that you've modified away from the standard setup.
It would be virtually impossible for Adobe to know in advance (and cater to) all of the possible wayts that programmers might want to hack their default output. So, although you are by all means free to ask if they will help you with this issue, please understand that they may not wish to encourage this avenue all that much, as it could open up a whole can of worms for them.

Issue with TOC overlaying MP4 embedded video in Firefox (Captivate 7 HTML5 output)

Only in Firefox, I am coming across an issue when I have a video embedded on a slide, the overlaying Table of Contents displays but is not clickable. This is both when the video is paused and playing. The TOC comes over the embedded video area on the slide. I have considered it is possibly a z-index issue with Firefox, but really need a workaround.
Firefox 28.0, Captivate 7 HTML5 package, MP4 video

Hello Kris,
Please check your output in other browsers like Internet Explorer and Google chrome as well.
HTML5 output from Captivate is tested and supported only on below browsers
Internet Explorer 9 or later
Safari 5.1 or later
Google Chrome 17 or later
http://helpx.adobe.com/captivate/using/publish-projects-html5-files.html
Thanks

Printing only visible item on slide in Captivate 4

Hello,
I am trying to print a slide in the project. However, on this particular slide, I have several items that are not visible unless the certain variables are true. When I use Captivate's print widget, it prints EVERYTHING on the slide, regardless of whether it is visible or not. Essentially, what I want to print is only what is showing on the screen like what the "print screen" function will do. Is there anyway that this can be done?

See if this widget would help: http://captivatedev.com/2011/10/09/adobe-captivate-widget-dynamic-pdf-export/

Exit button not working Captivate 7 output to HTML5 and SWF

I have several courses developed in Cp 6.5 that do not have this issue and are currently running on Taleo LMS.
I've built a test course with 6 (mostly blank) slides, including two quiz questions. On the final slide I have placed a Finish Course button with On Success: Exit action. The project end options are set to close project and I've included an On Exit: Exit action on the final slide. The Finish Course button successfully closes the browser window in Preview in Browser (IE9) and Preview HTML5 output modes.
I then published the course to both HTML5 and SWF output formats with scalable HTML selected. Once I uploaded the course to the LMS and tested it, the Finish Course button does not close the browser window. I've tested in IE9, Firefox, and iPad, and it doesn't work on any of these. I've also tried including the built in exit button on the playbar, and it doesn't close the window either. At the final slide, after clicking the Finish Course button, the slide fades to white and then stops.
The LMS reports that the course is complete; I thought maybe it was an issue with the settings in the LMS course, however I have several other courses that were developed in Cp 6.5, published to the same LMS with the same "Exit" button on the final slide, and I have mirrored every course setting that has worked in the past.
Any suggestions as to what could be keeping the window from closing?
Thanks,
PV

Why does there need to be a button used now when in CP 6 and 6.5 it worked seamlessly? Will this be fixed by Adobe and when?
Adam Lynch
Senior Media Specialist
Project Lead The Way, Inc.
3939 Priority Way South Drive, Suite 200
Indianapolis, IN 46240
phone: 317.669.0845 | mobile: 518.469.7617
fax: 317.663.8296
www.pltw.org<http://www.pltw.org/>
Preparing students for the global economy. Now even earlier.
PLTW Elementary coming fall 2014. Click here to view the trailer<http://www.youtube.com/watch?v=rikLnSAoTpQ>.
Confidentiality Notice: The information transmitted is the property of the sender and is intended only for the person or entity to which it is addressed and may contain confidential and or privileged material. Statements and opinions expressed in this e-mail may not represent those of Project Lead The Way, Inc. Any unauthorized review, retransmission, dissemination and other use of, or taking of any action in reliance upon, this information is prohibited. If you are not the intended recipient, please contact the sender by reply e-mail and destroy all copies of the original message and delete the material from any computer. If you are the intended recipient but do not wish to receive communications through this medium, please so advise the sender immediately.

Captivate 7 - HTML5 Output and Interactions - coming to the front

Hi all,
Don't know if anyone else has had this issue. I have found that when using inetractions with HTML5 output they automatically come to the front of the slide regardless of where you placed them in the story file.
I had used white rectangles to hide the interaction border but this now doesn't work in HTML5 (does the trick in SWF format).
Any ideas?
Cheers.

Hi again Mayank,
Little way down the road and it's not working . I have been testing away and discovered several things.
I started a new project and copy and pasted my slide from the main project with the accordian widget over to it. This was initially not working when tested in HTML5 so i proceded to chop away stuff untill it worked.
I discovered that if you have any objects with a shadow on the slide in any place (including not overlapping the widget) the whole widget breaks. I also found that if you had a 'line' smart object anywhere that the whole widget breaks.
Once i made sure i had no lines and shadows on the slide the widget then worked as expected with it staying at the back.
However i have found that no matter what i do in my main project the widget never works, even when it is the only thing on a new slide? This suggests a project wide issue and i have no idea what that could be.
Is there a chance that the actual save of my project is the issue as it was created before i changed the code? If so is there somthing i could change in the code of my save file to make it work?
I thought maybe i could copy and paste the entire project into a new project but of course all the click boxes change back to continue which is a nightmare.
EDIT: I just tried copying the entire project over to a new project and although all click boxes were on continue the slide with the widget worked fine (with the above amends).
EDIT EDIT: Hah, okay i have now discovered that deleteing the images of my master slide allowed the original project to work with the above amends (lines and shadows removed) too? So its the master slide thats the problem!

Printing slides from Captivate

I am a new Captivate user and I can't find this info anywhere.
I use Captivate to build presentations, but the other SME's don't have Captivate to make edits.When we used Powerpoint for presentations, our standard practice was to convert the Powerpoint presentation to PDF and print the PDF for each SME to make notes on. My SME's would like to be able to print the Captivate presentation in order to make notes, the same way they used to print Powerpoint slides.
I also need to be able to use each Captivate slide for a handbook. I am hoping there is an easy way to do this, rather than taking screenshots of each slide....
I use Adobe Captivate, and I have Adobe Acrobat 9. My SME's only have Adobe Reader. Any help is greatly appreciated.

Welcome to our community
Click File > Publish and choose to publish Print from the dialog on the left side.
Cheers... Rick
Helpful and Handy Links
Captivate Wish Form/Bug Reporting Form
Adobe Certified Captivate Training
SorcerStone Blog
Captivate eBooks

How do you print the slides in the question pool in captivate 6?

how do you print the slides in the question pool in captivate 6?

You move them back into the main project first, and then print them like other slides.

HTML5 Output for Adobe Captivate 6

Hi,
I really need some Help. I am making a static widget in captivate 6 to where it could also access the system variables in captivate (Like cpCmndPause, cpCmndExit and etc.) using Actionscript 3.0. Now, It is for the swf Output. I am making for swf Output and as well as Html5 Output. I made Successfully the Static Widget for the swf Output and my Problem is how I could Make this in HTML5 Output. I did make a .wdgt file to where it contain the swf directory and html5 directory, And I would like to know if How I could make/access the same system variables in captivate, and I think it would be through javascript right?. I really need your Help on how to do this.
Is this available for the Html5 Output in Captivate? really need your Help. Thank you.

Do you have some links or example how to access those system variables in captivate (for HTML5 version)? I've doing this for almost one week but I didn't see any solutions forthis. I am making a new customized widget that could control the captivate commands like cpCmndPause,cpCmndNextSlide and other captivate commands. I'm making the .wdgt file in captivate so that it would support for both swf and html5 output. Thank you for your Help.

What is the best video format for streaming video in Captivate 6 for html5 output?

I'm guessing it's h.264 mp4, but I haven't been able to get it to stream. Can you stream mp4s from Amazon S3?

Hi Rod,
That link is from the Captivate help file:
You could also find this documented in the help file link:
http://helpx.adobe.com/pdf/captivate_reference.pdf
Look under the topic "Unsupported objects in HTML5 output".
Thanks!

Printing a slide in Captivate 6 HTML5 output via javascript

Similar Messages

Maybe you are looking for