#Making Stacked Images in javascript

5 messages · Page 1 of 1 (latest)

frail sable
#

heres my code ```function createStackedImages(imageUrls) {
// Create a new iframe element
var iframe = document.createElement('iframe');
iframe.style.position = 'fixed';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
iframe.style.zIndex = '9998';

// Append the iframe to the body
document.body.appendChild(iframe);

// Access the iframe's document
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

// Apply CSS styles to enable scrolling
iframeDocument.body.style.overflow = 'auto';
iframeDocument.body.style.height = '100%';

// Create a new container element for the stacked images inside the iframe
var container = iframeDocument.createElement('div');
container.style.position = 'relative';

// Set the container height to fit all the images
container.style.height = '100%';

// Calculate the height for each image
var imageHeight = imageUrls.length;

// Create and position the images
for (var i = 0; i < imageUrls.length; i++) {
var image = iframeDocument.createElement('img');
image.src = imageUrls[i];
image.style.position = 'absolute';
image.style.top = (i * 990) + 'px';
image.style.left = '25%';
image.style.zIndex = i;
image.style.width = '50%';
image.style.height = 'auto';
container.appendChild(image);
}

// Append the container to the iframe's document body
iframeDocument.body.appendChild(container);
}```

This code puts a bunch of images like a webcomic on top of a webpage. I have an issue though, some of the images being inputed have different y size values how can I implement this into my code so the images line up right on top of each other?

ebon scrollBOT
#

Never use var. It is outdated and dangerous. Instead, use const or let if you have to reassign.

frank halo
#

add "js" after the first three backticks to get syntax highlighting

#

question doesn't make much sense. what do you mean "right on top of each other"? show an example?

frail sable
#

took a few hours of debugging but got it done