Dynamic page height
August 29, 2023 8:19 AM
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 :-)