Skip to main content
M
marcs86919353
Participant
March 22, 2017
Question

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

  • March 22, 2017
  • 1 reply
  • 443 views

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

This topic has been closed for replies.

1 reply

TLCMediaDesign
TLCMediaDesign
Inspiring
March 22, 2017

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.

    M
    marcs86919353Author
    Participant
    March 22, 2017

    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
    TLCMediaDesign
    Inspiring
    March 22, 2017

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices