Question

I have created an application in javascript where a user clicks a button to start a timer, presses a series of buttons and then clicks another button to stop the timer. The time each button is clicked is recorded in milliseconds and the values are collected in an array. This is all working fine.

The next part is where I am having trouble. I’d like to display the values of the array in a timeline. I have a script that gets the width of a div that is set to 100% wide. This width is different based on the resolution of the device that the user is using. What I need to do is create a formula that scales the millisecond values stored in my array to the appropriate values based on the width of my div.

For reference:
//Here's my array:
counterbArray = counterbString.split(", ");
counterbArrayL = [counterbArray.length];

//Getting width of div:
var timelinewidth = $("#timeline").width();

//Plotting the points as images:
for (i=1; i<(counterbArrayL); i++)
    {
    document.getElementById('timeline').innerHTML =     document.getElementById('timeline').innerHTML + "<img src='event.gif' width='16' height='15' class='plot' style='left:" + *each value from formula here* + "px' >";         
    }

Thanks!

Answer 1

You also need the variable containing the time when the user clicked stop.

var timeofstop = *****;

counterbArray = counterbString.split(", ");
counterbArrayL = [counterbArray.length];

//Getting width of div:
var timelinewidth = $("#timeline").width();

var currentleft;

//Plotting the points as images:
for (var i = 0; i < counterbArrayL; i++) {

    currentleft = Math.round((counterbArray[i] / timeofstop) * timelinewidth);

    document.getElementById('timeline').innerHTML = document.getElementById('timeline').innerHTML + "<img src='event.gif' width='16' height='15' class='plot' style='left:" + currentleft + "px' >";
}

You might also want to substract 8 from the currentleft if you want to center the image.