Captivate 8 Center Vertically in HTML Page

One other guy asked this earlier this year - but no one has responded - so I'm asking again here.
Is there a way to publish a project so that it (meaning the entire project stage) vertically center aligns in the HTML page?
Am I missing something in the interface? I am extremely new to this rapid elearning software, used to using pure HTML, XML, and Flash, so it's very possible I am missing it. I'm messing with a responsive project - and I notice it auto centers horizontally already, but sticks to the top of the page. This looks simply dreadful in a desktop browser. I don't see any settings for making the project match the full width and/or height of any browser window - no matter the size (very odd for something "responsive") so centering a constrained rectangle-shaped project screams for vertical alignment capability. My disbelief that there is no option for this simple and fundamental setting has caused me to spend several fruitless hours searching for the answer. I've gone into the html and css itself in the output folder, but that stuff is wrapper hell, and I really don't want to have to re-enter custom code every time I update and re-export a project. I can't imagine I'm correct in assuming this was overlooked? Please tell me I'm wrong .
A side note: I'm glad they gave version 8 some breakpoints to work with - but am I the only one who thinks it doesn't really feel like a genuinely "responsive" layout? I've built responsive websites before - and this is kinda cloogy. I don't see how you can get it to expand to 100% of the browser window above the top breakpoint (maxes out at like 1280 I think)... really strange implementation - but anyhow, not my main question I suppose. Was just say'n... if you know a setting for that too lol... like I said, I'm new to the software.
Thanks for any help you may have!
Jason

Okay - I'm pretty certain that Adobe has no way of simply publishing any project in Captivate 8 with vertical centering in the HTML output page. But, I think I figured this out. Admittedly, I haven't thoroughly tested using a full-blown completed project, but it works when tested on a responsive project with very little slide content thus far (which shouldn't matter). And, thanks windscorpion for the iframe suggestion - that would work perfectly normally (and allow me to really customize the html page too) but it created issues for me when trying to retain the "responsive" aspects of the project. I'll use that approach when building non-responsive projects. Unfortunately, my solution is something I'll have to repeat each time I publish the main project - so probably best to save it for final - but it's simple/quick at least.
Here are the general steps...
Publish the responsive project
Open the "index.html" file in a text or code editor
Replace a little inline css (code shown below)
Save the index.html file
Here's the code to replace:
Up between the <head> tags, there is a metric ton of content barfed into the "cpInit()" function. Find this bit of code inside that function:
id='project_container' style='left:0px; top:0px; width:100%; height:100%; position:absolute; overflow:hidden;
Change the style properties to this:
id='project_container' style='position:relative; top:50%; transform:translateY(-50%); overflow:hidden;
Now, I'm not sure if changing that from 'absolute' to 'relative' is going to have an adverse effect of some kind on any elements inside that div - but I don't see anything happening so far. The table of contents still slides normally and all that jazz. If anyone runs into an issue however - just reply and let me know. I'll so the same!

Similar Messages

How to open an HTML page that is part of my project using Captivate 6

I'm looking to create an HTML page that will use some javascript to extract information from Captivate and then render it to the browser window as a report.
I see how you can Open a URL webpage from Captivate (by putting in an explicit address ie www.abc.com or http://www.abc.com/myReport.html)
but I'm curious what address I can use if the html file is in the SAME folder at the index.html that launches the captivate project (or perhaps one folder down).. I'm wanting to do this so it works whether I've published the project to a webserver or not.
I was thinking I could use a relative reference (ie something like .\myReport.html), but I haven't had any luck thus far

Thanks Seth.
I just tried that, but when I run it in preview mode (by simply hitting F12), it gives me an error because it can't find the file in the temporary preview folder it creates (ie:
C:\Users\Tom\AppData\Local\Temp\CP2840464090993Session\CPTrustFolder2840464091009\Captivat ePreviewLoader\
I'm hoping to find a place to put it so that it works when running F12 and when running in regular 'published' mode
I was thinking I could put it in the 'C:\Program Files\Adobe\Adobe Captivate 6 (32 Bit)\Templates\Publish' folder, but when I do that, it doesn't seem to gete copied to the .\CaptivatePreviewLoader folder when running F12

Vertically center text on a page-document wide

Anyone know how to center text vertically on FrameMaker pages? (There is a way to do this, right?)
Thanks!

Nope, not document wide. You could do it manually on a page by page basis or if the content is suffciently small that you can make each page a fixed height row of a table you could use the Table middle setting for the paragraphs.
With a tool like Framescript, you could set up a procedure that would determine the bottom gap from the last line of text to the end of the text frame and then split difference to push down the top of line text, but this requires a bit of coding.

"Page Path" in HTML Page Skin

Hey Guys,
I was wondering if anyone knows how I could include the behavior that the "Page Path" Item provides, but I would like to do it in an HTML Pageskin. Seems like this would be fairly common for those people using page skins.
Thanks
-sean

Hi,
I insist : it is not possible with HTML to insert Page breaks. BUT, Tammie is right! You can use CSS (Cascade Style Sheet) to insert page breaks thanks to few lines of code in your HTML page.
Follow this link to have a look at a very simple piece of code to illustrate this :
http://www.codeave.com/css/code.asp?u_log=4016
Here it the code if you don't have access to this URL :
<html>
<head>
<title>CodeAve.com/CSS - Page Break</title>
<body bgcolor="#FFFFFF">
<center>
Page 1
<br style="page-break-before:always;">
Page 2
<br style="page-break-after:always;">
Page 3
<p>
Use print preview on your browser to see how<br>
this page would print out to three pages
</center>
</body>
</html>
Hope it helps.
Don't forget to close the post if solved (so that search in the forum is easier), and reward points (so that SDN members are happy !)

How do I add to the HTML page containing an fla?

Hi,
My site has Flash Video that plays back in a Flash movie
file.
I want to put html text on the html page containing the Flash
movie so that if a viewer doesn't have Flash, they can see a plain
text link that sends them to a page with a Windows Media Player.
When I attempt to add text to the html page containing the
Flash movie, the text doesn't appear and my page changes background
color.
Where in the source code should I be adding my html text?
Please indicate the insertion point below.
Source code below or visit
http://www.ocatillopictures.com/OcatilloFrames/Animation.html
Thanks
<html xmlns="
http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Janos-FlashPlayer</title>
<script language="javascript">AC_FL_RunContent =
0;</script>
<script src="AC_RunActiveContent.js"
language="javascript"></script>
</head>
<body bgcolor="#100068">




<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', '
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '700',
'height', '500',
'src', 'Janos-FlashPlayer',
'quality', 'high',
'pluginspage', '
http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'Janos-FlashPlayer',
'bgcolor', '#100068',
'name', 'Janos-FlashPlayer',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'Janos-FlashPlayer',
'salign', ''
); //end AC code
</script>
<noscript>
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="700" height="500" id="Janos-FlashPlayer" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Janos-FlashPlayer.swf"
/><param name="quality" value="high" /><param
name="bgcolor" value="#100068" /> <embed
src="Janos-FlashPlayer.swf" quality="high" bgcolor="#100068"
width="700" height="500" name="Janos-FlashPlayer" align="middle"
allowScriptAccess="sameDomain" allowFullScreen="false"
type="application/x-shockwave-flash" pluginspage="
http://www.macromedia.com/go/getflashplayer"
/>
</object>
</noscript>
</body>
</html>

You have the text commented out. Remove the "" after the text and it will show.

How to embed a Video stored in KM repository on html page

Hi All,
I have a requirement to embed a video stored in KM repository on html page.
My html page and related file referred in html code below (highlighted) are stored at following path in KM root>documents>test with the same name as mentioned in code.
Code which I got from net for embedding an .flv file on html is mentioned below but how should I modify it to take files stored in KM.
<html>
<head>
<title>Flash Test</title>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="Jacksonville" name="movie" width="425" height="305" align="center" id="movie">
                           <param name="allowScriptAccess" value="sameDomain" >
                           <param name="movie" value="<b>player.swf</b>?file=<b>Radvan_001MEDWHI.flv</b>" >
                           <param name="menu" value="false" >
                           <param name="quality" value="high" >
                           <param name="scale" value="noborder" >
                           <param name="salign" value="lt" >
                           <param name="wmode" value="transparent" >
                           <param name="bgcolor" value="#000000" >
                           <embed src="<b>player.swf</b>" menu="false" quality="high" scale="noborder" salign="lt" wmode="transparent" bgcolor="#000000" width="425" height="305" swliveconnect=true id="movie" name="movie" align="left" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="<b>install_flash_player_active_x.msi</b>" >
                         </object>
</body>
</html>
Please guide me for the same.
Regards,
Madhvika

Hi,
I have stored all the files referred in code ( player.swf, install_flash_player_active_x.msi and Radvan_001MEDWHI.flv ) at root>documents >test folder in KM repository
<u><i>Julian</i></u>
My requirement is to know, what path i should give for the files highlighted with bold in my code as they are stored in KM .
<i><u>
Praveen</u></i>
Can you please tell me how should I modify these lines in code (name of video file is Radvan_001MEDWHI.flv)
<param name="movie" value="player.swf?file=Radvan_001MEDWHI.flv" >
embed src="player.swf"
pluginspage="install_flash_player_active_x.msi" >
Regards,
Madhvika

How do I - change the background colour of the output HTML page

Captivate 5
I am publishing my project to html, but wish to change the background colour of the html page to match the projects colour scheme.
I can find no option in Captivate to do this, and it is always output as white = <body bgcolor="#f5f4f1">
I change the colours used within captivate and change the html colour of the borders, or the captivate project background, but this does not effect the html page when published.
Is this possible?
At present I am having to manual amend the html to the colour of my choice.

Hi there
Can you post a screen grab of what you are seeing? The instructions Orange_Sean provided should have done the trick for you. Even though you aren't using Borders, it still should have changed the HTML background color. Unless we have unearthed a bug or something.
Cheers... Rick
Helpful and Handy Links
Begin learning Captivate 5 moments from now! $29.95
Captivate Wish Form/Bug Reporting Form
Adobe Certified Captivate Training
SorcererStone Blog
Captivate eBooks

Centering a single character horizontally AND vertically on a page

This should be simple, yet I see no way of achieving the desired result. Please see this screenshot: http://bit.ly/gQY5mB
I selected the number "2", as you can see. See all that vertical "empty space" above the "2"? I get that with all characters.. what's up with that? Why does the blue selection box not simply stop where the character stops, exactly the way it does on the bottom of the character?
Word 2011 does this, too. All I want is to have this pretty big character centered both horizontally (easy, of course) and vertically (impossible?).

Hello fruhulda.
The problem is not linked to the size of the box.
The function 'center vertically' doesn't center the character, it center a point defined by rules which I perfectly ignore.
Look at this screenshot (in fact five ones).
One more time, I used Arno Pro to be consistent with my first messages.
I applied the same setting in the four examples.
You may see that what I wrote match what we get.
Only the lowercases are quite (not perfectly) centered
If we want to center a given char, we must study carefully the font which will be used.
We may print in a PDF a page containing the wanted character.
Then use a tool (Preview if you want) to crop the PDF so that the space above equals the space below.
Then insert this PDF in Pages.
This time, we will be able to center the character using the available tools.
But I feel that it's most efficient to
insert a vertical line and center it horizontally
insert an horizontal line and center it vertically
At last, insert the wanted character in a text box and move the box so that the character is centered using the two lines as guides.
When it's done, remove the lines or change the ink from black to white.
Yvan KOENIG (VALLAURIS, France) jeudi 23 décembre 2010 21:13:31

How to show a html page in a swing applet -- URGENT!!!

Hi All,
I'm trying to show a html page inside a swing applet... is it possible to do that?? if so is there any built-in classes available for that?? If anyone have some examples, plz help me with that....
Thanks,
Ragu

i havent tested.. but this should work. i am no expert on these either, just to give you an example.. :-)
JEditorPane ePane = new JEditorPane();
HTMLEditorKit html = new HTMLEditorKit();
ePane.setEditorKit(html);
HTMLDocument htmld = new HTMLDocument();
try{
URL url = new URL("http://hcs.harvard.edu/~undercon/");
InputStream ins = url.openStream();
ePane.setDocument(htmld);
html.read(ins,htmld, 0);
this.getContentPane().add(new JScrollPane(ePane),BorderLayout.CENTER);
catch(Exception e)
e.printStackTrace();
}

Looking for CRM IC Webclient HTML page

Hi guys
I need to change a value which is found on a HTML page.
The page starts with :
<html dir="rtl"><head><title>Interaction Center</title>
<SCRIPT language="JavaScript">
This html can be obtained if I tight click the page in the browser and look for the
page source code.
But I cannot find this page.
I have searched SE80 under CRM_IC_* modules and found nothing.
Any hint will be appreciated
regards
yuval

Hi Yuval,
Instead of looking into the source code of the broweser better you maintain the parameter CRM_ICWC_TEST with value 0x23456789 in your user setting. This will activate your tool tip and then you will see a tooltip appearing in the application when you point your mouse to the title of a view, telling you the BSP application name .
<b>Reward points if it helps!!</b>
Best regards,
Vikash.

Embedding an HTML page in a Flash Movie

I am trying to embed an HTML page in the center of a Flash
movie and I was wondering if this is possible, and if so, what is
the code to do so. I want it as a small box in the middle of my
SWF.

You can add HTML formatted txt to a TextField or a TextArea
Component. This only allows for simple things, a href, b, u, i,
p... But for a full HTML capabilities you may want to look into a
DIV container that sits on top of your flash object using CSS
styles.

Pic links not working in FF but are In IE8 on HTML page

Hi, I have an Html page that has a bunch of small pic images on it. When you click on one it display a larger version in the center of the page. For some reason they all work fine in IE8 but not Firefox only the bottom row work. The rest act as they have no link mouse does not change to the pick hand symbol. Normally I never have a problem with FF more often its IE.

That is because the TABLE in DIV with class="Object336" is overlaying that part of the screen.
You set the height of that table to 405px.
Remove that height attribute and also remove the three <br> in the last Contact us SPAN
<pre><DIV class="Object336"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=860 <b>HEIGHT=405</b>><TR><TD VALIGN="TOP" ALIGN="left"><DIV CLASS="text-align:left;margin-left:0px;text-indent:0px;"><SPAN CLASS="textstyle0"> Please write if you would like to use <br>some of my pictures. I have many more. <br></SPAN><SPAN CLASS="textstyle1"><A HREF="Page12.html">Contact Us</A></SPAN><SPAN CLASS="textstyle0"><A HREF="Page12.html"></A> for more Info.<b><br><br><br></b>
</SPAN></DIV></TD></TR></TABLE></DIV></pre>

Preferred size of JEditorPane/ HTML page

Hi,
I've loaded an HTML page in a JEditorPane. Since I'm using a layout manager with absolute positioning, I need to know the pane's preferred size.But the preferred size I get is just about (6, 6), although it has a big picture in it. I tried validate() first or to add it with (1,1) to have it set up properly (visible etc.) and then resize it afterwards, but it had no effect. Is there a way to get a preferred size of an HTML page?
Thanks a lot.
Greets
Puce
Note: Using another layout manager is not a option, since this is a very specialized task.

I could use this as well. I'm tiling JEditorPanes vertically inside a JPanel using BoxLayout. The problem is that I need to limit the width of the panel, so I need to adjust the sizes accordingly. Any suggestions? I'll give another duke...
Max

Displaying HTML page from JFrame

Hi ,
I have a JFrame GUI with menus and menu items. After Clicking on the Help Menu Item, I want to display a HTML page. Does anyone know of a function to display an HTML page?

import javax.swing.*;
import java.awt.*;
import java.io.*;
import java.awt.event.*;
import javax.swing.event.*;
// This class is used in the Image Tool class when the help menu item is selected
public class HelpMenu extends JInternalFrame implements HyperlinkListener{
// A new JEditorPane to display the help html file in.
private JEditorPane jep;
     public HelpMenu () {
          super("Help Menu",
                    true, //resizable
                    true,     //closable
                    true,     //maximizable
                    true);     //iconifiable
          // Set the size and location of the frame
          setSize(500,500);
          setLocation(20,20);
          // create the JeditorPane
          jep = new JEditorPane( );
     jep.setEditable(false);
          // Make jep a scrollable pane
          JScrollPane jsp = new JScrollPane(jep);
     getContentPane( ).add(jsp, BorderLayout.CENTER);
          // Add a listener to listen for hyperlinks within the document
     jep.addHyperlinkListener(this);
     try {
     String HelpFile = "file:C:/Documents and Settings/Patrick/Desktop/Help.html";
     jep.setPage(HelpFile);
          // If the file can be loaded display the frame
          setVisible(true);
     catch(Exception e) {
          // The file could not be loaded.
          System.out.println(
               "Could not open help page! Has it been deleted from: C:/Documents and Settings/Patrick/Desktop/");
          // If the file can not be loaded display an error message
          JFrame f = new JFrame();
     JOptionPane.showMessageDialog(f, "Could not open help page! Has it been deleted from: C:/Documents and Settings/Patrick/Desktop/",
               "Help Menu", JOptionPane.WARNING_MESSAGE);
          // If the file cannot be loaded do not display a frame
          setVisible(false);
public void hyperlinkUpdate(HyperlinkEvent he) {
HyperlinkEvent.EventType type = he.getEventType( );
     if (type == HyperlinkEvent.EventType.ACTIVATED) {
try {
// set the page to show the selected section of the file
jep.setPage(he.getURL( ));
catch (FileNotFoundException e) {
catch (Exception e) {
}

Need to embed a Flash animation over top of a html page!

Hello,
I've created an animation in Flash with a transparent
background which needs to be embedded into a html page with lots of
div tags. I didn't create the html page and now I need to place the
animation into that page somehow, overlapping with some text and
graphics. Every where I place the animation, it will sit before or
after the text and elements in the page and not over top of them.
Hope I am clear enought to explain what my problem is. Does anybody
know what I should do? I truly appreciate your help.
PS. I am not a technical person so if any body wants to help
me and needed the sources please email me at:
Many thanks in advance.
Mojan
Mojan

Treat Flash as any other content and place it within its own
containing div. Position the div in the normal flow of the document
allowing the div to 'stack' with the other divs above and below it.
If you want to place the Flash such that it 'covers' existing
content you can use CSS positioning techniques. Options include
absolute positioning the containing div with the Flash swf within
it (this removes the div from the normal flow of the document) and
placing it over the existing content. Us position: absolute; and
top and left, with px values to place the div where you need it.
You can find tutorials on absolute positioning in the developer
center or www.communitymx.com
You can use the float property and negative margins to pull
containing divs (or other elements) around the document, too.
Experimenting with floats can be fun but you need to read up on
their specific behavior as you can end up pulling your hair out.
Again, there are plenty of CSS tutorials on positioning and a
Google search should throw-up some options.
Outside of CSS you can use DOM Scripting and JavaScript to
also position and hide various content depending on your
requirements. If you get stuck come back on this forum and ask for
more help but provide specific code to help us.

Captivate 8 Center Vertically in HTML Page

Similar Messages

Maybe you are looking for