Note that there are some explanatory texts on larger screens.

plurals
  1. POInternet Explorer render issue (simple JS timer - window.setTimeout)
    primarykey
    data
    text
    <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt; var theBar = createProgressBar(document.getElementById('progress-bar')); var value; function resetValue() { value = 0; } function showProgress() { value += 1; theBar.setValue(value); if (value &lt; 100) { window.setTimeout(showProgress, 100); } } window.onload=resetValue();showProgress(); &lt;/script&gt; </code></pre> <p>--</p> <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt; 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 + '%'; } } } &lt;/script&gt; </code></pre> <p>--</p> <pre><code>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; } </code></pre> <p>--</p> <p>This snippet works perfectly under Chromer, Safari and FireFox.</p> <p>The only issue is with Internet Explorer.</p> <p>It seems to render as "half-full" and doesn`t execute anything.</p> <p>Since I`m not that familiar with JS I have no clue what to start looking for.</p> <p>Would appreciate some noob friendly advice.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload