0

I have a navbar containing a ul which contains 30 li elements (of varying size that I can't predict).

These 30 li elements normally fit nicely on the page when it's full size, but when it's shrunk past about 800px they start disappearing (because there's no room for them and I've deliberately set overflow:hidden on my ul so that they don't spill onto a new line).

The only thing I need to do now is to detect when an "overflow event" has happened so that I can append some text to the end of the navbar line saying something like "more", or "..." (i.e. just something to indicate there's missing li elements because the page is too small)

Perhaps I'm going about this the wrong way, but I simply want a mechanism for programatically determining whether the li elements in my ul have overflowed - possible?

d3wannabe
  • 1,207
  • 2
  • 19
  • 39
  • 2
    http://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow This might help you? – fnune Dec 15 '15 at 21:28
  • I would simply add `overflow-y: scroll` to your CSS and the content will be scrollable when and if there's too much of it. Or better yet, refactor your navbar so that thirty `li` elements (an unwieldy number to be sure) are no longer listed in the navigation. – Blazemonger Dec 15 '15 at 21:29
  • awesome, thanks both - Fausto, didn't see that post but it seems like the topic's well covered there – d3wannabe Dec 15 '15 at 21:32
  • You're welcome. Good luck. – fnune Dec 15 '15 at 21:34
  • 1
    No JavaScript, pure CSS: http://dabblet.com/gist/2462915 or http://lea.verou.me/2012/04/background-attachment-local/ – I use this on some of my projects. – RWAM Dec 15 '15 at 21:38

0 Answers0