Forecast the width of an element using JavaScript

Question

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups.

The challenge is that the width of the container holding the tabs can change dynamically, the number of tabs can vary, and each tab has a different width.

Could a JavaScript function be created to determine how many tabs could fit on a single row within the container? It would also be helpful to know the total width of all rendered tabs.

By utilizing this function, I could calculate the maximum number of tabs to display on the page and then separate any additional tabs into another group.

javascript html css

Answer 1

Answer №1

It seems like a clever idea to insert the tabs into the container, retrieve their sizes, and then remove them from the DOM before the next render event occurs. This method allows for calculating the sizes of the upcoming tabs to organize them into groups.

For a quick demonstration, here's an example: https://jsfiddle.net/fqkx9krs/

The HTML Structure:

<!-- Usually tab list is generated with JSX, but for this simple demo, we extract it from here -->
<ul class="tabs-list hidden" id="tabs">
    <li>Tab 1</li>
    <li>This is Tab 2</li>
    <li>And this Tab 3</li>
</ul>


<br>
<br>
<br>

<div class="tabs" id="container"></div>

The CSS Styling:

.tabs {
  width: 200px;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  background-color: blue;
  padding: 3px;
  color: white;
  border: 1px solid black;
}

.hidden {
 visibility: hidden;
}

The JavaScript Logic:

function calculateElementSizes() {
  var tabs = document.getElementById("tabs");
  var container = document.getElementById("container");

  container.appendChild(tabs);

  var lis = tabs.childNodes;

  lis.forEach(elem => {
    if (elem.getBoundingClientRect) {
        console.log(elem.getBoundingClientRect().width);
    }
  });

  tabs.parentNode.removeChild(tabs);
}

setTimeout(calculateElementSizes, 1000);

Answer 2

It seems like a clever idea to insert the tabs into the container, retrieve their sizes, and then remove them from the DOM before the next render event occurs. This method allows for calculating the sizes of the upcoming tabs to organize them into groups.

For a quick demonstration, here's an example: https://jsfiddle.net/fqkx9krs/

The HTML Structure:

<!-- Usually tab list is generated with JSX, but for this simple demo, we extract it from here -->
<ul class="tabs-list hidden" id="tabs">
    <li>Tab 1</li>
    <li>This is Tab 2</li>
    <li>And this Tab 3</li>
</ul>


<br>
<br>
<br>

<div class="tabs" id="container"></div>

The CSS Styling:

.tabs {
  width: 200px;
  background-color: grey;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  background-color: blue;
  padding: 3px;
  color: white;
  border: 1px solid black;
}

.hidden {
 visibility: hidden;
}

The JavaScript Logic:

function calculateElementSizes() {
  var tabs = document.getElementById("tabs");
  var container = document.getElementById("container");

  container.appendChild(tabs);

  var lis = tabs.childNodes;

  lis.forEach(elem => {
    if (elem.getBoundingClientRect) {
        console.log(elem.getBoundingClientRect().width);
    }
  });

  tabs.parentNode.removeChild(tabs);
}

setTimeout(calculateElementSizes, 1000);

Answer 3

Answer №2

Perhaps this is the solution you've been seeking

Check out the carouFredSel plugin

Visit the GitHub page here

To see a demo in action, click on this link Demo Page

Answer 4

Perhaps this is the solution you've been seeking

Check out the carouFredSel plugin

Visit the GitHub page here

To see a demo in action, click on this link Demo Page

Forecast the width of an element using JavaScript

Answer №1

Answer №2

Similar questions

Refreshing Data on Vuetify Range Slider

Automatically navigate through form fields using jQuery when pasting data

In JavaScript, you can update the class named "active" to become the active attribute for a link

python using selenium to bypass javascript popups

Issue with the message deletion feature in discord.js

Selenium's click() method in Python seems to experience issues when used within a script, but functions properly when used through

retrieve the most recent file following a $group operation

How to access nested JSON elements in Javascript without relying on the eval function

Prevent a JavaScript file from resetting when a user refreshes the page

The z-index property seems to be malfunctioning when used in conjunction with the relative and absolute positioning

If a second instance is hidden, SVG will appear as a mysterious black box

Transitioning away from bundled Javascript for local debugging

Always ensure that only one div is visible at a time

Issues with the functionality of jQuery event functions

Tips on altering the h2 color when hovering using h2:hover:after

A guide on efficiently incorporating a php variable into json format, then transferring it to ajax

Implementing a unique sorting algorithm for an array of numbers in Angular

Can you provide instructions on how to insert a hyperlink onto a background image?

Removing data with the click of a button

background image alteration when scrolling