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?
Related
I have a div with long simple text, that user will scroll. I want to put a small div in a corner (overlap main div and sticky with absolute position) that will be exact same copy of big div, main purpose so that smaller div copy scroll position at least, so same text visible in both div's.
if its important - user wont use smaller div, its more like pip(picture in picture), like a preview.
Im curious if there is a way to make this simple way or i will need to think how to do it like two tabs solution
I have a bit of a funny creative coding situation/a logo - where I have a div consisting of around 130 other colored divs and they together form the logo when at the top of the page, and as you scroll the page, the divs shift around and distort the logo, you can see it in action here:
https://warehouse.netlify.app/ and the div situation here: https://github.com/nejurgis/warehouse/blob/master/src/components/DivOverlay.js
as you scroll - the container div width shrinks and in that way it pushes all the children divs around
now the question is:
would anyone have an idea how to shrink the container div width according to the height of the whole page a.k.a. how to make the logo 'collapse' only at the end of the scroll and not mid-way as it is now?
Cool idea!
Consider using css grid https://css-tricks.com/snippets/css/complete-guide-grid/
using this you can specify the columns and rows of your grid and have all your divs automatically fill out each spot.
So I need an offsetBottom() jQuery function essentially. I have a fixed div that overlays the entire website, but I also have a div at the bottom of each page which contains the exact same content. My goal is to get the fixed overlay to disappear once the TOP of the div at the bottom of the page becomes visible, or is at the same height from the bottom as the overlay, even when the page is resized, then the overlay re-appears when the top of the div goes below the fixed div.
I am sorry I have no code example, I have been trying to use offsetTop() but the pages are of varying heights and it will only show/hide when the div reaches the very top of the web browser.
I have a div and inside my div I have a dojo dijit.layout.BorderContainer. Inside that border container I have 2 more more BorderContainers and finally each of those border containers has one more BorderContainer.
The base div is made movable with dojo.dnd.movable. This works fine and I can move my div about my screen properly. My problem arises in the most nested BorderContaienrs. Each of these contains many buttons and have the overflow:auto. When I grab the scroll bar to scroll down to see more of my buttons the scroll bar doesn't work. Instead when I grab the scroll bar and move it down/up it drags the entire div around the screen. I have checked the z-index and the scroll bar is most certainly above the div.
Here is the hierarchy
div/BorderContainer/BorderContainer/Bordercontainer(with scroll bar)
I have a div containing around 20 little divs inside, so that when you click on one, the big div is scrolled to center the small one; then its margins are increased. Problem is, when the margins are increased, the small div is pushed downwards, because the scroll position stays in the same place. I can fire another event to compensate the movement, but it doesn't look pretty, there's race conditions and the effects are no exact opposites.
Is there a way to keep the div centered in the scroll and then push the neighbors away from it?