Captivate 8 Center Vertically in HTML Page

Question

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

The Jayster · Answer

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!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded