Solved

Dynamic page height

As im making a page with dynamic components that i want to enable/disable show/hide at specific points, i want the page height of Lectora to change dynamically...depending on the amounts of components i have layout under each other. As the height is unknown at start, it is calculated... say you have 7 components, all calculated together gives an height of 3250 pixels...so i want to set the page they show on to that value. Ofcourse that can differ.


Is there a way ( Javascript ) to set the pageheight dynamically ?


Kind regards,

Math

Solutions (2)

So i figured out that i can change the pageHeight. This code does the trick...


function setWindowHeight(_newHeight){

  var windowHeight = window.innerHeight;

  document.getElementsByTagName('body')[0].style.height = _newHeight + "px";

  console.log(document.body.style.height);

//---------------------------------------´

//will get the first element tagged body

}

window.addEventListener("resize",setWindowHeight,false);


setWindowHeight(1800);


At start i have background images that fill up to 6000 px.. the default pageheight is set at 662 px. When i use the above code to resize my pageheight and ensure i can scroll down to see other content... the background images are cut off at the original 662 size....


@wheels any solution for this ?

So i now have this function. Works perfect, setting my scrollHeight at any moment i want.. so i can make a page scroll to anything...and hide things to come..as they are outside the scroll.


let ifr = getCurrentPageDiv();

//window = getDisplayWindow();

/* 

jump_1 eg. Getting the ypos of this element and then scrolling to it.

*/

let jumpElement = getDisplayDocument().getElementsByClassName("jump_1")[0];

let elYPos = gsap.getProperty(jumpElement, "top");   



setScrollHeight(ifr,elYPos);

gsap.to(window, {duration: 1, scrollTo: elYPos});

 

 function setScrollHeight(_target,_sHeight){

   _target.style.height = _sHeight + 'px';

 }


Works perfect, only thing is that Lectora crops/cutoff everything below the initial scrollHeight. So i end up with empty white backgrounds... Any solution ?

Discussion (3)

So i figured out that i can change the pageHeight. This code does the trick...


function setWindowHeight(_newHeight){

  var windowHeight = window.innerHeight;

  document.getElementsByTagName('body')[0].style.height = _newHeight + "px";

  console.log(document.body.style.height);

//---------------------------------------´

//will get the first element tagged body

}

window.addEventListener("resize",setWindowHeight,false);


setWindowHeight(1800);


At start i have background images that fill up to 6000 px.. the default pageheight is set at 662 px. When i use the above code to resize my pageheight and ensure i can scroll down to see other content... the background images are cut off at the original 662 size....


@wheels any solution for this ?

So i now have this function. Works perfect, setting my scrollHeight at any moment i want.. so i can make a page scroll to anything...and hide things to come..as they are outside the scroll.


let ifr = getCurrentPageDiv();

//window = getDisplayWindow();

/* 

jump_1 eg. Getting the ypos of this element and then scrolling to it.

*/

let jumpElement = getDisplayDocument().getElementsByClassName("jump_1")[0];

let elYPos = gsap.getProperty(jumpElement, "top");   



setScrollHeight(ifr,elYPos);

gsap.to(window, {duration: 1, scrollTo: elYPos});

 

 function setScrollHeight(_target,_sHeight){

   _target.style.height = _sHeight + 'px';

 }


Works perfect, only thing is that Lectora crops/cutoff everything below the initial scrollHeight. So i end up with empty white backgrounds... Any solution ?

The latter function does work properly. I was wrong in my assumption, and this works great :-)