Question

<script language="JavaScript" type="text/javascript">
    var theBar = createProgressBar(document.getElementById('progress-bar'));

    var value;
    function resetValue() {
        value = 0;
    }

    function showProgress() {
        value += 1;
        theBar.setValue(value);

        if (value < 100) {
            window.setTimeout(showProgress, 100);   
        }

    }
    window.onload=resetValue();showProgress();
</script>

—

<script language="JavaScript" type="text/javascript">
    function createProgressBar(elem) {
        var div1 = document.createElement('DIV');
        div1.className = 'progress-bar-background';
        div1.style.height = elem.offsetHeight + 'px';
        elem.appendChild(div1);

        var div2 = document.createElement('DIV');
        div2.className = 'progress-bar-complete';
        div2.style.height = elem.offsetHeight + 'px';
        div2.style.top = '-' + elem.offsetHeight + 'px';
        elem.appendChild(div2);

        return {
            div1 : div1,
            div2 : div2,
            setValue : function(v) {
                this.div2.style.width = v + '%';
            }
        }
    }
</script>

—

div.field input{
  height: 45px;
  width: 270px;
  font-size: 24px;
}

.progress-bar-background {
            background-color: #D0D0D0;
            width: 100%;
            position: relative;
            overflow:hidden;
            top: 0;
            left: 0;
        }
.progress-bar-complete {
    background-color: green;
    width: 50%;
    position: relative;
    overflow:hidden;
    top: -12px;
    left: 0;
}

#progress-bar {
    width: auto;
    height: 10px;;
    overflow:hidden;
    border: 0px black solid;
}

—

This snippet works perfectly under Chromer, Safari and FireFox.

The only issue is with Internet Explorer.

It seems to render as “half-full” and doesn`t execute anything.

Since I`m not that familiar with JS I have no clue what to start looking for.

Would appreciate some noob friendly advice.

Answer 1

change this…

window.onload=resetValue();showProgress();

to this…

window.onload = function() {
  createProgressBar();      
  resetValue();
  showProgress();
};

and you should be fine.

Remember…
“window.onload” is a property of the Window object … and the value of this property should be a function that will execute automatically once the browser has loaded the entire DOM AND all the content (images, css, js, etc.)

This a NOT a good place to execute your stuff however — you should use the event “onContentLoaded” but since it is not uniformly supported across browsers — you should use a JavaScript library such as jQuery or Prototype or MooTools instead.

BUT — of course if you’re new to JS — do NOT skim over it in order to get the pleasure of using these libs — first get the real taste of what JavaScript is and what it is like to juggle with the browser incompatibilities — only then you’ll be able to appreciate the full potential of these libraries.