0

I'm doing an exercise and I'm having some trouble. The objective: a progress bar that shows how much of the posts the user read so far.

The problem: it starts awesome but sometimes it goes till 84%, sometimes till 100%.

JS

let scroll = getClass('scroll')[0];


function checkVisible(elm) {
 let rect = elm.getBoundingClientRect();
 let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
 return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

scroll.onscroll = function() {
 let maxId = 0;
 for(let a in json){
    maxId++;
}
let fractionOfProgress = (100/(maxId - 2)) ;    // since counts from the top, the maximum is the 18 
  for (let i = divRow.length - 1; i >= 0; i--) {
    if (checkVisible(divRow[i])) {
        progressBar.value = (divRow[i].id * fractionOfProgress);
        muchRead.innerHTML = ((divRow[i].id * fractionOfProgress) )+ "%" ;

        muchRead.style.left =  divRow[i].id * 6.8 + "px";
    }
  }

};

HTML

<div class="progress">
    <progress id="progressBar" max="100" value="0"></progress>
    <span id="muchRead"></span>
</div>

<div class="scroll">
    <div class="scroll-area"></div>
</div>

I don't think the CSS matters in this question...

PS: I don't want to use Jquery, only native JS

image of the bug showing up

EDIT:

  const json = [
        {
            "id":1,
            "title": "Lorem Ipsum is simply - 1",
            "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
            "image": "assets/item.jpg"
        },
        {
            "id":2,
            "title": "Lorem Ipsum is simply - 2",
            "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
            "image": "assets/item.jpg"
        },....
Leyb
  • 1
  • 5
  • `for(let a in json){ maxId++; }` can be just be `var maxId = Object.keys(json).length;` – epascarello Jul 13 '16 at 16:41
  • Shouldn't you be computing progress basing on current window scrolling position: http://stackoverflow.com/questions/2481350/how-to-get-scrollbar-position-with-javascript – csharpfolk Jul 13 '16 at 16:53
  • @csharpfolk I've put the json, it goes for 20 items. Also, I'm doing the progress bar for the response of the json, not on the whole window. – Leyb Jul 13 '16 at 17:01
  • @epascarello thx, u r right.. – Leyb Jul 13 '16 at 17:01
  • @Leyb thanks now I better understand your problem. Honestly I have no idea what may be wrong, you may use Chrome Dev Tools and put a breakpoint using `debugger` keyword inside of your `for` loop to check from these values come from... – csharpfolk Jul 13 '16 at 17:11

0 Answers0