Question

I’m using the following code to calculate the interval for decreasing the whole division over 60 seconds, if I remove 1px always:

function startTimer(remainingTime) {
    showProgressBar(true);

    maxWidth = ($('#time').width() - 4);
    progressIntervall = sessionTime / maxWidth * 1000;
    currentProgress = maxWidth * (remainingTime / sessionTime);

    $('#time .progress').width(currentProgress);
    window.setTimeout("decreaseTime()", progressIntervall);

    alert(maxWidth); // = 86
    window.setTimeout("alert($('#time').width());", 100); // = 396
}

function showProgressBar(bol) {
    if (bol) {
        $('#time').show();
        $('#time').removeClass("gray");
    } else 
        $('#time').hide();

}

HTML:

<div id="time" class="gray">
    <div class="progress" style="width: 100%;">&nbsp;</div>
</div>

CSS:

#time
{
    width: 90%;
    max-width: 400px;
}

The problem seems to be that after showProgressBar, the page needs some time to re-size the elements. maxWidth is 86 instead of 366 for example.

Any ideas how to solve this?

Answer 1

It would be best if you pass the rest of the effects as a callback to .hide and .show, perhaps like this:

function startTimer(remainingTime) {
    function restOfAnimation() {
        maxWidth = ($('#time').width() - 4);
        progressIntervall = sessionTime / maxWidth * 1000;
        currentProgress = maxWidth * (remainingTime / sessionTime);

        $('#time .progress').width(currentProgress);
        window.setTimeout("decreaseTime()", progressIntervall);

        alert(maxWidth); // = 86
        window.setTimeout("alert($('#time').width());", 100); // = 396
    }

    showProgressBar(true, restOfAnimation);
}

function showProgressBar(bol, callback) {
    if (bol) {
        $('#time').show(callback);
        $('#time').removeClass("gray");
    } else 
        $('#time').hide(callback);
}

The code above needs some improvement though (var is used nowhere, which is almost certainly a mistake; decreaseTimeout can be directly passed to setTimeout, etc).