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.
Related
It's been a mystery for me since day one. And it still is. The time has come to reveal it. So I've made a test page, containing a div, which extents you can change. And info panel that displays values of relevant properties. Let's take just Chrome for simplicity.
Default body margin is 8px. html's background is blue, body's green, and div is of red color. And here we can see that html's offsetHeight is equal to body.offsetHeight + 2 * body.margin, as if it just envelopes body. But html.clientHeight == window.innerHeight, as if it's stretched to fill the viewport.
Now let's add horizontal scrollbar (make div's width 1000px), and scroll to the right a bit:
html and body move to the left. body's scrollLeft changes in sync with window.pageXOffset as if it owns the scrollbar. html's clientHeight changed owing to the added scrollbar.
Let's do it the other way around (vertical scrollbar):
Now both html's extents changed (offsetWidth and clientWidth). Which suggests it doesn't own the scrollbar.
And finally, with both scrollbars:
Well, at this point things are more or less clear to me. At least as long as we're only considering Chrome. But there are still a couple of things I'd like know.
How come html's clientHeight can possibly be less then offsetHeight? Is there any better explanation than "it's just so"?
Why body's scrollLeft/scrollTop changes as I scroll the page? It doesn't own the scrollbars, does it?
Also some summary would be in place.
So, there's a canvas that is displayed in a viewport (window). On the canvas we have html element, which contains body. They're mostly like divs, but have some quirks:
Along the X axis html element by default (width: auto) stretches to fit viewport. Not a quirk probably. Viewport is html's container. And as an ordinary div it by default fits container width (excluding scrollbar).
html's height is as big as to fit body element. But for some reason its clientHeight equals to viewport height minus scrollbar. As if it stretches to fit viewport along the Y axis as well.
body's scrollLeft/scrollTop properties mirror viewport's pageXOffset/pageYOffset
body's top margin doesn't collapse with html's one
body shows no signs of stretching to the bottom edge of the viewport unless you have, e.g., absolutely positioned element with bottom property being set. Judging from offsetParent value, body acts as an element, relative to which absolutely positioned elements are rendered by default (unless there are other absolutely positioned elements up the hierarchy)
With Firefox the difference is that it's html's scrollLeft/scrollTop properties that mirror viewport's pageXOffset/pageYOffset.
That all is just my interpretation of what I see. I'd be glad if someone were to correct me, or add to my findings.
i am trying to add tooltip for my d3 chart and is now having some problem with positioning.
What i want to get is the horizontal margin length between a div and it's father html in javascript.
you may have a look at the attached picture.
Since my page is embedded in a complex web page so i cannot get the css margin directly. But i really need that to position my tooltip.
Can anyone give me a solution?
You need the JavaScript offsetLeft property.
From https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft :
The HTMLElement.offsetLeft read-only method returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
CSS margins are not very suitable for this, because if you have floating elements or inline-blocks, it depends on the screen width how many elements are to the left of your div. So that's not calculable directly.
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 !.
So I have a large amount of floated elements inside of a container with an overflow setting of auto. These elements (depending on screen-size) will almost always overflow to the next line as they should, however, I want to be able to center the parent div so these elements will always be centered in the page. The container is 100% of the screen width.
Oh, and to make things interesting: the size of the floated elements... is subject to change.
Here's what I'm referring to.
There's a lot of great solutions out there that I've found that have to deal with a single row of floated elements, but I'm almost never going to be dealing with that few items. I will overflow to the next line practically every time, which is why those methods don't work.
Would I be best inserting clear divs every few elements, setting the width and centering the container, or is there a better way to do this without Javascript? Thanks for any and all help!
You should be able to fix this with CSS. Put a width on your container div, and add a margin: 0 auto; to it. I found on your page it works well with a width of 1000px. The problem is if you use a width of 100%, you can't control how many of your floating divs will fit in one row, and when it will wrap because you don't know the viwer's window size. If you set a fixed width you have control over how many boxes will fit in each row.
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.