Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>CSS/HTML method for overlay</strong></p> <p>If you want an overlay to cover another element or viewport it's doable by only using CSS/HTML which will be alot faster and also works on browsers where JavaScript is disabled.</p> <p><strong>CSS example</strong></p> <p>By using absolute positiion we can tell the browser to fill an entire container with a the overlay element, as long as the container element is relatively positioned:</p> <pre><code>#myPage { position: relative; } #myOverlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000; } #myOverlay.fixed { position: fixed; } </code></pre> <p><strong>HTML examples</strong></p> <p>To cover the <em>#myPage</em> element with the overlay (see on <a href="http://jsfiddle.net/uEmyP/1/" rel="nofollow">jsFiddle</a>):</p> <pre><code>&lt;div id="myPage"&gt; &lt;p&gt;This will be covered by the overlay&lt;/p&gt; &lt;div id="myOverlay"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>To cover the entire body, i.e. viewport, put the overlay element right before the closing tag of <code>body</code> and use fixed positioning (see on <a href="http://jsfiddle.net/uEmyP/" rel="nofollow">jsFiddle</a>):</p> <pre><code>&lt;body&gt; &lt;div id="myPage"&gt;&lt;/div&gt; &lt;div id="myOverlay" class="fixed"&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p><strong>JavaScript method to get entire document</strong></p> <p>To get the entire height of the document (even that what is outside of the viewport) you can use <a href="http://james.padolsey.com/javascript/get-document-height-cross-browser/" rel="nofollow">James Padolseys solution</a> which is very simple and works across all browsers:</p> <pre><code>$.getDocHeight = function(){ return Math.max( $(document).height(), $(window).height(), /* For opera: */ document.documentElement.clientHeight ); }; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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