JQuery offset () method in CSS 3 multi-column

Question

There is a serious problem here: I'm working on an iOS application that should display an html page in a UIWebView through multiple columns using a layered CSS module.

I am adding the following CSS rule to the page to execute multi-column

padding: 0px; height: 850.000000px; -webkit-column-gap: 0px; -webkit-column-width: 620.000000px; 

Then I need to find the absolute position on the screen for some text on the page. The problem is that any call to the offset () method from jQuery works fine, EXCLUDES the one that is in 2-column text.

For example, for a sentence that starts at the end of column 3 and ends in column 4, I get an offset with the left value set in the 3rd column, but the top position is set to 0, as if it were in the 4th column .

How can I get the offset () value with the correct left and top values. I mean, if the left value is on the third column, I want the top value also to be at the bottom of the third column.

Again I have this problem when a sentence works in two columns at the same time (starting from the end of the third column and ending in the fourth column)

I really don't know if I will be clear here, but any help would be really awesome.

thanks in advance

Answer 1

I would try to preprocess the text to add a certain range around each first and last character of each sentence or paragraph, depending on your needs. Offset () shoud works to restore the starting and ending positions of your block. You would just have to figure out complex cases, such as sentences starting and ending in different columns.

Answer 2

This is how I decided to solve the problem. I have not tested it with a lot of content yet, but for a few test cases this worked for me. I actually had some elements that spanned 3 columns of CSS3 and therefore ended up with offset.top -800 when my screen height is only 460.

 $.fn.coffset = function() { var offset = $(this).offset(); if (offset.top < 0) { var winHeight = window.innerHeight; var winWidth = window.innerWidth; var numOfPagesOff = Math.ceil((-offset.top) / winHeight); offset.top += (winHeight * numOfPagesOff); offset.left -= (winWidth * numOfPagesOff); } return offset; }; 

Answer 3

This can be done easily by adding an empty element to the beginning of the element, then extracting the position, and then deleting the empty div.

 $(element).prepend('<div id="getposition"></div>'); var left = $('#getposition',element).offset().left; $('#getposition',element).remove();