Question

I am having trouble with setTimeout(), I guess.

You can visit my webpage to see where I am at: http://verbum.xtrweb/soon.php

The problem is that i have 2 text fields.

1. “Verbum” with id="Verbum"
2. “Forget about single searches” with id="forget"

I want to apply a fade in effect after the tiny dictionaries fall (please see my site link above so you understand). I have changed the function’s name and variables too, but the only thing that happens is that only one of the texts fades in, and it depends on the order of which one is below the other. The one that does not fade in does not even appear. Hope you understood and find and anwser. Thanks.

<script type="text/javascript">
  var opac = 0.0;
  var alpha = 0;

  function init() {
    var elem = document.getElementById("Verbum");
    elem.style.display = 'inline';
    elem.style.filter = "alpha(opacity = " + alpha + ")";
    elem.style.opacity = opac;

    setTimeout("fadein()", 8500);
  }

  function fadein() {
    var elem = document.getElementById("Verbum");

    opac = opac + 0.1;
    alpha = parseInt(opac * 100);
    elem.style.opacity = opac;
    elem.style.filter = "alpha(opacity = " + alpha + ")";

    if (opac < 1.0) {
      //Change the 50 to adjust the speed. The higher the number, the slower the fade
      setTimeout("fadein()", 30);
    }

  }
  window.onload=init;
</script>

Here is the second <script> block:

<script type="text/javascript">
  var opac = 0.0;
  var alpha = 0;

  function init() {
    var eleme = document.getElementById("forget");
    eleme.style.display = 'inline';
    eleme.style.filter = "alpha(opacity = " + alpha + ")";
    eleme.style.opacity = opac;

    setTimeout("fadein()", 7500);
  }

  function fadein() {
    var eleme = document.getElementById("forget");

    opac = opac + 0.1;
    alpha = parseInt(opac * 100);
    eleme.style.opacity = opac;
    eleme.style.filter = "alpha(opacity = " + alpha + ")";

    if (opac < 1.0) {
      // Change the 50 to adjust the speed. The higher the number, the slower the fade
      setTimeout("fadein()", 30);
    }

  }

  window.onload = init;
</script>

Answer 1

The problem is you can only assign one function to window.onload as a time. The last one will always take precedence over the first ones.

Instead of using window.onload, you can use window.addEventListener to tell the browser to run your code when the page loads. You can use it like this.

window.addEventListener('load', function(){
    var eleme = document.getElementById("forget");
    eleme.style.display = 'inline';
    eleme.style.filter = "alpha(opacity = " + alpha + ")";
    eleme.style.opacity = opac;

    setTimeout("fadein()", 7500);
}, false);

You will need to copy and paste this twice, one for “forget” and one for “Verbum”.

Also, I’d suggest changing the names of your fadein functions, or pass the element to be faded as an argument. Otherwise your code will simply run the last fadein function and either “forget” or “Verbum” will work correctly, and the other will not.