I have a large containing element with around ten DIVs inside - most are about 300px in width on average and are all set to float left. The end result is a widget/grid type layout. However, this style has been specifically built with responsive design in mind - we're using media queries to adjust the size and column count depending on device.
The issue is that we may have one or two boxes that are double-wide or double-tall. The double-wide doesn't really cause a problem with floating (that I can't solve anyway) but the issue is the double-tall. The double-tall would expand into the next row, but prevents other boxes from floating on the left of it. Float-right isn't an option because the tall box can't always be on the right.
I'm trying to find a way to dynamically figure out where each block can float to, like solving a puzzle. I've looked at a few javascripts like Masonry, jLayout, etc but they either don't work, or don't solve the problem of irregular boxes.
So:
I want to avoid absolutely positioning anything because we'd have to re-do that every time, for every element and they won't feel fluid.
I need to allow for double-wide and double-tall, but they may not always be present and eventually, users should be able to determine their location so we can't always just write javascript based on a known location.
I've tried moving around the elements via jQuery which does work, but has to be done on window resize, which is too much activity and results in elements flickering back and forth when you transition over the width that requires three columns to four.
Using css3 columns won't work because the DIVs are treated as text and are broken into two when they pass to the next column, and that doesn't allow for double-wide either.
Does anyone have any ideas or suggestions?
Use Jquery Masonry or Isotope, it'll arrange all the containers into the most space saving arrangement ( or if your using isotope, you can fiddle it around to prioritise other forms of arrangement)
Well, if you don't care too much about the order of your elements, a simple solution would be this:
Add your items to #main so that all .tall widgets are added first. Float .tall widgets to the right.
Likewise, make sure that all .wide widgets are added last and float these to the left.
It works in this case and I think will give you the most optimal use of space for any set of these elements.
I still have not found any real way to handle the situation. For now I've just written some custom javascript to swap around a few DIVs when the page resizes.
Related
I decided to use a card UI in a project and checked a few Masonry-like libraries, it seems that all of these use position: absolute for arranging elements.
IMO this method is not the right tool for some purposes, for example my cards are expand/collapsible (like Google plus post comments) and although this can be animated in Masonry, it causes complete rearrangement in elements (it doesn't simply push elements down, elements jump from column to column).
I took a look at G+'s markup, they dynamically insert 1, 2 or 3 DIVs as columns depending on screen width (for responsiveness) then fill this columns with elements. In this way elements have their normal position and behavior, so if you need to add, remove or expand/collapse just insert the element into the DOM or change the height and browser does the positioning.
They also take care of overall height, so in the next Ajax loading, it calculates and distributes elements in columns in a way that columns height grow at nearly same total height (just like Masonry)
Do they use any specific library?
Is there any responsive framework/library that work in similar way?
I had the exact same problem and I think Salvattore is exactly what you are looking for.
It automatically creates some columns and puts all your grid elements into the right column.
The styling is then totally up to you, so no need for any position:absolute.
In fact thats all the styling you need:
.size-1of3 {
width: 33.333%;
}
Check it out: http://salvattore.com
Alright here is my dilemma. I have a bunch of divs with the same width
(but variable heights). I want them to be displayed on the page one on top of the next UNTIL the bottom of the page, if there is space for a second column of these items on the page without scrolling then I want it to continue in the second column, third column, etc. If there is no available space left on the page then it goes off the page requiring a scrollbar to see things underneath.
This would essentially be akin to having float:top if it existed (which it sadly doesn't). Also I want this to change dynamically with the window size. If I shrink my window to one column width I want the data to go straight down one column. If I resize to two columns wide then it divides the data between the two columns.
Lastly the order of the divs MUST be preserved. I am willing to use jQuery and CSS including CSS3 to do this, anything else and I will have to look at it. I am sure that if I worked at it I could write some custom jQuery script to do this but I can't help but feel like it should be easier. I have looked at css3 columns but couldn't get them to do what I want so if they can do it the be specific as to how they do it.
Have you heard of media queries? At specific break points you can apply different CSS rules, so you could change the layout of your columns.
Have a read.
I'm trying to make sortable blocks with various heights using JQuery .sortable().
But if you try to move the big block to the right then one of small boxes moves to bottom and leaves blank place.
And when I set float: right to parent div instead of float: left I can't drag the big block to the left correctly.
I understand why it happens and how the float works but I can't find a workaround.
jsFiddle sample
UPDATE:
Here is complete picture of what I'm trying to do. All I want is to be able to create this structure from blank page using only 6 sizes of width, resizable height and sortable items.
Now works I originally had an almost working model using a second wrapping div around the short items. The bug is in my FF Win 7 (seemed okay in IE9) which sees a slight height difference between the large block and the group of blocks, so a lower float "hits" one to the upper left (if it is a large block) and does not go left. When I look in Firebug, FF is showing the computed border to be not 1px, but 0.916667px, so I don't know if that is the problem (fixed now below).
See http://jsfiddle.net/tnLcg/47/. I had originally enabled the ability to sort between short holders, but I think the correct functionality would be to make such a move a swap. Perhaps http://www.eslinstructor.net/demo/swappable/swappable_home.html might be implemented to work between the short holder stacks.
EDIT--Firefox fixed: I kept the short holder border but set it to transparent (so it calculates the same as the double height box) then used relative positioning of the elements inside to adjust for that and it works in FF now for me: EDIT: Improved version (4 column) http://jsfiddle.net/tnLcg/99/.
You could try jQuery Masonry for that sort of layout (if I understood your question right).
If you want the two halves to be able to move independently, split them into 2 columns, then use the connectWith option to make them draggable between the two:
http://jsfiddle.net/ujahd/
If you want the two halves to stay grouped together, then group them into one div:
http://jsfiddle.net/W5VzD/1/
There also this tutorial if you were interested in reading up on it. Hope you found your answer.
edit: it's not jquery though.
I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.
I have a design that has several divs at varying widths/heights and I need them to float essentially to the top left. A simple css float:left will not work because it does not take advantage of the vertical space once it drops to a new line.
I assume I will need to use jQuery to dynamically position each div but I was hoping someone could lead me in the right direction.
This is what a standard float left would do:
standard float http://www.media1designs.com/poc/superfloat/diagram_float_left.gif
This is what I need it to do:
what I need http://www.media1designs.com/poc/superfloat/diagram.gif
The sizes of the divs will change as the website's content updates so manually entering the positions is not an option.
Have you tried the masonry plugin?
You need to have an algorithm for determining where to place the next element given a set of existing elements and a bounding box (the container width & height). I'd start with plain english and just writing it down with pen and paper first - it's easier than code.
Once you have that, you'll use the jQuery width and height functions to get the sizes of the elements to position and I believe you'll want the css function for setting the top/left. The position of the elements should be "absolute" and the position of the containing element should be "relative". See all jQuery API methods.
Assuming you've written your layout algorithm as the function calculateOffset(element, container) returning an offset literal (e.g. {left: x, top: y}) and that you have a jQuery element list elements and a jQuery-wrapped container, you can do something like this to position everything:
elements.each(function() {
$(this).css(calculateOffset($(this), container));
});
The hard part, of course, is writing calculateOffset. For that I recommend starting with something simple, like finding the highest possible (lowest top) place to put an element, favoring the left side (lowest left), then going from there.
I don't think I've ever heard of or seen a layout engine that would display things in that fashion. Most likely, you'll just have to write it yourself.
You'll need to create an API (at least in the way you think of things). Most likely, you'll end up with a Block (each div to be laid out) and a Container (the area holding the divs). Apply the appropriate methods, properties, and events to each of them, and you'll probably get there rather quickly.