Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>If you're using a JavaScript framework, like jQuery, most of this is rather easy.</p> <p>If you're not familiar with any js frameworks, I'd prioritize learning one. They (jQuery, at least) do not force you to use any of their constructs, so including the framework (simply calling the jquery library) is unlikely to interfere with any js you've already written.</p> <p>The following code is also viewable and demonstrated at <a href="http://jsfiddle.net/Z6VkD/" rel="nofollow">http://jsfiddle.net/Z6VkD/</a>:</p> <p>HTML: </p> <pre><code>&lt;div id="tester"&gt;&lt;/div&gt; </code></pre> <p>JavaScript (jQuery):</p> <pre><code>var bodyPositioning = $("body").css("position"); var bodyMargin = $("body").css("margin-left"); $("#tester").append("&lt;p&gt;body positioning: &lt;b&gt;"+bodyPositioning+"&lt;/b&gt;&lt;/p&gt;" ); $("#tester").append("&lt;p&gt;body margin-left:&lt;b&gt;"+bodyMargin+"&lt;/b&gt;&lt;/p&gt;"); </code></pre> <p>CSS:</p> <pre><code>body{position:relative;margin-left:100px;} #tester{height:100px;width:300px;border:3px solid green;} </code></pre> <p>You can't directly calculate the body offset from the viewport (w/jQuery), but grabbing the margin values should work, since there is no container for body. BTW, For offsets from parent containers, you can use the jQuery .offset() method (see <a href="http://api.jquery.com/offset/" rel="nofollow">.offset() - jQuery API</a>)</p> <p>Anyway, I would recommend against placing margins on your body, and create a wrapper for everything inside of the body and add margins to that element instead. This way you can apply background styles on body that will cover the whole viewport width, if desired.</p>
 

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