Fill Width of Device screen (Lectora Desktop)

This is a Library object that you can drop at the title level of you Lectora 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.

 

Tags:

Comments

    1. Profile photo of casperoo
      casperoo

      Hey John, is it possible to have this so the text resizes? seems as though if this was used, the text would generally be too large on desktops and nearly too small on most devices unless designed for a specific device with some rough dimensions. At the moment I still see HTML5 as a better solution for multiple devices.

      1. Profile photo of John Blackmon
        John Blackmon Post author

        It does resize the text, as well as all of the content.

        This is really intended for use when you know your content is for a mobile device. With the varying widths of mobile devices, this allows you to always fill the screen. It isn’t really intended to be a responsive solution for both desktop and Mobile, look for that coming from Trivantis soon.

  1. Profile photo of TDickey
    TDickey

    Just tried the Fit Width library object, this is a MAJOR improvement for our courses. Thank you!

    1. Profile photo of John Blackmon
      John Blackmon Post author

      The library object compares the page width defined in your Lectora title with the width of the device it is loaded in, and uses JavaScript transformation to scale the content to the device width.

  2. Profile photo of rwalters
    rwalters

    Thanks. I’ve been looking for something like this. However, is there a way to fit height and width, or even just height instead of width?As is, it’s cutting off my navigation buttons on larger screens.

    1. Profile photo of John Blackmon
      John Blackmon Post author

      The short answer is yes, it could scale to both height and width. However, I’m not sure you would really want that, as it would “distort” the contents of the page.

      When the library object scales the page, it preserves the aspect ratio of the content, so that images and text do not get skewed. You may have seen this “skewing” effect if you have ever resized an image without having “Maintain Ratio” selected on the “Position and Size” tab. You can end up with some pretty unintended results.

      For a primarily mobile course, it might be best practice to offer a variety of navigation options, perhaps both top and bottom, as well as swipe left and right actions for switching pages.

      1. Profile photo of Jurg van der Vlies
        Jurg van der Vlies

        Hi John. Thanks for sharing this code. How would I change the script to scale only to the screen height?
        Scaling to height is more convenient for our custom page size.

        1. Profile photo of John Blackmon
          John Blackmon Post author

          Sure. Just replace the code in the external HTML element with this:

          var MyTitleWidth=0;
          var MyTitleHeight=0;
          window.top.addEventListener(“orientationchange”, function() {
          ReFlow();
          }, false);
          function ReFlow(){
          findWH();
          if (pageLayer){
          var dv = document.getElementById(“pageDIV”);
          if(MyTitleWidth==0){
          MyTitleWidth=parseInt(dv.clientWidth);
          MyTitleHeight=parseInt(dv.clientHeight);
          }
          pageLayer.moveTo(0, 0);
          pageLayer.hasMoved = true;
          pageLayer.newX = 0;
          pageLayer.newY = 0;
          var scale = winH/MyTitleHeight;
          var transX = -parseInt((MyTitleWidth-(scale*MyTitleWidth))/2);
          var transY = -parseInt((MyTitleHeight-winH)/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;
          }

          Should I create another content item called fill height? Are there more people interested in this?

          1. Profile photo of Jurg van der Vlies
            Jurg van der Vlies

            Thanks! I seems to work for standard templates, but not in our customized template. Probably due to the page size of 1008 x 660.
            The reason for asking is my search for a good way to share content on computer screens as well as the most prevailing mobile devices without endless scrolling. This issue remains a struggle. That is the reason for our aberrant screen size.

      2. Profile photo of rwalters
        rwalters

        I guess either one (width or height) has some limitations, as either one cuts stuff off in different browsers. I wouldn’t want it to stretch. Is there a way to code this to fit to width, but not go any larger than the height of the screen? Rather I guess, fit to height or width, whichever amounts to the least amount of resizing.

          1. Profile photo of John Blackmon
            John Blackmon Post author

            OK, so here is the code that will always fit the content on one screen, maintaining aspect ratio. Keep in mind that there will always be some space on either the right or the bottom depending on the aspect ratio of the screen:

            var MyTitleWidth=0;
            var MyTitleHeight=0;
            window.top.addEventListener(“orientationchange”, function() {
            ReFlow();
            }, false);
            function ReFlow(){
            findWH();
            if (pageLayer){
            var dv = document.getElementById(“pageDIV”);
            if(MyTitleWidth==0){
            MyTitleWidth=parseInt(dv.clientWidth);
            MyTitleHeight=parseInt(dv.clientHeight);
            }
            pageLayer.moveTo(0, 0);
            pageLayer.hasMoved = true;
            pageLayer.newX = 0;
            pageLayer.newY = 0;
            var scale1 = winW/MyTitleWidth;
            var scale2 = winH/MyTitleHeight;
            var scale = Math.min( scale1,scale2);
            var transX = -parseInt((MyTitleWidth-(scale*MyTitleWidth))/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;
            }

            Truthfully though, I think the best solution overall is to fill the width of the device screen and allow for scrolling up and down with the content. This is also the method used by Responsive Design solutions, so I think users would be very familiar with the interface this way.

  3. Profile photo of D Noctor
    D Noctor

    Thanks John for adding the fill width code! I am sure you have been inundated with lots of appreciation. It The only thing is that it does not seem to work with drag and drop questions very well… for example when I view a full screen page (that is bigger than the original title page size), drag and drop questions won’t drag… however, it works fine if I re-size my browser (Chrome, Safari, Firefox and IE) to approximately the page size to that of the original title…. and if I reduce it to a size that it less than the title, again the drag feature does not work. Any suggestions would be much appreciated. D.

  4. Profile photo of John Blackmon
    John Blackmon Post author

    Challenge accepted!

    It was quite a bit more work than I thought it would be, I had to override some of the drag manager code to get the drag and drop going. I have updated the AWO file for this post, so you can just re-download the library object, and it should work. I’ve also added a second library object to the post, “Fit all on one page.awo”, that has the functionality from the thread above where both width and height are scaled to fit the device.

    Let me know how it works!

    1. Profile photo of D Noctor
      D Noctor

      John, I am stuck for words! Works like a dream. I am putting you on my Christmas list. You’re a star. Thank you so much! D

  5. Profile photo of Caroline Nichols
    Caroline Nichols

    Hey John:
    We are trying to utilize this in a Bootstrap situation. Can you provide the code for the fill width only?
    Thanks! This is awesome!

  6. Profile photo of John Blackmon
    John Blackmon Post author

    The code is pretty specific to a Lectora published title, are you referring to using it with standard HTML and Bootstrap.js?

    1. Profile photo of D Noctor
      D Noctor

      Hi there John, any suggestions to what code could be added to scale the audio player properly when screen size is reduced? For example, when viewing a high res page on a lower res screen the audio player, in size and dimension, scale downwards… but the actual buttons gradually disappear the more everything is scaled down, giving the appearance that the play button, slider and volume buttons are “cut off”. The alternative would be to increase audio player dimension size in the original title, so that when it is viewed on a smaller res screen the differences would not really be that noticeable but that option is not currently available in Lectora. Any suggestions would be appreciated. All the best,

      1. Profile photo of John Blackmon
        John Blackmon Post author

        You could use your own play/pause buttons, or just set the display to speaker button. That way you could size it in any way you want.

        The true answer for this will be Responsive Course Design, which is in Beta right now! You won’t need to use this Library object any more with that!

  7. Profile photo of Hawkeye
    Hawkeye

    John,

    Will the Fill-Width.amo file work with Lectora version 12 titles?
    My system is installed on a closed network. It is a royal pain for us to upgrade, though I believe that an upgrade is planned for the new year.

  8. Profile photo of John Blackmon
    John Blackmon Post author

    Yes, it works with v12 and “standard” v16 titles, although not with responsive titles, for obvious reasons. Once you go responsive, none of this is needed any more.

  9. Profile photo of dunnjo98
    dunnjo98

    Hi John, this is amazing. I have used this on a few courses. I was hoping I could ask your opinion, as well as if you have heard of any issues using this within an LMS?

    Opinion — when you build, do you build at the largest size you imagine this getting? I ask, because of the fuzziness with the graphics when it is at the largest size.

    Error — for the most part this worked very well in our LMS (Saba 5.5, yeah I know), but random issues were popping up where the course wouldn’t load at all on some machines. Once I removed the code to test, the issues stop coming in. I have been looking through the code, trying to figure out what might be causing the issue, but I am at a loss. Not expecting you to fix it, just wondering if you have any suggestions.

  10. Profile photo of John Blackmon
    John Blackmon Post author

    Hmmm…. haven’t heard of that before, and I and others have used it in quite a lot of places.

    Is it possible that the Saba 5.5 LMS is placing newer IE browsers into a compatibility mode? We’ve run into some problems with LMS’s having the outer frame of the window calling out for a compatibility mode which causes some issues with HTML 5 running in the inner frame. The easy way to tell would be if all of the people seeing problems are on IE10 or 11.

  11. Profile photo of dunnjo98
    dunnjo98

    John, we are updating our LMS soon so I am happy to say that I am going to test this code out on some courses in the near future in a newer LMS. Thanks for the quick response.

    I think that is exactly what was happening, we were going from desk to desk updating the compatibility of the IE browsers.

  12. Profile photo of Danny_Highfield
    Danny_Highfield

    Hi John, this has been extremely helpful thank you very much. I don’t suppose you might have any tips on how to center the div horizontally after the scaling has taken place? Just so it looks neater in browser.

    I’ve tried replacing the values in pageLayermoveTo(0,0); but I’m not having any luck catering to the scale changes when the browser and width and height changes.

    Any assistance would be greatly appreciated.

  13. Profile photo of John Blackmon
    John Blackmon Post author

    Sorry it took a while to get back. I’m guessing you are referring to the “Fit All on one page” object. Try replacing this line in ReFlow():

    var transX = -parseInt((MyTitleWidth-(scaleFill*MyTitleWidth))/2);

    with this line:

    var transX = -parseInt((MyTitleWidth-(scaleFill*MyTitleWidth))/2) + (scaleFill == scale1 ? 0 : winW/2-(scaleFill*MyTitleWidth)/2);

  14. Profile photo of
    Chetan Pandey

    HI John,

    Your awo file for Lectora inspire works great. The awo file has huge javascript code but the wwo has very little code in it. Looks like it is incomplete. It is not working in Lectora Online. After publish my html page is blank. Can you please help me. I need wwo file for Lectora online for fill widths of all desktop resolutions. Just to add for your information I will be using it in scorm.

  15. Profile photo of George Bosveld
    George Bosveld

    Hi John, I just found your sollution awo that almost is the perfect solution to my issue:
    Our courses are 1200px by 700px, but ofcourse an iPad works with a lower CSS resolution.
    Your scaler works great, but on my desktop with 1920×1200 screen, my courses become huge.
    Is it possible that your code would merely shrink the course? Like only execute that code is the screen is smaller than 1200px for example?

  16. Profile photo of John Blackmon
    John Blackmon Post author

    Sure, you could modify it slightly to only shrink and not grow, or you could even use the “Platform” or “BrowserType” variables in Lectora and not do the resize on certain platforms as well.

    1. Profile photo of George Bosveld
      George Bosveld

      Thanks for your reply! Well for example one colleague has a smaller screen on his Windows laptop (toolbars he added in Firefox…) so my idea that it only needs to shrink in iOS and Android is no longer valid. I’d love to have it work on every system where the screen size is just not big enough.

      My only need now seeing your file in this thread, is to have it only shrink and center horizontally in the browser.

      The two replies of me below can be ignored 🙂

  17. Profile photo of George Bosveld
    George Bosveld

    I could use some help. The library object I found works with fitting the width (Lectora17, no seamless play), but your code somehow doesn’t work. The page loads like there are elements missing making the page not render.

    So this element found in the library works:
    var MyTitleWidth=0;
    var MyTitleHeight=0;

    window.top.addEventListener(“orientationchange”, function() {
    ReFlow();
    }, false);
    function ReFlow(){
    findWH();
    if (pageLayer){
    var dv = document.getElementById(“pageDIV”);
    if(MyTitleWidth==0){
    MyTitleWidth=parseInt(dv.clientWidth);
    MyTitleHeight=parseInt(dv.clientHeight);
    }
    pageLayer.moveTo(0, 0);
    pageLayer.hasMoved = true;
    pageLayer.newX = 0;
    pageLayer.newY = 0;
    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;
    }

    With filling the width, but the content disappears on the underside.

    Code you help me out with the code that makes it fit in the window, but only scaling down?
    Thanks in advance 🙂

    1. Profile photo of George Bosveld
      George Bosveld

      Let me edit my reqeust: I just saw I can download your fit all file from this page. That works to fit the page.
      It only leaves 2 adjustments: To only shrink when needed and horizontally center the course in the browser 🙂

    1. Profile photo of George Bosveld
      George Bosveld

      Could you help me out?
      I do see the move to 0,0 ( pageLayer.moveTo(0, 0);), where the first 0 probably has to become a calculated position that works with the browser’s width / 2 and minus the course width / 2. However, I’m not sure how to calculate that.
      Is pagelayer the right one? Because I know PageDIV is the course block.
      MyTitleWidth=parseInt(dv.clientWidth); <– That variable already gets the value of the width of the browser or the course? The variable name gives me the feeling it's about the course, but the calculation gives me the feeling it's about the browser?
      Or is it possible with a direct entry like center, rather than a calculated x-value? Like in CSS?

      Also, all these actions only have to take place if the course dimensions are larger than the visible area of the browser. Should this code get an if-statement about this or how would you integrate it in Lectora? I can merely say it's inherited on a page, but to execute it, is it as simple as make it initiaally hidden? (Sounds illogical)

      I'm a bit lost, hope you can help me out?

  18. Profile photo of John Blackmon
    John Blackmon Post author

    OK, just want to get the right thing here, you are using v17, you want to start with the “Fit All on one page” version of the Library object, and you want it to center horizontally and not scale if the window is larger than the title, correct?

  19. Profile photo of John Blackmon
    John Blackmon Post author

    OK, I created that and added it as another “additional file” to this post. Its called “v17 Fit All on One Page – no grow.awo”. (tried to be as descriptive as I could in the name!)

    There are changes to be made for v17, and then a few additional changes to make for the new features.

    1. Profile photo of George Bosveld
      George Bosveld

      Thanks man! It works great 🙂
      I’m not sure which changes you say need to be made or for which features?

      1. Profile photo of George Bosveld
        George Bosveld

        Hmm, I see it works great on my Windows PC in several browsers, but the iPad I have here it doesn’t scale. it’s loaded in our LMS in an iframe… 🙁

        1. Profile photo of George Bosveld
          George Bosveld

          Well it’s probably iOS bug, as in Android and Windows it works fine.
          We’re trying to fix our LMS with maybe an OBJECT element rather than IFRAME.

    1. Profile photo of George Bosveld
      George Bosveld

      Yes, the strange thing is, until a colleague noticed it I’m pretty sure it had worked. I’ll try another, clean file.

  20. Profile photo of John Blackmon
    John Blackmon Post author

    Looks like it doesn’t work within the preview within Lectora, but works fine when published to HTML or previewed in a browser. So that’s probably what you saw. Should be fine to use.

    1. Profile photo of George Bosveld
      George Bosveld

      I see it works with the seamless play on, but my CSS and Adobe Edge Animate animations won’t load.
      So if there’s someything in the code related to the seamless play option, can you help me with a fix?
      (Local on laptop seamless play htmls loads well, online they don’t)

  21. Profile photo of John Blackmon
    John Blackmon Post author

    OK, I’ve updated the Library object attachment to this post with one that should work for both seamless and non-seamless publishes for DD questions. Let me know if it works for you!

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