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.
Related
after several days of researching and trying I want to see if you can help me.
I have a graph (coord) and students should mark the extrema of the graph. I have to use JavaScript for this and work in XHTML 1.0 Strict//EN. The idea was that the student clicks on the position on the graph where he/she thinks an extremum lies, this triggers a JavaScript function (addPoint) which adds an img into the same div in which the graph lies (coordDiv) and gives it the position where the student clicked. For an example visit http://ourresidence.net/JavaScript/ where you should be able to view both the site code and the JavaScript code.
As far as I understood, the positioning has to be absolute. static and fixed are incompatible with the desired behaviour and relative would be very difficult because 1. I don't know where the next "ordinary" positioning would be and 2. it would get more complicated with a student deleting a point. So, absolute it is.
Then the positioning should be absolute relative to the div coordDiv and after some time I even figured out how to give the div a concrete dimension (through it's a bit static, the approach with adjustCoordDiv() in klausur.js hasn't work out). However, if I resize the bounderies of the browser, the div and the graph wanders (since they are centered) but the point does not. That needs to be fixed.
And reading how mixed up the acknowledgement of zooming is in different browsers by now I've already completely given up handling zooming in the exercise, but if you come with a solution for that too, my praise would know no end.
Positioning is relative to some containing element in HTML that is positioned itself. If there isn't any such element, positioning is relative to document's body (as in your case). Positioning basically means to have applied some other position in CSS than static.
So you basically need to subordinate your click points to the DIV containing the whole coordinate system (as you do now ). That div should have
position:relative
without any repositioning to position it and to start a new "local coordinate system" for using
position:absolute
on any subordinated element.
On clicking, coordinates of that click need to be converted from global coordinate space to local one. This might be achieved iterating from clicked element to document element using properties offsetParent, offsetTop and offsetLeft of each passed element.
I am trying to find the top and left coordinates of a background-image that by applying some CSS rules has been shifted off the viewport. Difficult to explain in words, here is a visual example:
Black box: Viewport
Red box: <div> with a background-image
Blue box: <div> containing an <a>
When I do getBoundingClientRect of the <div> with the background-image, I get 0px 0px. It makes sense, because the container is within the viewport, and it starts at the very top and left.
However, the background-image of that <div> has been shifted to the left (and it could have been shifted to the top too), and therefore the coordinates should differ from the ones from the <div>. So my question is:
How would I READ (I don't want to change) How can I find the coordinates of the green point in any page that is facing this situation? I mean, the browser must have known how many pixels it needs to cut the background-image, right?
I am currently using Javascript to access the Web/Dom API. I am willing to use anything (undocumented maybe?) to achieve this.
Here is a solution to your problem that works on modern browsers.
var testNode = document.getElementById('test');
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');
As you can see from the following page not all web browsers support this method.
http://caniuse.com/getcomputedstyle
There is no answer to the "Cross-browser (IE8-) getComputedStyle with Javascript?" question yet and I don't know another solution to this problem.
Without getComputedStyle() there is no reasonable way of getting the current style settings for an element since that requires going through all of the included CSS. It is possible but involves CPU intensive code. If you were to go that direction you will be able to create a temporary div inside the existing div with relative positioning, possibly setting top and left, or margins, to the values from the background position and then calculate where the div's clientTop and clientLeft ends up which may work in some cases.
There is a css property for that: the background-position. Try the following code to retrieve the information asked for:
$('#divId').css('backgroundPosition');
I've tried Googling this question, as well as searching for it here but I can't seem to find anything relevant (which suggests that it is not possible).
I've also tried playing around with combination of using "relative" positioning with different "display" properties (like inline, inline-block, etc.), but not at all to my surprise I have found that it still affects the flow of the page. That's pretty much what I understood anyway, but then it got me to thinking, "Is there any other way, using CSS, to get an element to NOT influence the flow of the page, besides using the positions absolute or fixed?"
I would also be interested in any way to achieve the same effect using JavaScript/jQuery, if it's even possible.
I'm not sure what is the use case here, but here is a short explanation that i hope would clear things for you:
Every HTML has a 'Normal Flow' which is usually from left to right. Block level elements (div,p,li) would always take the whole line, while inline elements (span, a) would appear one next to each other.
There are several ways you can control the flow of the page:
Changing an element's display property (inline,inline-block,table-cell etc.)
Setting position absolute - that would take the element out of the 'Normal Flow' thus making room for other element to occupy that space.
Setting position relative - that way you can move the element from it original position, but unlike absolute positioning the element will still occupy it's original space so no other element can get in there.
Using floats - similar to absolute, that will take the element out of the normal page flow and will enable other elements to occupy that place.
These are the main ways, each affects the flow differently.
Hope it helped.
You could float the element, but that usually causes the element and its in-flow siblings to move away from where it would otherwise be were it in the normal flow. It also transforms the element into a block box. If either of these effects are undesirable, then floating is not an option.
If you want the element to remain as it is but act as if it weren't in the normal flow, then simply specifying position: absolute alone should suffice. If you don't specify any of top, right, bottom or left, then the element won't be offset anywhere from its normal flow position, except in special circumstances (e.g. absposing an element will block margin collapse on that element, because when it's out of flow it no longer has any other margins to interact with — compare this example with this one).
I am switching the contents of divs (fading old contents out, then fading new contents in) and because they are slightly different contents, the moment they change there is a jarring reorganization of everything below them.
My question is, is there a way to make this movement smooth?
I suspect that pretty much the only feasible way to do this is to use javascript to determine ahead of time what the heights (in my case I only deal with blocks where the vertical alignment shifts) of the starting and ending elements are, and assign these values directly. Once I do this I am sure CSS3 transition will apply a pleasant animation.
Is there perhaps a way to get this without specifying explicit dimensions? I seem to recall at some point having experienced items getting moved around the page in an animated fashion. This gives me hope that it could be done using just CSS.
I'd normally create a temporary (invisible) element holding new content so as to calculate its height. After that, the original element can be animated from its current height to the newly calculated height.
It is important that the temporary element created is an identical sibling of the original element so that all the necessary styles cascade and get inherited correctly (for instance, calculating new content height is useless if it doesn't have correct font-size applied)
While animating between different heights set explicitly (i.e. with JS as described above) can be accomplished with CSS3 (transition: height .5s ease;), it will not work for different heights set implicitly (i.e. modifying element content with height:auto)
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.