Fill Width of Device screen (Lectora Online)

This is a Library object that you can drop at the title level of you Lectora Online Title that will cause the title to automatically fill the entire width of the device, even if it is in an iFrame in an LMS or App like Lectora Mobile. Lectora normally uses the viewport tag to scale to the width of the device, but this does not work if the content is inside of an iFrame.

Preview image

Tags:

Comments

  1. Profile photo of rabi das
    rabi das

    Hi,

    I have download the lectora file you shared, but it is not opening on my Lectora vr12, the downloaded files extension are .wwo and .awo,

    1. Profile photo of John Blackmon
      John Blackmon Post author

      The .wwo file is a Library object for Lectora Online, the .awo file has the same functionality packaged in a library object for Lectora Desktop. You can use them either by just dragging and dropping the file in Lectora, or adding them into your list of Library objects.

  2. Profile photo of Jani Sipola
    Jani Sipola

    Nice work!

    It would be great to have a possibility to align the course to the center.

  3. Profile photo of Aleksandar Dimitrievski
    Aleksandar Dimitrievski

    When i download the file, it is with .awo extension, I can’t open with Lectora, I don’t know with witch program to open to see the code. Can you tell me hot to make that, step by step. Thanks.

    1. Profile photo of Jennifer Valley
      Jennifer Valley

      A .awo is a Lectora Library Object. To insert it into your course: Open up My Library, select Add File, navigate to the file on your desktop and upload it. Then from My Library select it and add it onto a page by double clicking.

  4. Profile photo of
    Cheta Pandey

    HI, I added the FillWidth.wwo file in the course in Lectora online. But when I publish the course and preview it, the page is blank.

    I also tried to FillWidth.awo in Lectora desktop and it is working as expected. I compared javascript code of both wwo and awo and found that the code for lectora online is very small. Is it complete code? It is not working for me. Can you please help me with this.

    Below is the code available in the your wwo file.

    var MyTitleWidth=0;
    var MyTitleHeight=0;
    window.top.addEventListener(“orientationchange”, function() {
    ReFlow();
    }, false);
    window.onresize = ReFlow;
    window.onload = newInit;
    function newInit(){
    init();
    ReFlow();
    }
    function ReFlow(){
    findWH();
    if(typeof(trivPage) !== ‘undefined’){
    var dv = trivPage.div;
    if(MyTitleWidth==0){
    MyTitleWidth=parseInt(dv.clientWidth);
    MyTitleHeight=parseInt(dv.clientHeight);
    }
    dv.style.left = “0px”;
    dv.style.top = “0px”;
    var scale = winW/MyTitleWidth;
    var transX = -parseInt((MyTitleWidth-winW)/2);
    var transY = -parseInt((MyTitleHeight-(scale*MyTitleHeight))/2);
    var sty = “translate(“+transX+”px, “+transY+”px) scale(” + scale + “)”;
    dv.style.transform = sty;
    dv.style.MozTransform = sty;
    dv.style.msTransform = sty;
    dv.style.OTransform = sty;
    dv.style.webkitTransform = sty;
    }
    }
    function findWH(){
    winW = window.top.innerWidth;
    winH = window.top.innerHeight;
    }

    But your awo has huge code which works perfectly. Please help.

  5. Profile photo of John Blackmon
    John Blackmon Post author

    The original WWO file attached was for the version of Lectora Online that was available at that time. I’ve updated the attached WWO file so it works with the latest version of LO.

    Any time there is “under the cover” JavaScripting, it may need to be adjusted as future versions come out. Basically the change dealt with how the “onload” function was overridden. Give it a shot again.

  6. Profile photo of
    Chetan Pandey

    HI John,

    Thank you very much for quick response. It worked :). One more change was needed in the code.
    dv.style.marginLeft = “0px”;

    Otherwise the page is going to 50% left and half HTML page was cut off

    Thank you very much!

    As it is scaling the page, the images are now pixelated. I need to find some image resize logic on this.

Your email address will not be published. Required fields are marked *