1

My site has numerous horizontal lists of words. If the row has too many words to display in one row, it needs to display an "expand" button. Right now I determine if the row is full by adding up the estimated widths of the letters, but I am wondering if there is a simpler way to do this. Is there any way using javascript or any library (especially YUI or jQuery) to determine if an element has overflow?

michaelAdam
  • 1,119
  • 14
  • 30

1 Answers1

6

I assume you're referring to the overflow css property of DOM nodes. In that case you could compare the scrollWidth as opposed to the clientWidth.

Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

Community
  • 1
  • 1
codedigger
  • 144
  • 3
  • 2
    In most cases, detecting overflow should be done comparing `clientHeight` and `scrollHeight` rather than width. – JCOC611 Apr 01 '14 at 03:18
  • Thanks for your comment, but out of curiosity, what if the content doesn't overflow on the height? I believe the question referred to widths... – codedigger Apr 01 '14 at 03:20
  • I guess it depends on the CSS implementation, but if the OP is using `float:left` or something similar the content will overflow vertically not horizontally...so why not check *both*? – JCOC611 Apr 01 '14 at 03:25
  • scroll-height only tells me if I have elements out of view if the container has overflow:scroll, correct? I don't want to scroll in the container, I want to know if there are elements that are hidden because they do not fit. As far as I can tell, scrollHeight = clientHeight if there is no scrollbar. – michaelAdam Apr 04 '14 at 00:09
  • Nevermind, I realized that they appeared to be equal because I was only checking before I added the element that made them not equal. I'm able to do exactly what I want to do now. Thanks! – michaelAdam Apr 04 '14 at 00:27