Adobe Captivate align middle of the window when resizing the browser window

[marcs86919353]

Hey I've a question regarding changing the css or html file of the html Export?

What I want to reach?

I created a Project, which Resolution is bigger than the Resolution of the desktops in our Company. I insert a big blurred Picture as a Background and then created a viewport due a invisible form with the iPad Resolution in the middle of the Project. In this form I would like to create the Content and the Navigation. I would like to Export the Project as a non scaling html. When the learner opens the Project I want that the middle of the Project is always in the middle of the browser window when he resizes the window or whatever Resolution the learner has.

What I've done already?

I already set the Position to "fixed" so there is no Scrolling possible in the browser anymore.

.cpMainContainer{background-color:#2f2f2f;height:100%;width:100%;padding:0;position:fixed;margin:0 auto;}

Maybe somebody has an idea?

Thank you

[TLCMediaDesign]

If I understand you correctly, you are going to need to check the viewport size with a cross-browser script, and then change the top and left css attributes.

[marcs86919353]

Hey,

thank you for your Input! Do you have any idea what to Change and how? I'm not rly familiar with this...

Thanks a lot!

[TLCMediaDesign]

This script will get the viewport:

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

Without actually seeing your project. You would take the actual size and the distance from that to the center portion and change the css for the top and left.

The cpMainContainer class is an object that covers the toc and adjust automatically to the viewport, the actiual course is in the "main_container".

var cont = document.getElementById("main_container");

if ( w > parseInt( cont.style.width )

{

     const.style.left=(w-parseInt(const.style.left)/2)+'px';

}

else

{

     const.style.left=(parseInt(const.style.left)-w-/2)+'px';

}

I'm just typing this script in my head and not testing it in a real project, but that is the gist. Depending on how the top and left are applied they might not return anything and jQuery position might need to be used.