Develop Reference

Resize divs when maximum divs are created

See the diagram below -
On click i create a div of width 680px and height 295px in the top left corner of the screen and go on until the bottom left corner of the screen with javascript. like image below...
Now when the 4th div is created, On the 5th click, i want my application to be able to calculate the space available and if there is no space available it creates a second div next to the first div created and so on in all other divs as seen in image...
Does anyone know how to calculate the space available dynamically everytime a div is created and then accordingly create smaller divs to fit into the spaces in the main container?

How to keep position of scrollbar with JavaScript?

There are a lot of pdf pages that is wrapped by div in a page. When they were zoomed by increasing div's width and height, scrollbar lose its position.
How can I fix it like this example?
As you see in the example, when you zoom anywhere in the page, scrollbar didn't lose its position and it acts as a sticky.
What is your suggestion?

how to define a specific scroll area on mobile browser?

I am writing a single page app for mobile use antd-mobile,
There's s a Tabbar on the bottom of the page, and a list of items that u can see the background is gray, the problem is the Tabbar cover the content of the when I scroll down to the bottom.
How can I make the list area to be scroll area not the whole page?

Some code could help us help you... But there is multiple strategies you could use, all depending on your actual code and what you'd prefer to achieve.
Use margin-bottom on body. This will add a margin to the bottom of your pages, having it set to the height of your Tabbar, this will ensure that it never hides the bottom content. That is assuming your Tabbar is in a fixed position. This solution will make the scroll bar show on the entire page.
Use a defined content holder height, and set overflow-y:scroll. You could set the height of your content holder to be 100vh minus the height of your Tabbar. This way it is "fullscreen" and you can then apply overflow-y:scroll to make that part scrollable. This will display a scroll bar on the element, not the entire page.

Keep backgound div to 100% width & height after JS used to display more content

I've built this site: http://dabble.market/cms/
All code (HTML, JS, CSS) has been added to the one HTML page as it's in WordPress and utilized a "Coming Soon" plugin. You can view the site and view the source to see the entire code for the page.
On the page I have a green downwards arrow, that when clicked uses JS effects to shrink the logo, and fade in text in a fullScreen div that's hidden on load which contains the content. This fullScreen div is not a child element of the div that sets the background (the div that sets the background utilizes a Google Map's plugin to set the Map as the background).
When the content in the div that is hidden initially becomes visible, the content overflows the boundaries of the div that sets the height and width and adds vertical scroll bars. My question is this though; is there a way to make this content fit the width/height of the div that fits the background, without pushing the content outside the boundaries of the background div? I still would like to keep the scroll bar - I just want the div with the content in it to scroll, while the div with the background remains at 100% width and height. I hope that makes sense...?
This is especially visible on mobile devices, as when you scroll downwards on a mobile device the Google Map remains as a background to the div, but the content div overflows the Map / background significantly.
Any help would be greatly appreciated :)

Try this
.fullScreen {
overflow: auto;
}
You have set a parent div with 100% height, and you want to make its children scrollable. You should set the parent's overflow to auto or scroll.

How to properly scale a webpage, according to zoom, resolution and windowsize?

I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.

That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.