Databases
StackOverflow2013
Postsdbo
POI can't access the visual location of an element with JS
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI can't access the visual location of an element with JS
    primarykey
    data
    text
    <p>I have a multi-column layout in a UIWebview (webkit control) but I'm having problems accessing the 'visual' location of an element. </p> <p>I shift tapX by 4096 (4 x 1024, where 1024 is the height of a 'columnated page'), and get the correct 'tapped' element, but I cannot tell whether I'm at the edge or in the middle of the element. I need the absolute top and left positions, so I can animate a layer effect over the top of the element using a rect of (e.left, e.top, width, height) - obtaining the correct e.left and e.top is proving tricky.</p> <p><code>tapElement.offsetTop</code> ignores the column layout and the transform does not appear to work.</p> <pre class="lang-js prettyprint-override"><code>var tapElement = document.elementFromPoint(tapX, tapY); if (!tapElement) return; var realLeft = window.getComputedStyle(tapElement).getPropertyValue("offsetLeft"); var realTop = window.getComputedStyle(tapElement).getPropertyValue("offsetTop"); </code></pre> <hr> <p>Solution:</p> <pre><code>// Figuring out the real top and left positions is difficult // under the CSS3 multi column layout... But this works :) /* // jQuery method var realLeft = $(tapElement).offset().left; var realTop = $(tapElement).offset().top; */ // DOM method var box = tapElement.getBoundingClientRect(); var doc = tapElement.ownerDocument; var docElem = doc.documentElement; var body = doc.body; var win = window; var clientTop = docElem.clientTop || body.clientTop || 0; var clientLeft = docElem.clientLeft || body.clientLeft || 0; var scrollTop = win.pageYOffset || docElem.scrollTop || body.scrollTop; var scrollLeft = win.pageXOffset || docElem.scrollLeft || body.scrollLeft; var realTop = box.top + scrollTop - clientTop; var realLeft = box.left + scrollLeft - clientLeft; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTylerH
    1. USMatt Melton
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POI can't access the visual location of an element with JS
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POI can't access the visual location of an element with JS
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POI can't access the visual location of an element with JS
      1. USŁukasz Sromek
      1. VTFavorite
    1. COI am in a very similar situation. It seems to work really good for most cases BUT, when a paragraph starts on one column and ends on another this method returns 0. Do you have any ideas on how to fix that?
      singulars
      1. POI can't access the visual location of an element with JS
      1. USpIkEL
    2. COi've only tried the above with a div not a paragraph. does the containing div have size and width constraints? try stepping through the above OR statements.
      singulars
      1. POI can't access the visual location of an element with JS
      1. USMatt Melton
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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