Responsive design

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

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....

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.

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?

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.

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.

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.

undefined

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 undefined

}

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 undefined

( !targ.id || targ.id.indexOf( dItem.name ) == -1 ) undefined

( !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("undefined hh) {

ccr = 0;

cct = 0;

while (ccr undefined

if (this.Y1 > this.Y0)

document.writeln("undefined

}

}

else {

ccb = 0;

ccl = 0;

while (ccb undefined

if (this.Y1 > this.Y0)

document.writeln("undefined

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 += "undefinedleft:0px;top:0px'undefined hh) {

ccr = 0;

cct = 0;

while (ccr undefined

if (this.Y1 > this.Y0)

divtext += "undefined

}

}

else {

ccb = 0;

ccl = 0;

while (ccb undefined

if (this.Y1 > this.Y0)

divtext += "undefined

}

}

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("

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