Explore the community Forums Lectora Lectora Questions & Answers Page Alignment in Browser

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #278813 Score: 0
    Profile photo of Reginald Gite
    Reginald Gite
    Member
    beginner
    intermediate
    @omacron77

    Currently when we publish a course to scorm we are configuring the “Page alignment to HTML Publishing” to “Centered”, this is located on the General Tab on the Title Properties page. When viewed in Internet Explorer the page is centered but it is right under the Browser heading/toolbar. If the viewer selects the function key F-11 to view the content in full view mode then the page will be located at top center of the page.

    Is it possible in Lectora to have the page centered in the center of the page? Does anyone know how to configure this in Lectora?

    #284406 Score: 0
    Profile photo of storyline
    storyline
    Member
    2 pts
    @storyline

    body, html {
    background: #202020 url(images/blackbg.jpg) repeat-x top center;
    overflow: hidden;
    }
    iframe {
    border: 0px;
    overflow: hidden;
    }
    #pageDIV {
    position: absolute;
    margin: auto 0px auto 0px;
    overflow: hidden;
    top: 0; left: 0; bottom: 0; right: 0;
    }


    CSS in an external web object
    #pageDiv is forced to center of screen
    I use iframe to remove the border
    Body overflow just in case
    overflow:hidden > also contains animation within the pageDiv (no scroll bars or objects appearing outside the slide)

    #284407 Score: 0
    Profile photo of samc36
    samc36
    Member
    @samc36

    Here’s another solution, when Lectora exports, whether it is centred or not, your exported HTML will probably contain this code for the body:

    this is calling a function: ReFlow(), which is found in the head of the document,

    function ReFlow() {
    findWH()
    var left = (winW > 1009) ? (winW-1009)/2 : 0
    var top = (winH > 662) ? (winH-662)/2 :0
    if (pageLayer)
    {
    pageLayer.moveTo( left, top );
    pageLayer.hasMoved = true;
    pageLayer.newX = left;
    pageLayer.newY = top;
    }
    }

    findWH() refers to an earlier method in the head that finds the Width and Height of the container, it then creates two variables, winW and winH, the width and height of the window respectively.

    Create two variables, one to help you align the page horizontally: var left, and one to help you align vertically: var top.

    Use the same variable declarations I have, but where I have 1009, insert the width of your project, and where I have 662, insert your height.

    Use the same if(pageLayer) if statement I have, but if you don’t want to align vertically, then replace top with 0, and if you don’t want to align horizontally, replace left with 0.

    Next, we’ll go back to the body, where directly under you will most likely have a

    In the if statement, declare your left and top variables, again with your dimensions, and assign the CSS properties to pageDIV.

    top:0px becomes top:' + top +'px

    Again, if you don't want to align, simply use left:0px, or top:0px;

    I find that this is working for me, maybe it will help one of you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.