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?
Related
I have a situation where when child scroll reaches bottom parent scroll takes over and starts scrolling the whole screen.
Basicall I have normal icon page with a horizontal bar at top. When user clicks on top bar a div slid downs showing the list of items covering whole screen except top bar. Because this list is loner than the screen height I have allowed vertical scrolling in div. Now the problem is when the user is scrolling inside div and reaches the bottom of the list, the background page starts scrolling up.
What I want is, inside the div scrolling should not scroll the background/parent page when user reaches bottom of the list.
code sample (in browser you will need to move mouse a bit after reaching bottom)
https://stackblitz.com/edit/ionic-forum-5-jhl2pw
Thanks
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 have a fixed header which has a button (menu icon) on it. Whenever I scroll down the header will show (as it’s fixed). When I click on the menu button the menu is then also in a fixed position on the right hand side. When I scroll down both header and menu show which is fine. THE PROBLEM is when I initially scroll down half way down the page AND THEN click on the menu button the menu (div) is at the top-when I scroll a bit then it displays. There's a delay in this. Do you know how I can get the menu to display regardless of where I am on the page (in terms of y position)????
Top is set as 100px for the menu in a class (as the headers height is 100px-so i want the menu to show under it) BUT obviously if I’m already half way down the page the menu still takes into account the top: 100px however, I want it to change because I’ve scrolled down so the top position value would be different.
Any help??
Taking a shot in the dark, I think your problem is where your fixed position checks are taking place - I.E, I'm guessing they're within the .scroll event of the window.
Before you scroll down, and you click on the menu button, it is set to display block in its initial position - which is correct, because you haven't scrolled down yet.
However, if you scroll down first, then display the menu - it's still going to display in it's initial position - because the check is in your .scroll event - which you haven't fired while the menu has been open.
Try applying the position check in the button logic too.
My page consists of multiple divs in which the page's content is displayed. Exactly one of these divs is visible at any given time (chosen by select box and hidden/shown in javascript). One of these divs is much taller than the others and it is not the one that appears by default.
Usually the fancybox appears in the center of the page as intended. However, when the tall div is the one currently displayed, a fancybox appears near the bottom of the page. The problem gets worse as the tall div gets taller.
I have tried $.fancybox.center(true); but it had no effect.
I would like to have the fancybox appear in the center of the screen in all cases, but fancybox does not seem to properly interpret the changing height of the page.
Thanks in advance.
I've got an off-canvas menu, and it's working very well for my Mobile layout.
However, when I expand the menu item to show the submenus under it, the whole page can scroll horizontally. Not so perfect.
I'm just controlling the class name to display: block.
http://dev.martinilab.com/so1/index.html
I'm not sure what is causing the problem.
The problem is that you don't have a height set on .row, so it's as tall as the content forces it to be. When you display:block that class and cause those menu items to be displayed, it forces the content further down, and since the page is as tall as the content, the page gets longer.
If you want to fix it, either set a height for that class or take those menu items out of the document flow so it doesn't push the content down.