JS dynamic change divs width in loop

dynamically change css class with javascript
jquery change width of div dynamically
dynamically change css with javascript
javascript change width of div dynamically
dynamic css javascript
onclick change width of div jquery
javascript change css class property
how to change div background color dynamically using javascript

I want to create simple bar chart with animated bars (width from 0 to final size).

I started from css transitions but opera and chrome sometimes have problems.

Now I try to use mechanism what I saw here:

https://www.w3schools.com/w3css/w3css_progressbar.asp

using JS.

I have few "bar-areas":

  <div id="chart-bars">
    <div class="chart-bar-area">
        <div class="chart-bar" data-percent="80"  ></div>

    </div>

        <div class="chart-bar-area">
        <div class="chart-bar" data-percent="60"   ></div>
    </div>
  </div>

This is because value of i is out of scope of setInterval callback, setInterval takes only last value of iteration as it is a window method. So, you have to go with the closure or solution like this.

    var foo = document.querySelectorAll(".chart-bar");
    var width;
    var elem;
    var id;
    for (var i = 0; i < foo.length; i++) {

        var myElem = {
            x: i
        }

        width = 1;
        id = setInterval(function() {
            if (width >= foo[this.x].dataset.percent) {
                clearInterval(id);
            } else {
                width++;
                foo[this.x].style.width = width + '%';
            }
        }.bind(myElem), 10);//Here you are binding that setInterval should run on the myElem object context not window context

   }

How to set the width of a DIV element dynamically using jQuery, You can set the width of a <div> box dynamically using the jQuery width() method​. The width() method simply returns the element's width as unit-less pixel value. Also consider using a for loop instead of a do while loop. The convention for JavaScript variables is lowerCamelCase. So we should fix that as well. In your code, the divs were added to the array but not to the document. If you wanted to add them to the DOM, you would have to add document.body.appendChild. Your code would look more like this.

Congratulations! Today will learn what a "closure" is.

You are experiencing a scoping issue. The reason this only works for the last bar is because the frame function only sees elem as it currently exists on scope. That is to say, by the time your setInterval runs your loop will have ended and elem will be firmly set to what amounts to foo.children[foo.children.length - 1].children[0]

The way to fix this is by creating a new closure. That is to say, you "close" the variable in a scope.

var foo = document.getElementById('chart-bars');

for (var i = 0; i < foo.children.length; i++) {
  (function (elem, width) {
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= elem.dataset.percent) {
        clearInterval(id);
      } else {
        width++; 
        elem.style.width = width + '%'; 
      }
    }
  })(foo.children[i].children[0], 1)
}

now this, specifically, is a far from perfect way of accomplishing your goal, but I wrote it this way in order to preserve as much of your code as possible in an attempt to reduce the cognitive load for your specific example.

Essentially what I am doing is wrapping your code in an IIFE (Immediately Invoked Function Expression), which creates a new scope with your elem and width variables fixed to that function's scope.

A further step in the right direction would be to pull your frame function outside of the loop and have it only created once and have it accept as its arguments an elem, width, and id parameter, but I'll leave that as an exercise for the reader :-)

How to dynamically get the content width of a div using AngularJS , How to ignore loop in else condition using JavaScript ? How to use How to change style attribute of an element dynamically using JavaScript ? How to get the  I would like to create a javascript function that will change the width depending on the screen resolution. Change DIV width dynamically. Fendal (TechnicalUser) 9

why don't you use the specific jquery lybraries to create the charts like morrischart or chartjs, there are very simple and they work very well there are the documentations http://morrisjs.github.io/morris.js/ https://www.chartjs.org

How to change style attribute of an element dynamically using , Lower and Upper Bound Theory · Analysis of Loops · Solving Recurrences · Amortized How to use dynamic variable names in JavaScript ? Given an HTML document and the task is to change the style properties (CSS Example 2​: This example changing the color, background-color and width property of elements. Resize Divs Dynamically. We will use a few lines of JavaScript code to resize the div elements so that they share the same height on the page. The results we want to achieve are shown in the following figure. In this case, the sidebar div is resized to match the height of the main div.

Looks like a variable scope issue, could you try something like this :

var foo = document.getElementById('chart-bars');
for (var i = 0; i < foo.children.length; i++) {

   var elem = foo.children[i].children[0];
   elem.style.width = '1%';

   var id = setInterval(function() { frame(elem, id) }, 10);
}

function frame(elem, idInterval) {
   var width = parseInt(elem.style.width);
   if (width >= elem.dataset.percent) {
     clearInterval(idInterval);
   } else {
     width++; 
     elem.style.width = width + '%'; 
   }
}

Basically before you were erasing at each loop your previous elem, width, and id variables because they were declared outside the for loop. Hence the weird behavior.

Edit : putting the frame function outside so that it's clearer.

Edit2 : removing width from frame function as it is not needed.

Dynamic style - manipulating CSS with JavaScript, Changing Element Styles. At this point you should understand how to edit style sheets connected to the page and create  javascript,html,css,image I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in

Dynamically making font size change so it stays within the container , Dynamically making font size change so it stays within the container element? I found some examples on stack overflow, but they used jquery ( which I am <div id="el" style="font-size: 18px;width: 200px; border: 1px solid black; to true run a loop that decreases your font size by 1 on each iteration. Can anyone help me out to create a javascript? Let me explain, i have 2 divs . 1) left div width 85% 2) right div width 15%. so there is what i want to change width for left div. like, if i remove or hide right div, left div width should 100% dynamically with javascrpt.

HTML DOM Style width Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Hi, can you tell me how to dynamically create divs using jQuery. For example, how to make three divs inside body, so every next div will be removed from left 20px? Hi, can you tell me how to

element.querySelectorAll, Get the element with id="myDIV" (a div), then get all elements inside div with of child nodes that matches the specified selector, then you can loop through all  jQuery append() Method. The append() method will add elements one after the other. A new element is added at the end of the last element. This method is attached with the dynamically created DIV elements, which serves as a container. $(container).append() $(divSubmit).append()

Comments
  • Because I dont have control on all aspects. I was trying implement chart JS and i have problem with clicable labels, wraping labels, tooltip customisation, mobile RWD etc