Develop Reference

Scrolling to a target after a div is hidden

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?

how to scroll only a particular area of the page instead of complete page using selenium/selenide

I have a web page which contains different frames e.g left frame, top frame and middle frame. The middle frame contains a list of files which can be scrolled.
I want to scroll that frame page by page till end. How can I do it in selenium or selenide?
Following JS code i have already tried.
jse.executeScript("window.scrollBy(0,250)", "");
jse.executeScript("arguments[0].scrollIntoView();", element);

I have a tall page with a modal that is displayed within a very tall iframe. How can I position the modal so that it is on screen?

I'm using the Bootstrap modal on many buttons on the page. If I scroll down the page and click a button, naturally the modal will open visibly at the top of the window (not the document). All is well.
However, I want to be able to support the same functionality within very tall iframes. Let's say an iframe is 1000px tall. If I scroll down the top level document to say, halfway down the iframe, but I did not scroll the contents of the iframe at all, I'm running into an issue. If I click a button, the javascript thinks no scrolling has been done, and renders the modal at the top of the iframe document. Thus the modal is not on screen (I have to scroll the top-level document up in order to see it).
Assuming that the parent window and iframe contents are on different domains (so same origin policy applies), is there any way for me to detect where to position the modal so that it's always viewable without scrolling the parent or iframe documents?

You can use this code snippet. Modal will we shown 60px bellow the top edge of user's viewport. And if content of modal is taller, than user's screen he will be able just to scroll the page to see it. But modal should have position: absolute
$("#showPopup").click(function() {
var posX = 60 + $(window).scrollTop();
$("#popupToShow")
.css({top: posX} )
.fadeIn(150);
});

how to stop a fixed input at the top of a page from making the ipad browser scroll up on focus

I have a responsive site where the top navigation is fixed so as you scroll down the age the header stay at the top edge of the browser. In the header is a search input. On iphones and ipads, when the user taps in to the field the page scroll to the top.
I want to stop this because say the user decides not to search and taps out of the search field, they should bee where they left off versus at the top of the page.
I have found articles about using overflows on scrollable divs, but this is not the case this is just a plain page. I have anchor book marks that allows the user to go to sections of the page, and lots of home page content. I want the user to be able to drag their way down the page, or click on an anchor. Then have the ability to click the search and not have the page zip to the top.
How would I go about this with javascript I have tried preventDefault on focus of the field with no luck.
Any help is greatly appreciated.
Thanks
Jeff

Iframe integration issue

I need to make the iframe not take over the main focus of the scrolling withing the page. I need to be able to scroll the page entirely to the bottom even though the cursor hovers over the i frame.
http://gyazo.com/e11d47e10b2d5a8b9769ae64609721e5
I need to make it so that the parent page gets to bottom before the iframe starts scrolling so it won't show only half of the iframe.
I have access to the iframe contents aswell.
http://jsbin.com/rifipezeyi/1/edit?html,css,js,output