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.
Related
There are a lot of pdf pages that is wrapped by div in a page. When they were zoomed by increasing div's width and height, scrollbar lose its position.
How can I fix it like this example?
As you see in the example, when you zoom anywhere in the page, scrollbar didn't lose its position and it acts as a sticky.
What is your suggestion?
I would like to know how can I enable the scrollbar while zooming with svg-pan-zoom.
I've tried overflow: auto on external div or svg tag with no luck.
Hopefully I can get some help here.
There is no way to have scrollbars by default inside of svg-pan-zoom as it's essentially an SVG, and inside of an SVG things behave like they're overflow: hidden. You'll have to implement scrollbars by yourself (render some elements that would look like scrollbars, compute their size and position...).
For anyone who comes across the problem, the best solution (hack) I've come up with is to set the container div to overflow: auto, set the svg element width and height to the width and height of the container div, set the position of the svg element to absolute, and then place a second div alongside the svg element. Then you need to synchronize size of the second div to the "true" size of the svg which you can get by calling getBBox() on the svg element, plus any scaling you have incurred by zooming. Thus the second div forces the containing div to have scroll bars. Similarly you need to synchronize the pan events with the scrollbars of the container, and vice versa.
When everything is said and done, panning and zooming happens through svg transformations that are synchronized with the scroll bars of the parent div, and happens completely transparently to the user.
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.
So I've run into troubles when making my web app responsive. I've managed to make it so that the SVG adapts when the width is resized, but I've run into trouble with height.
The best solution I've come up with for height resize is the following js/jQuery code:
function updateWindow(){
var y = (($(window).height()));
svgMap.style.height=y;
}
updateWindow();
window.onresize = updateWindow;
What this does is set the SVG viewport height to equal that of the window.. This works in a sense that it centers the SVG with the browser window's height. Not so excellent, it screws up on mobile devices and adds a strange top-margin almost. It also makes the SVG slightly smaller unless I multiply "y" by some value greater than one. Doing so, however, increases the margin-top esque gap. How troublesome..
You can view the demo here:
http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils.html
and the demo w/o the height center change here: http://zadias.me/SVG/Harrison%20Wilson/HarrisonWils%20-%20Copy.html
To sum things up, How does one go about centering an SVG within an <object> tag, horizontally AND vertically. Also, I would like it so that the SVG map itself fills the wrapper container.
Any help is appreciated, thanks.
EDIT: So I've given up on trying to get it to just fit the parent's height.. Instead I just wrote some JS that will prompt the user with a warning if the height is too small that it will cause overflow of the page. I also made it so that it would be styled perfectly by adding inline CSS to each page, accompanied with media queries.
If you set the SVG's width and height to 100%, ie.:
<svg width="100%" height=="100%">...
then it should just be a matter of resizing the container that the SVG is inside. The preserveAspectRatio setting of "xMidYMid meet" should then centre it vertically.
I'm busy developing a web-app but I can't seem to find the correct way to scale all items so it fits the screen.
As you can see on the picture, the grey bars are menu and need to stay in position. The content in the middle (blue block including the white background) needs to move left and right, but also up and down. Resizing the window, zoom and whatever else should be taken into account. My current technique fails lots of times, so I was hoping if any of you knew some good technique.
So as I said, the content needs to move up and down, left and right. The parent div of all pages is the same width as all pages are together. So one page should have the correct window width. Same goes for height, but there are just 2 pages on the horizontal axis. Currently I'm adjusting size using JavaScript/JQuery.
Just as a sidenote, it might be possible to scroll vertically when the current content page is bigger than the screen can display. Horizontal scrolling is not possible.
Very hard to explain, I'm doing my best, but I hope someone can help me.
That's a lot fun! Perhaps working with em units will assist you. It's a neat little trick.
1 - Set the font-size to 100% on your parent container.
2 - In all of the children elements, use ems for all of your dimensions, padding, margin, borders, font sizes, etc.
3 - In Javascript, when the page loads, capture the browser dimensions and save these to variables for later use.
4 - Setup a window resize event. When the window resizes, get the new browser dimensions. Now, some basic math will allow you to compare the new browser dimensions to the original browser dimensions - and get a percentage.
5 - Still in the resize event, set that new percentage to the font-size of the parent element.
You can set this up with just your center container - or whatever. Any children elements of the main container that has the font-size property (and are defined in ems) will automatically scale with the browser window.
Text will scale
Border size will scale
Border radius will scale
Dimensions, padding, margins will scale
It's neato.