How to find width of dynamically created li

Question

Initially have 5 buttons in div, and i have a code to create buttons dynamically see the code below..

My main question is after adding some more buttons. I have top and down arrow buttons to scroll the div.

I want to scroll one button or (set of buttons) on each click.

On each click now i am getting some portion of the button.

How can i get full button on each click with out considering how much width that dynamically created button have

This is my Html code snippet

<div class="tabbar-fix" style="width: 11.2%;height: 89%;position: fixed;">
    <div class=" row" style="height:5%;width:100%">
        <div id="top-button" class="scroller" onclick="scrollLeftAbc();"><i class="glyphicon glyphicon-chevron-up"></i></a></div>
    </div>
    <div class="row" style="height:90%;width:100%;">
        <nav class="navbar navbar-inverse" id="nav-id-scroll">
            <ul class="nav navbar-nav" id="navbar-buttons">
                <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                <li><a href="#about" data-toggle="tab">about</a></li>
                <li><a href="#services" data-toggle="tab">services</a></li>
                <li><a href="#contact" data-toggle="tab">contact</a></li>
                <li><a href="#contact" data-toggle="tab">contact</a></li>
                <li><a href="#services" data-toggle="tab">services</a></li>
            </ul>
        </nav>
    </div>
    <div id="down-button" class="row" style="height:5%;width:100%">
        <div class="scroller" onclick="scrollRightAbc();"><i class="glyphicon glyphicon-chevron-down"></i></a></div>
    </div>
</div>

My function to create dynamic button.....

function createButton() {
  var ul = document.getElementById("navbar-buttons");
  var li = document.createElement("li");
  var link = document.createElement("a");
  var name = document.getElementById("recipient-name").value;
  link.setAttribute("href", name);
  link.setAttribute("data-toggle", "tab");
  var textName = document.createTextNode(name);
  link.appendChild(textName);
  li.appendChild(link);
  ul.appendChild(li);
  // $(li).insertBefore("#lastIcon");
}

This is how i tried to scroll the button onclick ..

var test = 0;
function scrollToLeft() {
  test = document.querySelector("li").offsetWidth;
  console.log(test)
  document.getElementById('nav-id-scroll').scrollLeft += test;
}

function scrollToRight() {
  document.getElementById('nav-id-scroll').scrollLeft -= test;
}

score 0 · Answer 1 · answered Jun 07 '19 at 12:05

Let's assume you want to measure the width of last li or button (whatever you add), so here goes the code for same.

var button_width = $('#navbar-buttons > li:last-of-type').width();

Now, you may play with the value of button_width. Or you may use $.each to calculate the width of all buttons individually into an array.

How to find width of dynamically created li

1 Answers1