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?
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 have a simple page with a fixed sidebar (navigation) and a content area that scrolls normally. Sidebar position:fixed, content area normal.
The sidebar (if taller than the browser) uses a scroll bar to show the rest of the sidebar content. Thats cool, it works like its supposed to.
I'm trying to get the sidebar, onload, to set its height as tall as its contents, so there is no scrolling. So if the sidebar is 2000px tall with all the content loaded in, onload the height is set to 2000px so there is no scrollbar. It will just make the fixed sidebar 2000px high.
Is this a min-height issue? I feel like there is a simple way to do this but I have been at it so long I cant figure it out. Ive used scrollHeight, height(); etc. and cant get a solution.
Thanks
Remove the css height to allow the div to expand, set overflow:none;
Otherwise similar questions and answers here:
Make div 100% height of browser window
This is what I understand from the question, since there is no code submitted.
If you "mesure" contents height after pageload, you can set your sidebar height to this value.
document.ready(function(){
contentHeight = $("#content").css("height");
// set sidebar height
$("#sidebar").css({"height":contentHeight});
});
Place it at the end of the page, so it will be executed after pageload.
I'm not sure this will remove the scrollbars, since it appears when height is more than viewport.
You'll have to set css for the sidebar to overflow:hidden.
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.
I'm trying to center vertically (or put at an arbitrary vertical position) an image in a window that has already been scrolled to the bottom.
For example, the user is on a page reading, clicking, etc. and is now, after multiple screens of content, at the bottom of the page and about to click the last button. I want an image to pop up centered in the window.
When I try:
http://www.w3.org/Style/Examples/007/center-example
or:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
the image is centered on the first screen of content, i.e. you have to scroll the page all the way back up to see it centered in the window. I would like the image centered within their current point of scroll. This is intended to be part of a Javascript function.
A fixed position will do that (position:fixed in css). Here`s a jsfiddle in which a modal popup is centered that way on the screen.
Use position:fixed;, and the content will be centered relative to the window.
I have a sliding screen on a long HTML page with left and right columns. How can I obtain the height position of the screen in the HTML page, knowing users use sliding bars? I need this to slide the left and right column content to follow users' movement. Thanks.
P.S.: I am using JQuery (if it helps).
You can use scrollTop to find the vertical scroll position of any DOM element.
$('#element').scrollTop()
Some other useful functions: scrollLeft() , offset() , position()