Hole shite, it werks! Thank you very, very much!
Now I will need to test if this will work for multiple containers, but this is big step forward.
<script>
// OVERLAY TOGGLE
function toggleOverlay(overlay) {
// toggle overlay on div with "overlay" class
overlay.currentTarget.nextElementSibling.classList.toggle("overlay-show");
// RESPONSIVE IMAGE LAYOUT
// get all text wrappers - there is multiple of them on the page, so this might be restructured
const textWrapper = Array.from(document.getElementsByClassName('text-box'));
// I don't know if this should be done with applying the function for each or it would be better to pick one item from an array, as there will be only one text box visible simultaneously.
textWrapper.forEach(toggleHeight);
// toggle a class that will be used for text-box height measurement
function toggleHeight(text) {
text.classList.toggle("read-height");
}
start();
}
// IMAGE RESIZE
window.onresize = start;
function start() {
// get text-box element with a 'read-height' class
let textBox = document.querySelector('.read-height');
// get text-box height
let textHeight = document.querySelector('.read-height').offsetHeight;
// calculate image-box height
let imageHeight = window.innerHeight - textHeight;
// get image-box element
// again I'm not sure if 'forEach' is better here and not picking one element from ana array - I include code for the second option in comments below
//~ let imageBox = document.getElementsByClassName('overlay-img-box');
let imageBox = Array.from(document.getElementsByClassName('image-box'));
if (textBox === null) {
return
} else {
//~ for (var i = 0; i < imageBox.length; i++) {
//~ imageBox[i].style.height = imageHeight + "px";
//~ }
imageBox.forEach(resize)
function resize(element) {
element.style.height = imageHeight + "px";
}
}
}
</script>
I figured it out and even simplified the code a little.
This code can work on arbitrary number of containers as long as they have individual buttons for opening an overlay and share DOM structure.
This is a partial solution for a problem with responsive layout driven by text amount discussed here:
// OVERLAY TOGGLE
function toggleOverlay(overlay) {
// toggle overlay on div with "overlay" class
overlay.currentTarget.nextElementSibling.classList.toggle("over-show");
// RESPONSIVE IMAGE LAYOUT
// get text wrapper and toggle a temporary class
overlay.currentTarget.nextElementSibling.firstElementChild.classList.toggle("read-height");
// call image resize function
resize();
}
// RESIZE IMAGE
window.onresize = resize;
function resize() {
// get text div
let textBox = document.querySelector('.read-height');
// get text div height
let textHeight = document.querySelector('.read-height').offsetHeight;
// calculate overlay image height
let imageHeight = window.innerHeight - textHeight;
// get image div
let imageBox = document.querySelector('.over-show').lastElementChild;
// resize image div
if (textBox === null) {
return
} else {
imageBox.style.height = imageHeight + "px";
}
}
I have another problem to solve.
I made a function that is performing a basic toggle with if else but now I want to add another if else inside one of the main branches. But I can’t get imageShow function to work. The console is not returning anything when running this code and I don’t know what is wrong here.
I know that this is probably not very optimal way to do it, but the main function is doing a lot of other work in real code and restructuring it would be a major work for me considering that it is attached to over 150 DOM elements across entire page. I know how to make it working, but splitting the toggle would require duplicating a lot of code.
You never call imageShow function. Any particular reason it’s a function to begin with? Anyways imageShow(); somewhere below the function deffinition. The place where you put it it’s only gonna be available inside the if and below the function deffinition.
Also console.log is your friend in times of need. ^^
Well, lets say I didn’t exactly RTFM lol. I’m just learning stuff along the way. It’s easier that way, because I can have effects with absolutely minimum effort.
I’m 100% sure this thread is making so much people cringe, but I don’t care, I don’t care.
