0

I'm looking to style an element a little differently only if said element in overflowing. I want to achive this by checking if the element is overflowing, and if so, applying a class to the element.

I'm not the best at Javascript/jQuery but I've managed to work out this snippet:

if ($(".quick-links").prop('scrollWidth') > $(".quick-links").width() ) {
  $( ".quick-links" ).addClass( "overflow" );
}

The above snippet works to some extent, however only if the page loads and the element is in an overflowed state, or vice-versa. It does not work on the fly if I decrease the browsers window width, which I would like it to do.

This is my HTML code just to give you an idea of what I'm working with:

<div class="quick-links">
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
    <div class="w-btn">
        <a href="#anchor-link">
            <span class="w-btn-label">Button Text</span>
        </a>
    </div>
</div>

Any help on making this work on the fly (so it works 'live' as the browser window is increased and decreased, and as the overflow is active and not active) would be appreciated!

Thank you in advance!

For others, here is the code with a resize event, as well as an else statement which removes the class overflow which does the trick for me:

$( window ).resize(function() {
  if ($(".quick-links").prop('scrollWidth') > $(".quick-links").width() ) {
  $( ".quick-links" ).addClass( "overflow" );
}
else{
    $( ".quick-links" ).removeClass( "overflow" )
}
});
kdurkink
  • 21
  • 5
  • 1) listen to browser [resize](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) event. 2) use @media queries 3) use `overflow:auto` so the browser does it for you - it's unclear what class "overflow" does, so possibly not an option. – freedomn-m Oct 20 '22 at 11:10
  • Here's a neat CSS only solution (again, depending on what your `overflow` class does and whether it fits in your solution): https://stackoverflow.com/a/34299947/2181514 – freedomn-m Oct 20 '22 at 11:17
  • Thanks for the link to the resize event @freedomn-m. I've managed to get it to work now! With the class .overflow I'm basically going to style the elements within the class a little different so it's more obvious they scroll left and right to mobile users, as well as increase the size so they are easier to tap. – kdurkink Oct 20 '22 at 12:20

0 Answers0