Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 multi-column position of an element

CSS3 multi-column position of an element

Problem

I have a multi-Column Layout in a UIWebview (webkit control) but I'm having problems accessing the 'visual' location of an Element.

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.

tapElement.offsetTop ignores the column layout and the transform does not appear to work.

var tapElement  = document.elementFromPoint(tapX, tapY);

if (!tapElement)
    return;   

var realLeft    = window.getComputedStyle(tapElement).getPropertyValue("offsetLeft");
var realTop     = window.getComputedStyle(tapElement).getPropertyValue("offsetTop");

Any help is greatly appreciated.


Solution:

// 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;   
Problem courtesy of: Matt Melton

Solution

You could try the JQuery method "offset". Here is the documentation for it. http://api.jquery.com/offset/

If you can't use JQuery directly, examining the code may help solve your problem. (Grab the debug version for that.)

Solution courtesy of: John Fisher

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 multi-column position of an element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×