Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #310503 Score: 0
    Profile photo of Emilija Pirganoska
    Emilija Pirganoska
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    @epirganoska9037

    Hello everyone, I’d like to ask a question about responsive design in Lectora 16. How to make the courses 100% responsive and to remove the fixed width for desktop, tablet and mobile? Like this courses are not always responsive because when the device’s screen is smaller than the page width defined in Lectora, a horizontal scroll bar appears and the page cannot be seen all at once. Does anybody has this problem and how to solve it? Thank you!

    #310761 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

    I’ve seen previous conversations on the site where developers have added scripts to further adjust the widths.  Hopefully some one will come along and share that code again because I can’t seem to find the post….

    #310798 Score: 0
    Profile photo of Emilija Pirganoska
    Emilija Pirganoska
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    @epirganoska9037

    If someone knows those codes please share them because it will help me a lot! Thank you

    #310902 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    I am not sure what you are referring to. If you have a Lectora RCD phone page that is 480px wide and it is being displayed on a phone that is 320px wide, the page will be automatically scaled down to 67% and fill the width of the phone without scrollbars. The whole point of Lectora RCD is to make sure the page always fits the screen of a mobile device regardless the screen size or page width in pixels.

    #310946 Score: 0
    Profile photo of AHwalek
    AHwalek
    Member
    beginner
    intermediate
    1 pt
    @AHwalek

    I’m having pretty much the same issue. With an Android phone I’m having to scroll to the bottom of the screen in both portrait and landscape. I think it would work properly if the URL bar wasn’t shown at the top the whole time. Is there a way to either force a hidden URL bar or adapt the screen to accommodate it?

    #310948 Score: 0
    Profile photo of AHwalek
    AHwalek
    Member
    beginner
    intermediate
    1 pt
    @AHwalek

    I’m having pretty much the same issue. With an Android phone I’m having to scroll to the bottom of the screen in both portrait and landscape. I think it would work properly if the URL bar wasn’t shown at the top the whole time. Is there a way to either force a hidden URL bar or adapt the screen to accommodate it?

    The same thing happens in portrait on an iPad.

    #310997 Score: 0
    Profile photo of Emilija Pirganoska
    Emilija Pirganoska
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    contributor
    @epirganoska9037

    The problem is that the page doesn’t automatically scale down on tablets and mobile phones and I don’t know why, so that’s what I am trying to find out.

    #349084 Score: 0
    Profile photo of Kevin Brill
    Kevin Brill
    Member
    beginner
    intermediate
    wise owl
    curious george
    contributor
    @kbrill2052

    Below is the code I think you were referencing.  This gets added as an HTML Extension, Header Scripting type.  The script will auto adjust the dimensions to fit the width and height (while maintaining aspect ratio).  Please note that this does not seem to work any longer in Lectora 17 when publishing with seamless play.

     

    var MyTitleWidth=0;
    var MyTitleHeight=0;
    var scaleFill = 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;
    scaleFill = Math.min( scale1,scale2);
    var transX = -parseInt((MyTitleWidth-(scaleFill*MyTitleWidth))/2) + (scaleFill == scale1 ? 0 : winW/2-(scaleFill*MyTitleWidth)/2);
    var transY = -parseInt((MyTitleHeight-(scaleFill*MyTitleHeight))/2);
    var sty = “translate(“+transX+”px, “+transY+”px) scale(” + scaleFill + “)”;
    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;
    }
    function DragItemWithin( x,y ) {
    x -= dragOffX;
    y -= dragOffY;
    if( x >= (this.lyr.objLyr.x*scaleFill) &&
    y >= (this.lyr.objLyr.y*scaleFill) &&
    x <= ((this.lyr.objLyr.x + this.lyr.objLyr.w)*scaleFill) &&
    y <= ((this.lyr.objLyr.y + this.lyr.objLyr.h)*scaleFill) )
    return true;
    else
    return false;
    }
    if(typeof dragMgr !== ‘undefined’){
    dragMgr.mouseDown = function(x,y,e) {
    for (var i=this.arrDragItems.length-1;i>=0;i–)
    {
    var dItem = this.arrDragItems[i]
    if (dItem.checkWithinItem(x,y))
    {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    while( targ &&
    ( !targ.id || targ.id.indexOf( dItem.name ) == -1 ) &&
    ( !targ.name || targ.name.indexOf( dItem.name ) == -1 ) )
    {
    targ = targ.parentNode
    }
    if( !targ )
    return false;

    if( targ.disabled )
    return false;
    this.item = dItem
    this.offX = (x/scaleFill)-this.item.lyr.objLyr.x;
    this.offY = (y/scaleFill)-this.item.lyr.objLyr.y;
    if( this.item.lyr.dropObj )
    {
    this.item.lyr.dropObj.dragItem = null
    this.item.lyr.dropObj = null
    this.onDragDrop() // Clear
    }
    this.active = true
    break
    }
    }
    if (!this.active) return false
    else return true
    }
    dragMgr.mouseMove = function(x,y) {
    if (!this.active) return false
    else
    {
    this.item.lyr.objLyr.moveTo((x/scaleFill)-this.offX,(y/scaleFill)-this.offY);
    return true
    }
    }
    }
    function _LineResizeTo(theX0, theY0, theX1, theY1) {
    if( this.dis ) return;
    var xx0, yy0, xx1, yy1, ll, rr, tt, bb, ww, hh, ccl, ccr, cct, ccb, id = this.ID, lay = 0, divtext = “”;
    var ss2 = Math.floor(this.Size / 2);
    if (theX0 != “”) this.X0 = theX0;
    if (theY0 != “”) this.Y0 = theY0;
    if (theX1 != “”) this.X1 = theX1;
    if (theY1 != “”) this.Y1 = theY1;
    if (this.X0 <= this.X1) { ll = this.X0; rr = this.X1; }
    else { ll = this.X1; rr = this.X0; }
    if (this.Y0 <= this.Y1) { tt = this.Y0; bb = this.Y1; }
    else { tt = this.Y1; bb = this.Y0; }
    ww = rr – ll; hh = bb – tt;
    if (_nav4) {
    with (window.document.layers[id]) {
    top = tt – ss2 + ‘px’;
    left = ll – ss2 + ‘px’;
    document.open();
    if ((ww == 0) || (hh == 0))
    document.writeln(“<layer left=2px top=2px></layer>”);
    else {
    if (ww > hh) {
    ccr = 0;
    cct = 0;
    while (ccr < ww) {
    ccl = ccr;
    while ((Math.round(ccr * hh / ww) == cct) && (ccr <= ww)) ccr++;
    if (this.Y1 > this.Y0)
    document.writeln(“<layer left=” + eval(ccl + 2) + “px top=” + eval(cct + 2) + “px’>”);
    else
    document.writeln(“<layer left=” + eval(ww – ccr + 2) + “px top=” + eval(cct + 2) + “px’>”);
    document.writeln(“</layer>”);
    cct++;
    }
    }
    else {
    ccb = 0;
    ccl = 0;
    while (ccb < hh) {
    cct = ccb;
    while ((Math.round(ccb * ww / hh) == ccl) && (ccb < hh)) ccb++;
    if (this.Y1 > this.Y0)
    document.writeln(“<layer left=” + eval(ccl + 2) + “px top=” + eval(cct + 2) + “px’>”);
    else
    document.writeln(“<layer left=” + eval(ww – ccl + 2) + “px top=” + eval(cct + 2) + “px’>”);
    document.writeln(“</layer>”);
    ccl++;
    }
    }
    }
    document.close();
    }
    }
    else {
    if(this.dv)
    {
    var dv = document.getElementById(“pageDIV”).appendChild( this.dv );
    this.dv = null;
    }
    if (document.all) selObj = eval(“window.document.all.” + id);
    else selObj = window.document.getElementById(id);
    with (selObj.style) {
    left = ll – ss2 + ‘px’;
    top = tt – ss2 + ‘px’;
    width = ww + this.Size;
    height = hh + this.Size;
    }
    if ((ww == 0) || (hh == 0))
    divtext += “<div style=’position:absolute;left:0px;top:0px’></div>”;
    else {
    if (ww > hh) {
    ccr = 0;
    cct = 0;
    while (ccr < ww) {
    ccl = ccr;
    while ((Math.round(ccr * hh / ww) == cct) && (ccr <= ww)) ccr++;
    if (this.Y1 > this.Y0)
    divtext += “<div style=’position:absolute;left:” + ccl + “px;top:” + cct + “px’>”;
    else
    divtext += “<div style=’position:absolute;left:” + eval(ww – ccr) + “px;top:” + cct + “px’>”;
    divtext += “</div>”;
    cct++;
    }
    }
    else {
    ccb = 0;
    ccl = 0;
    while (ccb < hh) {
    cct = ccb;
    while ((Math.round(ccb * ww / hh) == ccl) && (ccb < hh)) ccb++;
    if (this.Y1 > this.Y0)
    divtext += “<div style=’position:absolute;left:” + ccl + “px;top:” + cct + “px’>”;
    else
    divtext += “<div style=’position:absolute;left:” + eval(ww – ccl) + “px;top:” + cct + “px’>”;
    divtext += “</div>”;
    ccl++;
    }
    }
    }
    selObj.innerHTML = divtext;
    }
    }
    function MatchLine(theX0, theY0, theX1, theY1, theZord, theColor, theSize) {
    this.ID = “Line” + _N_Line; _N_Line++;
    this.X0 = theX0;
    this.Y0 = theY0;
    this.X1 = theX1;
    this.Y1 = theY1;
    this.Color = theColor;
    if (!this.Color) this.Color = ‘0000ff’;
    if (!lineColor) lineColor = ‘#’+this.Color
    this.Size = theSize;
    if (!this.Size) this.Size = 3;
    this.ResizeTo = _LineResizeTo;
    this.dis = false;
    var xx0, yy0, xx1, yy1, ll, rr, tt, bb, ww, hh, ccl, ccr, cct, ccb;
    var ss2 = Math.floor(this.Size / 2);
    if (theX0 <= theX1) { ll = theX0; rr = theX1; }
    else { ll = theX1; rr = theX0; }
    if (theY0 <= theY1) { tt = theY0; bb = theY1; }
    else { tt = theY1; bb = theY0; }
    ww = rr – ll; hh = bb – tt;
    if (_nav4)
    window.document.writeln(“<layer left=” + eval(ll – ss2) + “px top=” + eval(tt – ss2) + “px id='” + this.ID + “‘ z-Index=” + theZord + “></layer>”);
    else
    {
    this.dv = document.createElement(‘div’);
    this.dv.id = this.ID;
    this.dv.style.position = ‘absolute’;
    this.dv.style.left = eval(ll – ss2) + ‘px’;
    this.dv.style.top = eval(tt – ss2) + ‘px’;
    this.dv.style.width = eval(ww + this.Size) + ‘px’;
    this.dv.style.height = eval(hh + this.Size) + ‘px’;
    this.dv.style.zIndex = theZord;
    }
    return (this);
    }

    #349087 Score: 0
    Profile photo of Kevin Brill
    Kevin Brill
    Member
    beginner
    intermediate
    wise owl
    curious george
    contributor
    @kbrill2052

    The text didn’t copy right, I’ve attached the text.

    Attachments:
    1. AutoFit.txt
Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.