Search code examples
jqueryhtmlcssthymeleaf

Customize onscroll event

Suppose I have a presentation page, made with Thymeleaf, in which I have a table. This table has 5 column but in one of them I can have more than an element:

 <table id="table1" data-toggle="table" data-search="true">
  <thead>
    <tr>
      <th data-sortable="true">Code</th>
      <th data-sortable="true">Furnisher(s)</th>
      <th data-sortable="true">Description</th>
      <th data-sortable="true">Category</th>
      <th data-sortable="true">Quantity</th>              
    </tr>
  </thead>
  <tbody>
    <tr th:each="element : ${dto}">
      <td><span th:text="${dto.id}"></span></td>
    </tr>
    <td>
      <div class="furnisherList" onscroll="handleOnScroll(this)">
       <span th:each="supplier : *{dto.furnisherList}">
         <span th:text="${supplier.company_name}"></span>
         <br>
       </span>
      </div>
    </td>
    ...
    ... <!-- others column with at most 1 element -->
    ...
  </tbody>
 </table>

Class furnisherList has the follow css:

.furnisherList {
  overflow-y: auto;
  height: 12px;
}

When there is more than one elements the column appears as follows:

enter image description here

Where Magic is the first element of the list and the others are hidden (overflowed) below it.

Now I like this graphic, the table row must be thin and the scroll button are well positioned but I would like to customize the click event on the scroll button.

I want to open a curtain (like a dropdown menu) when user click on the scroll buttons (whatever it is, up or down).

For now, I write a simple JQuery function to read the elements inside furnisherList div:

function handleOnScroll(element) {
  $(element).find('span').each(function() {
    $(this).find('span').each(function() {
        alert($(this).text());
    });
  });
}

This works well except for the fact that, if I click (once) the scroll button, the function is firing (at least) twice!

I have tried with event.preventDefault(), $(element).stopScroll() but nothing works..

Can you help me??

I solved as Ggs says writing below code to the Thymeleaf page:

<div class="furnisherList">
  <span th:if="${#lists.size(dto.furnisher) > 1}">
    <select class="furnisherOptions">
      <option th:each="supplier : *{dto.furnisher}" th:text="${supplier.company_name}"></option>
    </select>
  </span>
  <span th:unless="${#lists.size(dto.furnisher) > 1}" th:each="supplier : *{dto.furnisher}">
    <span th:text="${supplier.company_name}"></span>
    <br>
  </span>
</div>

The furnisherList css:

.furnisherList {
  /* overflow-y: auto; */
  height: 12px;
}

The furnisherOptions css:

.furnisherOptions {
  color: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}

No need other JQuery function. Thanks all.

Solution

  • You should totally use a Select input :

    <div class="custom-select" style="width:200px;">
  <select id="select">
    <option value="0">Select car:</option>
    <option value="1">Audi</option>
    <option value="2">BMW</option>
    <option value="3">Citroen</option>
    <option value="4">Ford</option>
    <option value="5">Honda</option>
  </select>
</div>

    and a function Change function to catch the select changed:

    $( "#select" ).change(function() {
  alert( "Handler for .change() called." );
});