Execute JavaScript when elements doesn't fit container anymore

Question

I'm creating a web application that should be responsive. In order to visualize it a bit more, I'm currently recreating the OfficeUI ribbon as Microsoft use in their products, but then for web applications.

In the ribbon, when you have all the tabs on the screen, you see something like:

Now, when you resize the window so that all the tabs aren't visible anymore, you see the following:

You can clearly see the difference, it's a button on the right side for navigating over all the various tabs.

Now, the button will be always placed on the website, but just hidden, and through some JavaScript function, I'll make it visible.

But right now, how need to know at which point I need to make the button visible.

Assume the following simple unordered list:

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
<ul>

All the LI elements are placed next to eachother, just as in the provided images, and if I resize the window to a width that all the LI elements doesn't fit the container, then the next element is pushed down. I know this can be solved with overflow and white-space but that isn't the question here.

I need a JavaScript function to execute a function only and only when the 6 LI elements doesn't fit their container anymore.

Here's a fiddle to give it a try.

I hope that anyone can give me some guidance.

Answer 1

You can test this by checking if the list's scrollWidth is larger than its offsetWidth.

See https://jsfiddle.net/maryisdead/bfrzuaoy/ or the example below (test in full page mode).

(function ($)
{
    var list = $('ul')[0];
    
    $(window).on('resize', function(e)
    {
        if (list.offsetWidth < list.scrollWidth)
        {
           $('p').text('items hidden');
        }
        else
        {
            $('p').text('all items visible');
        }
    });
}(jQuery));

ul
{
    border: 1px solid;
    margin: 0px;
    list-style: none;
    overflow: hidden;
    padding: 0px;
    white-space: nowrap;
}

li
{
    border: 1px solid #d4d4d4;
    display: inline-block; 
    min-width: 100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
    <li>Tab 6</li>
</ul>
<p></p>

Answer 2

(function ($) {
    $(window).on('resize', function(e) {
        var window_width = $(window).width();
        var tabsWidth = 0;
        $('li').each(function() {
           tabsWidth += $(this).width()*1;
        });

        if (tabsWidth > window_width) {
         // alert('do something');           
        }
    });
}(jQuery));

Check Fiddle https://jsfiddle.net/hhtjrL59/1/

Answer 3

A very simple version: get the total width of the <ul> element on page load, save it to a variable and then compare on page re-size:

w = $('ul').width();

$(window).on('resize', function(e) {
  var newW = $(window).width();
  if (newW <= w) {
    alert('code time');
  }
});

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
li {
  display: inline-block;
  min-width: 100px;
  border: 1px solid #d4d4d4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
  <ul>

Answer 4

With media queries: use JS to measure the <li>s and generate the media query:

https://jsfiddle.net/hhtjrL59/3/

width = null

$(document).ready(function() {
    $("li").each(function(idx, li) {
        width += $(li).width()
    });

});

document.querySelector('style').textContent +=
     "@media screen and (max-width:" + width + "px) { #holder { background-color: red; }}"

Working on this HTML:

<ul id="holder">
    <li>Tab 1 f</li>
    <li>Tab 2 ghe</li>
    <li>Tab 3 fds</li>
    <li>Tab 4 wr</li>
    <li>Tab 5 wer3</li>
    <li>Tab 6 3r</li>
<ul>