CODEWITHSUNDEEP
javascriptinternet-explorertimertimeout
Big_Bird
Big_Bird

Reputation: 427

Internet Explorer render issue (simple JS timer - window.setTimeout)

<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.

Upvotes: 0

Views: 837

Answers (2)

treecoder
treecoder

Reputation: 45091

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.

Upvotes: 1

jfriend00
jfriend00

Reputation: 707416

The first thing I see is that you shouldn't create the progress bar (or reference anything in the DOM) until the page has been loaded. IE is particularly sensitive to this. It looks to me like you're calling createProgressBar right when the javascript is loaded rather than after the page is loaded.

When I put your stuff into a jsFiddle and make sure that the code doesn't run until the page is loaded, it works for me in IE8.

See it here: http://jsfiddle.net/jfriend00/CQqat/

Upvotes: 1

Related Questions