Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JS: Detecting wrapped inline elements?

I have a indefinite amount of in-line elements being output. Now, depending on browser width, some elements will, of course, wrap to a new line. Is it possible to detect and single out these rows of elements or does the dom just see it as one large line?

Thanks for the help!!

EDIT: Trying to detect wrapped elements via offset height(Thanks Matchu). Wrapped elements output same values(total height of the element) as those found on the first row though. Any reason why?

$('#content').children().each(function() {
       alert($(this)[0].offsetHeight); 
    });
like image 211
user239237 Avatar asked Feb 11 '10 14:02

user239237


2 Answers

You can check the offsetHeight property of the elements and watch for it to jump. When an inline element has a greater offsetHeight than the previous element, this element is on a new line.

like image 199
Matchu Avatar answered Sep 22 '22 01:09

Matchu


element.getClientRects() when done on an inline element that is wrapped will return an array, with an rect object for each line. Bowser support is limited.

like image 22
NICKO Avatar answered Sep 18 '22 01:09

NICKO