Auto Arrange box in css or javascript - javascript

I am creating a template and I want to know how to Auto Arrange multiple height box in css or javascript.
I already tried to change the CSS and Javascript and I've also searched on Google but I've had no luck yet.
I am giving here image for clear to know what i am looking for i am showing in this image...
please check image before replay what i need
thank you

Have you looked at a library like Masonry?
http://masonry.desandro.com/

To auto-arrange elements with differing heights, there are a bunch of different libraries out there you can use. One such library is Masonry.
Try out the snippet below:
new Masonry(document.getElementById('container'), {
itemSelector: '.item'
});
.item {
width: 25%;
}
.one {
background-color: orange;
height: 100px;
}
.two {
background-color: green;
height: 150px;
}
.three {
background-color: blue;
height: 200px;
}
<div id="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item three"></div>
<div class="item one"></div>
<div class="item two"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>

Take a look at existing tools to do this like Shuffle and masonry. (Shuffle actually uses masonry.)

You haven't provided much detail so my answer can't have much either. It looks like you are looking for CSS Columns. Tables with table-layout: fixed; might also be of use. These layouts are called Pinterest Layouts or Mosaic Layouts

I have good news and bad news, followed by more good news.
The good news is that flexbox is exactly the sort of thing you could use out-of-the-box for this. No js required -- You will set up the flow direction to be in column mode, and you will turn on wrapping. I've provided a fiddle:
https://jsfiddle.net/cev0ug3y/
The bad news is that for this to work, you have to know the height ahead of time. This is fine when you have a small fixed set of items to show, or if the scrolling is set up to be horizontal, but it's not so good when you want that Pinterest-like infinite scroll.
The good news is that there are a lot of people before you who've solved this using javascript -- I'd really recommend using one of those. Refreshing the answers, I see Masonry and Shuffle have already been suggested, so I'll throw in one of my favorites (by the guy who wrote Masonry): Isotype - http://isotope.metafizzy.co/layout-modes.html
If you still want to roll your own, the idea is very simple:
Initialize an array of leading edges which record the vertical height of each column of your display. You'll be initializing this to zero.
For each item you need to place, find the minimum leading edge who, with its neighbors, can accommodate your item.
Set the leading edge of all participating columns to the value of the leading edge you chose plus the height of your item.
You will be using position: absolute to do this. If you don't know the height of images ahead of time, you might be stuck waiting for the load to complete before placing each item. If your items are different widths, you may have holes in your display, and there are techniques to minimize this, but it doesn't look like that's what you are doing here. Despite all of these caveats, this should get you started, but I'd still look at third party libraries for inspiration.

Related

How Do I Scroll All Elements To Target Element

Alright, I have no idea what I'm doing. I thought that there would be a library for this, but apparently there isn't.
Problem Explanation
I have a complicated React Application.
There exists
Main Page Element
A content container
A display container
The element I want to scroll to
I am trying to find a solution that will scroll to an element on a page and force all parent scrollbars to scroll to the appropriate location in order to view the element on screen.
Example
<html>
<head />
<body>
<div style="background:red; display: block; height: 1000px; overflow-y: auto">
Root Parent
<div>
<div style="background:green; display: block; height: 1000px;overflow-y: auto">
Another Parent
<div>
<div style="background:blue; display: block; height: 1000px; overflow-y: auto"></div>
<div style="background:purple; display: block; height: 1000px; overflow-y: auto">
<div id="targetElement">Scroll here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS Fiddle Here
https://jsfiddle.net/10f83ush/
Solutions I've tried
I found zen scroll
But in their How to Use Section - 1.4 they explicitly state it isn't supported
https://zengabor.github.io/zenscroll/#howtouse
I found this this thread here
Scroll all nested scrollbars to bring an HTML element into view
And I thought that would work but it doesn't.
If I do element.scrollIntoView that doesn't work either because it's got two sets of scrollable parent/grandparent that both need to scroll to.
Request
How the heck do I get all the parents of the target I want to scroll towards to all scroll towards the correct location to show the element on the page?
I feel like I'm going crazy. It's 2020 and I can't simply scroll to an element that's nested inside other scrollable elements?!
EDIT
To clarify, I'm not trying to do a million scroll bars at a time (Yes this is bad UI/UX), but the solution I'm searching for should support as many as possible. There are multiple solutions I've found where the answer has been solved, but only for one or two scroll bars and then ignored more than two. I would love for guidance or help on how to handle any amount of parent scroll bars when trying to scroll a nested element into view.
Without creating a more complicated solution I opted to use a library called scroll-into-view.
https://github.com/KoryNunn/scroll-into-view
https://www.npmjs.com/package/scroll-into-view
This library is AMAZING - and it does EXACTLY what I wanted which is scrolling elements into view.
Additionally it supports arbitrarily offsetting the scroll location, the ability to filter scrollable areas so that it doesn't change focus from the entire page, and a ton of other amazing features.
This was so good I decided to contribute to the patreon for it!
If you're looking for a solution I would suggest trying this library out!

jQuery MatchHeight performance

I use jQuery matchHeight. It's used to make all elements in a row the same height.
I have a page with a lot of elements and it is very slow to load and also if you resize the browser (that fire the matchHeight update) you have to wait the finish of the function.
Here you can find an example (open it in fullscreen).
As you can see I include Bootstrap (Css on and jScript on the end of page), jQuery, the plugin MatchHeight and in my script.js I initialize it with this code:
jQuery( document ).ready( function( $ ) {
// matchHeight
$(function() {
$('.col-eq-height').matchHeight({
property: 'min-height'
});
});
});
The page contain a lot of elements with class "col-eq-height" where I apply the matchHeight functionality.
How can I increase the performance of this plugin?
For example applying the matchHeight only for the showing elements (based by scroll position) and not for all elements on each browser window resize.
Thanks and sorry for my English
DISCLAIMER: This is pretty much a non-answer, because you've asked what I'd pretty much consider a non-question. Nobody is going to write extensive code like that for you, especially not with such an arbitrary question as "can you make this faster?". You have also provided no attempts at what you've tried to do.
Honestly, basically anything can have its performance increased. If you're asking for somebody to test and develop something that's fast for your particular use case, then you'd better check your bank balance and hire yourself a professional. That can be a very challenging task, depending on what "fast" means to you. Here's a list of the very basics about optimizing JavaScript.
Also, for the love of God please could you be more specific in your questions than
where I apply the matchHeight functionality.
That doesn't help people to understand what it is you're trying to achieve. What's the context, i.e., what kind of page are you designing here? Maybe then the question would not be "improve the plugin's performance", but instead, "what other designs/methods of design can I use that don't have such massive performance penalties?".
If you want a list of items displayed and there are hundreds, why not paginate them, like Google does? Or an infinite scroll?
Also, if it's element positioning you're after, why not attempt to calculate exactly what type of layout you want first, then use CSS? I've never had to use jQuery for non-animated HTML design, and I'm increasingly using CSS for animations, too. Maybe you should reconsider exactly what type of layout you are after and try to use CSS first. JavaScript is going to be CPU expensive if you're playing with thousands of elements' styling.
EDIT: As per the comments, if the question is rephrased to "how can I make the child elements of a row the same height as the row", we could do the following:
.container {
display: table;
}
.child {
width: 30px;
background-color: red;
display: table-cell;
vertical-align: top;
}
.content {
display: inline-block;
height: 100%;
width: 100%;
background-color: blue;
}
<div class="container">
<div class="child">
a<br />a<br />a
</div>
<div class="child">
a<br />a<br />a<br />a<br />a<br />a<br />a
</div>
<div class="child">
<div class="content">
a<br />a<br />a
</div>
</div>
</div>
Here, you can see that the elements are all the same height, without needing flexbox (which is still occasionally unsupported). Hope that helps.

css float elements with unequal heights left and up in grid

I'm wondering how I can accomplish the effect in figure 1.
What I have got so far is
.box { display: inline-block; vertical-align: top; width: 100px;}
This gives me the result illustrated in figure 2.
(Notice: I'm aware I can accomplish the same with float: left)
My HTML code looks something like this:
<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>
I want every element to be floated to the left as far as possible, but meanwhile floating upwards.
Is it possible to do this with pure css, or will i need some javascript?
EDIT:
It is important for me that the entire grid is positioned to the center of the page. That's why I use display:inline-block. The grid should also not be fixed to the page because I want it to reflow when I resize my window.
You can use the popular library Masonry.
A dynamic layout plugin for jQuery The flip-side of CSS floats
Here is a code example...
$('#container').masonry({
itemSelector: '.box'
});
Here is the source on Github and an interview with David Desandro on the Shoptalk podcast.
For folks that aren't using jQuery, note that there's also Vanilla Masonry which is the framework-free version.
Tip: Make sure the parent container has position:relative so all the content is bound to your container.
Since you are already using jquery, jquery masonry might interest you: http://masonry.desandro.com
Well, if you only aim to support the most modern browser, the CSS3 multi-column layout could help. One problem with this approach is that it will not keep the same order, but you can play with the order in the HTML (or Javascript).
I added a container around your spans called #container.
#container {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
}
jsFiddle Demo

Absolute positioning and floats

I have a rather unusual layout that I'm trying to make a reality. There is a div containing, for sake of argument, that needs to be fixed at 200px from the left and from the top of a wrapper.
I then have a collection of square images that would all be floated and would continue to the edge of the browser window, and wrap around the absolutely positioned div. I know that absolute positioning takes the div out of the doc flow, which means I can't think of a simple solution for this.
Has anyone worked out a way around this kind of problem? Potentially with javascript?
EDIT: Here's the rough layout: link
I'm guessing you want more flexibility, but just in case, if your design is reasonably fixed, you can just use 3 columns (container divs) and sort it all out per column.
If your html is fixed, you could use javascript but I don't know of any ready-made solutions.
I would probably use javascript to do some math and inject dummy images / elements behind the black box at the right positions (keeping the black box absolutely positioned). You could also do that server-side.
Edit: Judging from your image, I would personally use a table. However, it can be achieved with floats:
(image: http://i.stack.imgur.com/KAqxZ.png)
<style>
#cont {
width: 100px;
}
.small {
float:left;
height:25px;
width:25px;
background-color:#00F;
}
.big {
float:left;
height:50px;
width:50px;
background-color:#F00;
}
.long {
float:left;
height:50px;
width:25px;
background-color:#F0F;
}
.long .small {
background-color:#F0F;
}
</style>
<div id="cont">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="long">
<div class="small"></div>
<div class="small"></div>
</div>
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
</div>
Original text:
I would do something like this:
<div class="absolute-wrapper">
<div><!-- whatever content you intended for the absolute div... --></div>
<div class="float-left">...</div>
<div class="float-left">...</div>
...
</div>
However, I feel inclined to recommend you search for another solution than an absolutely positioned element. They easily grow unmaintainable.
You could do this with a canvas element, but it has downsides. You will be depending on javascript, as you will need to do all positioning in javascript.
Not to be unhelpful, but I also think you should consider how important this exact design is, simply because I don't think there is any straightforward solution, since HTML as it is today isn't really built for these kinds of layout. The future is promising though, giving us things like multi-column and flexbox...
Using javascript/jQuery, it could be accomplished using the logic of the following pseudo code:
Create a function which preforms these steps....
Step 1: Remove any divs from the dom that have a class named fakeSquare. Something like
$('.fakeSquare').remove();
Step 2: Calculate the number of red divs in one row. Store this number in squaresPreRow. Something like: var squaresPreRow = floor( window width / square width ).
Step 3: After the squaresPreRow + 1 red square div, add two empty divs. Like so...
$("div.redSquare")
.index(squaresPreRow + 1)
.append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");
Step 4: Add another two square for the third row...
$("div.redSquare")
.index((squaresPreRow * 2) + 1)
.append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");
Step 5: And again...
$("div.redSquare")
.index((squaresPreRow * 3) + 1)
.append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");
Finally you want to call this function when the DOM is ready and whenever the window changed.
This may need some tweaking, but hopefully it can get you started.

Is it possible to do this without resorting to Javascript?

This demo, which goes along with this article, succintly describes what I need to do. However I am not impressed by the use of javascript for something that should be possible in pure CSS.
The articles referenced (which I also found independently when looking for a way in CSS) don't perform the same function as the watchmaker demo - the 456 boxes demo doesn't slide under the other boxes when the screen width gets too small.
I've been playing about with the article code and trying various ideas in CSS, but nothing lays out correctly. Also I would prefer progressive enhancement over graceful degradation.
I realize this is an old question, but I wanted to bubble up the answer you should be using now: flexbox. The original demo from the question is long gone, but the markup was this (courtesy of the Wayback Machine):
<div id="one">I am 150px high</div>
<div id="two">I am 200px high</div>
<div id="three">I am 120px high</div>
<div id="four">I am 300px high</div>
In order to equalize the heights using flexbox, you would need to have a container wrapped around them:
<div class="container container--equal-children">
<!-- those four divs -->
</div>
Setting that to display: flex and setting align-items to "stretch" gives the desired effect:
.container--equal-children {
display: flex;
align-items: stretch;
}
Once that’s in place, you can skip the whole sizing thing and let the children flex to fill 1/4 the space:
.container--equal-children #one,
.container--equal-children #two,
.container--equal-children #three,
.container--equal-children #four {
flex: 0 1 25%;
}
They will all automatically be the same height.
I put together a CodePen that lets you toggle the flexbox rules on and off. It’s worth noting only the toggling functionality requires JS. There are also some "for presentation only" style rules I’ve added (which are noted) to demonstrate the design behavior.
Unfortunately, there really isn't a good way to do it in pure CSS. I assume that you want a dynamic height of containers based on a single parent container. Cross-browser issues make it an absolute nightmare, and the relatively small amount of JavaScript needed to accomplish the effect, IMO, is a better approach than trying to maintain really ugly and nasty CSS rules, having to import other CSS rules to fix things in certain browsers, etc, etc.
There's a reason these "equal heights" scripts even exist, and it's because of how much of a hassle the effect in pure CSS is.
I would stick with the JavaScript solution.
This is something which you'd think would be simple but is actually really tricky.
The "sliding under" aspect isn't really related to maintaining the same size. That's just how floating works. They probably have a rule like:
.box { float: left }
with markup like:
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
If they gave .container a fixed width, that would prevent the .box's from sliding under each other.
If all you're looking for is to have background colors under various boxes of fixed width, there is an easy way to accomplish this without JS.
You can give .container a background image that has the backgrounds for all the boxes and tiles vertically. With your first example, it would be only a few pixels high with a 200 px section of orange, 200px of blue, 200px of red, and 200px of green.
Since if you "clear" the .container it grows to contain all the boxes, the background boxes would appear to all be the same height.
Anything more complicated such as vertically centering the text in the second example, and you're probably better off going with one of the JS scripts to even out the boxes.

Categories

Resources