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.
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 have a page of divs that display thumbnail images. Each is set so that when it's clicked on, a larger version appears in a larger pair of divs, centered in the window. One is a frame, the inner div is the image. Those divs are initially hidden and become visible via a javascript:
document.getElementById('frame').style.visibility="visible".
document.getElementById('print').style.visibility="visible".
They're sized and centered just right by the javascript but in the background it scrolls to the top of the page of thumbnails, so when closed, the user has to scroll down the page again to get back to where they were.
I've tried inserting the two divs in every conceivable place of the page, inside and outside the main page divs, top and bottom of the page... I've also tried relative, absolute and even sticky positioning without luck.
So I pursued scrolling the page when the divs are closed (hidden again) but that too is failing whether I use anchors or scrolling. In the script below, if the the alert is active, it shows the page scrolled to the correct position in the background. As soon as the alert is closed, it jumps back to the top of the page. 'pid' is the id of the targeted thumbnail.
function hideprint() {
document.getElementById('print').style.visibility="hidden";
document.getElementById('frame').style.visibility="hidden";
document.getElementById(pid).scrollIntoView();
// alert(pid);
}
I've also tried 'display' instead of 'visibility' with the same results.
How can I display these divs then get the page to stay or return to where it's been scrolled to when they're closed?
I'm using sweetalert modal dialog. It is positioned to center of screen as I understand. But when I use it inside `iframe element (by URL) it appears in the center of built-in document, and as result not seen in view area.
I've tried to use position: absolute style on modal, it has not obvious influence:
it is positioned as before, on the center of built-in document (why :\ ?)
it is 'ensured' to seen on the view area as following: if modal rect not intersected with view area rect at all, browser scrolls to the modal immediately. But if modal rect at some point intersects view area rect (for instance, just bottom side of modal dialog seen) browser's scroll stays at the previous position.
What is the reason of the jump to the dialog ? Is it absolute positioning or something else?
So I need an offsetBottom() jQuery function essentially. I have a fixed div that overlays the entire website, but I also have a div at the bottom of each page which contains the exact same content. My goal is to get the fixed overlay to disappear once the TOP of the div at the bottom of the page becomes visible, or is at the same height from the bottom as the overlay, even when the page is resized, then the overlay re-appears when the top of the div goes below the fixed div.
I am sorry I have no code example, I have been trying to use offsetTop() but the pages are of varying heights and it will only show/hide when the div reaches the very top of the web browser.
I need a small widget on a web page such that when the page loads in a maximized window, the element appears to be inline.
When the vertical scroll bar moves down, the element scrolls up until it hits the top visible line of the browser control. Thereafter if you scroll further down, this elements sticks at the top border of the browser.
In other words, if there is enough screen area and if it can be visible on the current window, it appears inline and the moment its inline position goes out of the visible window due to scroll, this elements sticks to the border it hit and stays there until the scroll brings its inline position back into the visible window.
I need to achieve this purely via CSS only - no javascript. Any idea how this could be done?
Thanks in advance for looking this post up.
You can make your view with position: fixed, so that it remains on the visible area.
.selector {
position: fixed;
/* rest required styling */
}