Develop Reference

Smart way to move elements into another element as soon as there is no space left

I am building a preview of a document, which is split into separate DIN-A4 Pages. Those A4-Pages are white blocks with a margin between them.
Now i need a way to move elements to the next page as soon as there is no space left on the current page.
I am currently thinking of implementing a solution using JavaScript to detect if an element is overflowing the current page (which can be checked with el.clientHeight < el.scrollHeight or similar things), and then mark that element and all following nodes to start on the next page. I dont think this will be the most beautiful approach since it will require multiple render cycles to get the result. Do you have any suggestions on how to solve this problem in a smart way?
I know CSS very well, and i don't think there is a way to solve this with flexbox, since flex cant move elements from one div (which is a page with white background) into another div.

React show page when images are loaded

The past two nights I have been struggling with an issue in React. I have a website that has multiple images (a header, some gallery images, some cool photos). I want the page to render in whole the moment all images are correctly loaded.
There are people that tell me to use the lifecycle hooks, but that doesn't seem to work because the render proces is faster than the time some images need to load in.
This one time I thought I managed to get it working by doing the following: Add inline styling to container div saying display none. Then add onLoad={method to trigger a display: inherit} to the container div.
But when I used a bigger image (of 15MB, just to test it out) the loading was perhaps a succes but still took time to show on the page. So it didn't work afterall. It just 'looked' like it worked cause the other image loaded faster.
Anyone has any other idea's to tackle this problem?
Best of wishes,

If you know the number of images you have on the page you can do a counter that starts from zero and put an onLoad on each image which adds one to the counter when the image is loaded...then do a condition:
{counter===numberOfImages? <Content><Content/> : null}

Replaying scroll events for every element in iframe

I maintain a library, react-to-print. The library provides a React component that at its core has two inputs: a trigger (usually a button), and content. When the trigger is clicked, the library will copy the entire DOM representation of the content and put it into an iframe. It will also copy all style links on the page to ensure the content is styled correctly within the iframe.
A while ago, someone raised an issue (the end of the thread explains the core problem) concerning the library's seaming inability to print content that was horizontally scrolled, in this case, within a table. It turns out that what is actually happening is that a component within the content is virtualizing its render, meaning only content this is visible on the screen is actually being rendered. So the issue is that react-to-print is not maintaining the scroll positions of child elements when it copies them into the iframe.
I know how to scroll the entire page itself inside of an iframe, but do not know how to maintain the scroll of individually scrolled DOM elements that are children of the window. Is there a way to do that?
While an ideal solution would of course be just turn on a setting or something and done, I'm guessing that, if a solution is possible, it will look something like:
Iterate over every element on the page
If the element has a scroll, save its scroll position in a map
Copy over the elements into the iframe (as is currently done)
Iterate over every element in the iframe and apply a scroll if one is found for it in the map

Loading new content into a responsive slider

How does this slider reload new content as the page is resized?
http://www.herschelsupply.com/
I stumbled across this whilst shopping and their slider is a good facsimile of what I want to create for my own site. Their slider loads new content at a certain point when the window is resized. I have had troubles doing that using BxSlider because I am new to JS.
More info
The problems I have had are these:
I can use css media query or jQuery to hide certain slides, but they remain in the DOM so the slider still displays them in the pager and sometimes it just stops rotating/breaks.
If I create two different sliders to be loaded at different widths the change does not occur as the page is resized. Also this seems wasteful.
If I remove and replace elements from the DOM on $(window).resize(), I am not sure how to return them to the DOM if the window is resized back and forth continuously.
Overall I am just asking what approach you would take to do this? Im sorry if this is verging more towards discussion than a specific question, but I'm not sure where else to ask.

The website you showed simply has two completely separate slideshows. One is hidden and another is shown when the window resizes.
<div id="slider-one" class="hide-for-mobile">
/*Slider here*/
</div>
<div id="slider-two" class="show-for-mobile">
/*Slider here*/
</div>
Then in your media query for mobile...
.hide-for-mobile {
display: none;
}
.show-for-mobile {
display: block;
}
Now, as for a solution that's more along the lines of what you were trying to do... What you need to do is get away from HTML <img> tags. Instead, your sliding elements should be <div>'s with a CSS background image. In this way, in your media queries you can change the background image of the <div>'s. I am unsure whether or not the slider you are using can support this, some are dependent on sliding an actual HTML <img> tag. Some can slide whatever you want. You should be able to manage what I've described with Flexslider (a quick google search will get you where you need to be).

Can Javascript force hidden divs to wait to load their contents? (HTML/Javascript)

I have a fairly basic thumbnail-and-view page going. As each thumbnail is clicked, the central pane shows the full-size image. This bit works fine - I'm using Javascript to show and hide the divs which contain the large images, but as the page first loads, it starts loading all of the images at the same time. This causes the first image the user sees to be brought in very slowly.
I have experimented with creating the divs on the fly, but then I'm stuck with the undesirable effect of having to wait for load of every image. Ideally, I'd like to use my current setup - just show and hide divs - and have the hidden divs start loading their contents as soon as the first pane has completed. Is there a way to set the loading priority on visible divs, such that hidden ones don't get network time until all visible divs are rendered?

I think what you want there is to combine your 'creating the divs on the fly' (for the non-visible divs) with image preloading. Should get you what you're looking for.