Databases
StackOverflow2013
Postsdbo
POShowing a hidden div and centering on screen
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShowing a hidden div and centering on screen
    text
    copied!<p><strong>Update</strong> </p> <p>I've just updated the jsFiddle so that you can see the "pop up" happening and how it's never centered. It's always 200px from top. </p> <p>So if the user has scrolled down a long page and clicked to make the pop up happen, the pop up is back up at the top of the page - 200px instead of centered on the visible screen.</p> <p><a href="http://jsfiddle.net/JYgcj/40/" rel="nofollow noreferrer">http://jsfiddle.net/JYgcj/40/</a></p> <p>I'll try out the answer below and update with results of that</p> <hr> <p>I have a hidden div included in my layout as a partial</p> <p>Here is the partial</p> <p>A javascript function shows this div for showing the result of ajax requests</p> <pre><code>function showResultPopUpDiv(divId, title) { var popUpId = document.getElementById(divId); var popUpHeader = title; var originalDivHTML; var topPos = 200; var popUpWidth; var midPos; var leftPos; var spinnerOpts; //Insert header text &amp; open pop up popUpId.style.display = "block"; document.getElementById("ajaxResultPopUpHeaderText").innerHTML = popUpHeader; //Set position dimensions popUpWidth = popUpId.offsetWidth / 2; midPos = $(document).width() / 2; leftPos = midPos - popUpWidth; //Position pop up (center) popUpId.style.top = topPos + "px"; popUpId.style.left = leftPos + "px"; //Insert spinning loader code here ... //left out for brevity } </code></pre> <p>If a view is longer than a single screen and the user has scrolled to the bottom and clicked the submit button, this div pops up but cannot be seen unless the user scrolls back to the top.</p> <p>How do I get this to center on the window correctly wherever the page is currently scrolled to.</p> <p><a href="https://stackoverflow.com/questions/9447180/centering-a-div-on-screen-even-when-the-page-is-scrollable">This question</a> and others that I've investigated have not solved this for me. Any ideas?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload