What is the best way to position multiple divs with differing sizes on the screen while taking advantage of as much space as possible. It will have to get the width and height of each div and decide the most optimal arrangement like a puzzle.
If you're willing to use a plug-in, take a look at jQuery Masonry. If you want to try to code this yourself, the Masonry source code may give you some ideas.
Set up an array with the sizes of the divs (getAttribute(); 'width' and 'height',
get the size of the browser window,
iterate through the div array, take the divs of the same height and add widths up,
if you get to the width of the browser window, add them, else take the closest number and add them.
At the point you run out of divs of the same height, find same width divs and add them vertically instead if you can fit it in the remainder of the window. (Don't forget to shrink the browser window variable)
This will fill the window from the top left and work towards the bottom right.
Finally when you're left with only 'odd' divs, simply add the biggest in width and height, and work your way down.
Related
I am trying to learn and make a reference for myself but i can't find correct, enough, and not so confusing information. So tell me how to find the width of these..
Assume there is DOM element with 10px padding all around, border 5px all around, margin 30 px all around, and content that is too long for it so has scroll bars.
Find widths using javascript...
upto Margin.
upto Border.
Inside Border Padding and plus vertical scroll bar if present.
upto padding excluding vertical scrollbar if present.
upto content only that is visible. (no scrollBar, padding, border, margin, extra content)
upto content that's visible and hidden in scrollable area and with padding
upto content that's visible and hidden in scrollable area and with out padding
Javascript as too many unintuitive catches so please make it clear once and for all.
So far I have gotten this:
unknown
element.offsetWidth
unknown
element.clientWidth
unknown ( css width ?)
element.scrollWidth (see below)
unknown
only workarounds that i know are using lots of javascript to get computed values and then calculate all of these manually..but maybe there are builtin functions or better way to find things.
more Problems:
scrollWidth includes only left padding..shouldn't it either include both or none or at least have other options that do. LINK
box Sizing to border box changes the whole world and every question above needs to be answered again for that. For example for 5 css width property won't be true anymore.
There is no one function that will solve what you're asking for.
.outerWidth() will give the the size of an element, padding, borders, contained content and all. It will not however give you the margin of the element. Using the .outerWidth(true) parameter will give you the width of the element including the margin.
.innerWidth() will give you the width of the element. It is the total width of the content in the element plus the padding, but not the border,
If for some reason you want to know the difference between the inner and outer widths. Which is pretty much the border width or the difference between the edge of the border and the margins just subtract them from one another.
$widthDif = outerWidth(."Somethng") - .innerWidth('.something');
The inner and outer width function are mirrored and work the exact same for height.
Generally if you use .innerWidth() on something like the main body element it returns the width of the document minus the scroll bar because the scroll-bar is not part of the content view port.
Inside of an element is another story.
Best thing I could find in a google search was another StackOverflow question. Which outline rendering and element to 100% width inside of the scrollable element, getting its width and then deleting the element since it is unneeded. Getting the height of something minus a horizontal scrollbar could be found the same way. However once you have a vertical and horizontal scrollbar at the same time things could/would get complicated because the 100% height or width element could expand beyond what is in the view-able space depending on how the content is rendered into the element with the scrollbars.
Is there a CSS(3) trick to stack divs horizontally if they don't fit in their container? If the container is smaller than the sum of widths of the divs, they should overlap each other, the first aligned to the left, the last to the right, until there is just one div visible if the container is too small.
I thought of a table or ul, but I didn't got the desired result.
If this is not possible with CSS, I will go for a JS solution with jQuery. This will be easyer, but not as nice as CSS.
To fit them inline, this is used: display: inline.
If they don't fit in, you can use max-width for the child elements. Or you can use width: 90% for the child, so it always fill and shrink to the 90% of the parent element.
Otherwise in CSS3, you can use media queries, to detect the current browser size and then change the properties.
You cannot check the width or height of elements in CSS, for that you will require JS or jQuery.
In jQuery just use this:
$('selector').css('width');
And use it! And then using z-index overlap them all so that they are overlapping each other if the width is less for them :) Or try to set some sort of max-width so that they are aligned respective to the current size.
But you can check the browser size using CSS3 Media Queries, so that you will know what is the size of the elements now and change their properties! CSS3 Media Query might be an alternative if you don't want to use jQuery but CSS. But its not that much efficient as you will get the widths of the devices and their screens not the elements.
Reference:
http://css-tricks.com/css-media-queries/
Is there a way to determine the max scroll position for every browser, without actually scrolling to the end and reading this position?
Taken a container div with a fixed height and overflow. Several div elements in the container whose sum of heights is bigger then the height of the container.
There is a max scroll position (y) which I thought is simply the container-height minus the total items-height. This seems to be true until the line-height of the container is larger then the height of the items. If this is the case, it seems that every browser determines the max scroll position differently.
With padding it got even worse, some browsers add the top padding, some browsers add both top and bottom padding.
See this fiddle for example. Play around with the container line-height and the div.item height.
I only have the ability to test in a handful of browsers, but I think what you are looking for is:
elm.scrollHeight - elm.clientHeight
Shown in an updated jsFiddle.
Take a look at this How to find the HTML element Scrollable Height and width using JQuery ?, this shows how to get the scrollable height and width,
and there is some related posts regarding element scroll how to check if the scrollbars are currently visible? and how to determine if the vertical and horizontal scrollbars reaches the edges?.
and there are more FAQs available and i hope this will help you !.
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
This seems like a pretty natural use case to me, though I haven't been able to find anything on it:
Say I have a fixed-width div that is dynamically populated with some number. What's the best way to ensure that numbers with more digits take smaller font sizes such that they fit nicely into that fixed width? Is there some CSS property for this, or do I have to resort to Javascript hackage?
There is no CSS property which automatically adjusts font-sizes based on a fixed container. You will have to resort to javascript.
You could put each number in a span, and loop over each span checking its width. If the width is greater than the fixed width, bump the font-size down and then check the width again. Keep on lowering the font-size until the span's width is less than the fixed width.
To prevent flickering, you should perform this loop checking while the fixed div is visible, but placed off page (such as "position: absolute; left: -5000px;")
Css does not do this, but you might want to give these scripts a go: http://www.zachleat.com/web/fittext-and-bigtext/