Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Check out the <a href="http://docs.jquery.com/Plugins/dimensions" rel="nofollow noreferrer">jQuery dimensions plugin</a> to find the correct position of an element.</p> <p><strong>EDIT:</strong> As mentioned in the comments, the dimensions plugin was merged into the core. Documentation can be found here: <a href="http://docs.jquery.com/CSS/offset" rel="nofollow noreferrer">offset</a> and here <a href="http://docs.jquery.com/CSS/position" rel="nofollow noreferrer">position</a>.</p> <p>The linked example could be extended like this: Replace the following code</p> <pre><code>var x = $("#Company_Name").position().left; var y = $("#Company_Name").position().top; $("p:last").text( "Full Name: left: " + x + ", top: " + y ); </code></pre> <p>with this:</p> <pre><code>var $companyname = $("#Company_Name"); var x = $companyname.position().left; var y = $companyname.position().top; var ax = $companyname.offset().left; var ay = $companyname.offset().top; $("p:last").text( "Full Name: left: " + x + "/" + ax + ", top: " + y + "/" + ay); </code></pre> <p>notice, I searched the element only once and stuffed it into a variable. That's a good idea if the search can take some time.</p> <p><strong>EDIT2:</strong> I just realized, that this does not work as I expected it. I wrote some function to calculate the relative position:</p> <pre><code>function toString(obj){ return "{top: " + obj.top + " left: " + obj.left + "}"; } function getRelativePosition(selector){ var $parentElem = $("#parentElem"); var $element = $(selector); var elementPosition = $element.position(); var parentPosition = $parentElem.position(); return {top: elementPosition.top - parentPosition.top, left: elementPosition.left - parentPosition.left}; } $(document).ready(function(){ var position = $("#Company_Name").position(); var relativePosition = getRelativePosition("#Company_Name"); $("p:last").text("position: " + toString(position) + " relativePosition: " + toString(relativePosition)); }); </code></pre> <p>Let me know if this works for you. And someone may tell me what the difference between position and offset in jQuery :-\</p> <p><strong>EDIT3:</strong> To get the position of more then one element, you could call the functions with different ids or give them all the same name or the same class to have something to select them all. Here is a working example:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function toString(obj){ return "{top: " + obj.top + " left: " + obj.left + "}"; } function getRelativePosition(selector){ var $parentElem = $("#parentElem"); var $element = $(selector); var elementPosition = $element.position(); var parentPosition = $parentElem.position(); return {top: elementPosition.top - parentPosition.top, left: elementPosition.left - parentPosition.left}; } $(document).ready(function(){ $(".cardfield").each(function(i){ var position = $(this).position(); var relativePosition = getRelativePosition(this); $("p:last").append("element: " + this.id + " position: " + toString(position) + " relativePosition: " + toString(relativePosition) + "&lt;br&gt;"); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;div id="parentElem" style="margin: 0px; top:10px; background-color: #ddd;"&gt; &lt;br&gt;&lt;br&gt; &lt;div class="cardfield" id="Company_Name1"&gt;Foo Bar&lt;/div&gt; &lt;br&gt; &lt;div class="cardfield" id="Company_Name2"&gt;Company Name&lt;/div&gt; &lt;div class="cardfield" id="firstname" style="float: right;"&gt;Tim&lt;/div&gt;&lt;br/&gt; &lt;div class="cardfield" id="lastname" style="float: right;"&gt;B&amp;uuml;the&lt;/div&gt; &lt;br&gt;&lt;br&gt; &lt;/div&gt; &lt;/p&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Note: I gave all fields the class "cardfield" and used the jQuery to select them. Then I used the <a href="http://docs.jquery.com/Each" rel="nofollow noreferrer">each</a> function to work with the elements. Inside the function I gave to each, "this" refers to the current object.</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