North Texas Captivate User Group

When my Captivate 2 files are launched from the LMS/CMS, they are presented with minimal browser chrome - no browser toolbars, no buttons, no address bar, etc. However, when you preview in Captivate, it presents with full browser chrome. I have been searching for a way to preview my projects directly from Captivate so that they appear the same way our CMS presents, with minimal browser chrome, and finally came up with a solution, using a little bit of embedded JavaScript in a special slide at the beginning of my project.  Solution and explanation below the fold…

First, I created a blank slide at the beginning of my project, and named it “dechromer”. I went into the slide properties, changed the display time to 0.1 second, changed the Navigation option to Execute JavaScript, with a target of “Current”, and entered the some JavaScript to accomplish the following tasks:

• Open the current page in a new, low-chrome window, called “mywin”.
if (window.name!='mywin') { //only run this script in the original window
mywin=window.open(window.location,'mywin','width=' + (screen.availWidth - 10).toString()+ ',height=' + (screen.availHeight - 12).toString() +',scrollbars=no, location=no, directories=no, status=no, menubar=no, toolbar=no, resizable=yes'); //open the window to desktop size, minus a few pixels for the remaining chrome.


• Position “mywin” in the top left corner and resize it to fill the screen.
  
mywin.focus(); //set focus on the new window
mywin.moveTo(0,0); //move it to the top left
mywin.resizeTo(screen.availWidth, screen.availHeight ); //resize it again (browser compatibility)
} //end of what runs in the original window


• Close the original chrome-bloated window
  
else //this runs in the new window
{window.opener.opener='';window.opener.close();} //close the original window without confirmation


Putting it all together :

if(window.name!='mywin'){mywin=window.open(window.location, 'mywin', 'width=' + (screen.availWidth - 10).toString()+ ', height=' + (screen.availHeight - 12).toString() +', scrollbars=no, location=no, directories=no,status=no, menubar=no,toolbar=no, resizable=yes'); mywin.focus(); mywin.moveTo(0,0); mywin.resizeTo(screen.availWidth, screen.availHeight );} else {window.opener.opener=''; window.opener.close();}


A Few Words of Caution

• You will most likely want to hide or delete this slide beore publishing in an LMS / CMS, as they may have a hidden tracking frame that would cause javascript errors. You could write a detection script for this, but it is probably best just to play it safe and hide or delete the “dechromer” slide.
• You will notice a short “flash” as the new window opens, and the old window closes.
• To minimize the “flash”, The dechromer slide should be the very first “visible” slide in your project. Set the dechromer slide background color the same as the HTML background color (you can find that under Skins)

This entry was posted on Wednesday, July 18th, 2007 at 3:44 pm and is filed under Captivate Tip of the Week, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.