# DIV-Container einblenden nach 5 Sekunden



## Alice (29. April 2012)

Hallo Zusammen. 

Ich möchte gerne einen DIV-Container nach 5 Sekunden einblenden lassen, aber die Zeit soll erst runtergezählt werden, wenn der Submit-Button ausgelöst wurde.

Ich habe hier einen JS-Code Schnipsel der einen "Bitte warten!" DIV-Container einblendet, sobald der User auf den Submit-Button klickt. Vielleicht kann mir ja hier jemand helfen diesen Code etwas zu erweitern, wenn überhaupt möglich?


```
var submitted = false;
   function doSubmit() {
      if (! submitted) {
          submitted = true;
          ProgressImg = document.getElementById('loader_img');
          document.getElementById("loader").style.visibility = "visible";
          setTimeout("ProgressImg.src = ProgressImg.src",100);        
          return true;
      }
         else 
      {
         return false;
      }
   }
```

User klickt auf den Submit-Button -> "Bitte warten!" wird eingeblendet -> nach 5 Sekunden soll ein weiterer DIV-Container aktiviert werden

Danke im Vorraus.


----------



## SpiceLab (29. April 2012)

Laß mich raten: dieser JS-Code stammt nicht aus deiner Feder, weshalb du damit nichts anzufangen weißt.


----------



## Alice (29. April 2012)

Ja richtig. Ich habe ihn nur etwas angepasst.

Ich finde JS richtig schwer.


----------



## Parantatatam (29. April 2012)

```
window.addEventListener('DOMContentLoaded', function ()
{
  document.getElementById('id deines submit buttons').addEventListener('click', function ()
  {
    setTimeout(function ()
    {
      document.getElementById('id deiner anzuzeigenden div box').style.display = 'block';
    }, 5000);
  }, false);
}, false);
```


----------



## Alice (30. April 2012)

Hallo. 

Ich habe es zwar etwas anders gemacht aber trotzdem Danke für deine Antwort. Schön das es noch User gibt, die einfach nur helfen wollen...


```
var submitted = false;
   function doSubmit() {
      if (! submitted) {
          submitted = true;
          ProgressImg = document.getElementById('loader_img');
          document.getElementById("loader").style.visibility = "visible";
          setTimeout("ProgressImg.src = ProgressImg.src",100); 
          window.setTimeout("Hinweis()", 6000); // Neue Funktion      
          return true;
      }
         else 
      {
         return false;
      }
   }
// Funktion zum einblenden des DIV-Containers
   function Hinweis () {
      document.getElementById("wait").style.display='block';
   }
```

*Edit:*

Ich möchte das ganze doch lieber etwas anders umsetzen. Habe dazu aber noch ein paar Fragen.

Dieser Code macht folgendes:

```
var submitted = false;
   function doSubmit() {
      if (!submitted) {
          submitted = true;
          ProgressImg = document.getElementById('loader_img');
          document.getElementById("loader").style.visibility = "visible";
          setTimeout("ProgressImg.src = ProgressImg.src",100);     
          return true;
      }
         else 
      {
         return false;
      }
   }
```
Er wird 100 Millisekunden nach dem man auf den Submit-Button geklickt hat, eine animierte GIF-Grafik mit einem Text (alles in einem DIV-Container) eingeblendet. Da geht natürlich auch einfacher (vom Code) aber nur mit diesem Code funktioniert es mit allen Browsern (z.B. IE).

Nun habe ich den Code etwas verändert:

```
var submitted = false;
   function doSubmit() {
      if (!submitted) {
          submitted = true;
          window.setTimeout("Hinweis1()", 100); 
          window.setTimeout("Hinweis2()", 6000); 
          window.setTimeout("Hinweis3()", 13000);
          window.setTimeout("Hinweis4()", 20000);        
          return true;
      }
         else 
      {
         return false;
      }
   }

   function Hinweis1 () {
      document.getElementById("hinweis1").style.display='block';
      document.getElementById("hinweis2").style.display='none';
      document.getElementById("hinweis3").style.display='none';
      document.getElementById("hinweis4").style.display='none';
   }

   function Hinweis2 () {
      document.getElementById("hinweis1").style.display='none';
      document.getElementById("hinweis2").style.display='block';
      document.getElementById("hinweis3").style.display='none';
      document.getElementById("hinweis4").style.display='none';
   }

   function Hinweis3 () {
      document.getElementById("hinweis1").style.display='none';
      document.getElementById("hinweis2").style.display='none';
      document.getElementById("hinweis3").style.display='block';
      document.getElementById("hinweis4").style.display='none';
   }

   function Hinweis4 () {
      document.getElementById("hinweis1").style.display='none';
      document.getElementById("hinweis2").style.display='none';
      document.getElementById("hinweis3").style.display='none';
      document.getElementById("hinweis4").style.display='block';
   }
```

1. Frage: Ist das so richtig? (komplett selber gemacht)
2. Frage: Kann man das noch optimieren? Wenn ja, wie?
3. Frage: ich würde gerne die Funktion sich wiederholen lassen. Nur wie?

Der Code soll 4 verschieden Texte anzeigen nach einer Reihenfolge (Millisekunden). Die GIF-Grafik soll immer mit dargestellt werden.

Hier der HTML-Code zum JS-Code:

```
<div id="hinweis1" style="display:none;">
      <img id="loader_img" src="./loader.gif" border="0" alt="" /> Bitte warten...
   </div>

   <div id="hinweis2" style="display:none;">
      <img id="loader_img" src="./loader.gif" border="0" alt="t" /> wie lange denn noch****?
   </div>

   <div id="hinweis3" style="display:none;">
      <img id="loader_img" src="./loader.gif" border="0" alt="" /> ey alta vergiss es... XD
   </div>

   <div id="hinweis4" style="display:none;">
      <img id="loader_img" src="./loader.gif" border="0" alt="" /> WAS GEHT ALTA?<br />
      <br />
      MACH MA HINNE!
   </div>
```


----------



## Parantatatam (30. April 2012)

```
var submitted = false;
function doSubmit ()
{
  if(!submitted)
  {
    submitted = true;
    window.setTimeout(function () {
      toggle('advices', 0);
    }, 100);
    window.setTimeout(function () {
      toggle('advices', 1);
    }, 6000);
    window.setTimeout(function () {
      toggle('advices', 2);
    }, 13000);
    window.setTimeout(function () {
      toggle('advices', 3);
    }, 20000);
  }
  else
  {
    return false;
  }
}

function toggle (class_name, number)
{
  var elements = document.getElementsByClassName(class_name);
  for(var i = 0; i < elements.length; ++i)
  {
    elements[i].style.display = 'none';
  }
  
  if(number >= 0 && number < elements.length)
  {
    elements[number].style.display = 'block';
  }
}
```


```
<div id="advices" style="display:none;">
  <img id="loader_img" src="./loader.gif" border="0" alt="" />
  Bitte warten...
</div>
<div id="advices" style="display:none;">
  <img id="loader_img" src="./loader.gif" border="0" alt="t" />
  wie lange denn noch****?
</div>
<div id="advices" style="display:none;">
  <img id="loader_img" src="./loader.gif" border="0" alt="" />
  ey alta vergiss es... XD
</div>
<div id="advices" style="display:none;">
  <img id="loader_img" src="./loader.gif" border="0" alt="" />
  WAS GEHT ALTA?<br />
  <br />
  MACH MA HINNE!
</div>
```
Für zyklische Meldungen solltest du dir mal setInterval() anschauen.


----------



## Alice (30. April 2012)

Ich suche bei Google einen Code der mir einen Text wie:
*Bitte warten
Bitte warten.
Bitte warten..
Bitte warten...*
ausgibt und für eine bestimmte Zeit immer wieder widerholt. Natürlich soll das "animiert" aussehen. Nach ca. 6 Sekunden soll dann ein anderer (fester) Text angezeigt werden.


----------



## Parantatatam (1. Mai 2012)

```
var advice = document.getElementById('advice');
window.setInterval(function () {
  switch(advice.innerHTML.length - 12)
  {
    case 0:
    case 1:
    case 2:
      advice.innerHTML = advice.innerHTML + '.';
      break;
    case 3:
    default:
      advice.innerHTML = 'Bitte warten';
      break;
  }
}, 1000);
```


```
<div id="advice">Bitte warten</div>
```


----------



## Alice (1. Mai 2012)

Bei mir geht der Code nicht.

In der Console steht "advice ist 0".


----------



## Parantatatam (1. Mai 2012)

Skript wurde getestet und lief. Insofern sehe ich meinerseits keine Probleme.


----------



## Alice (1. Mai 2012)

Ich habs 1:1 getestet.

Vielleicht liegt es ja an meinem Browser...

Hier geht er: http://jsfiddle.net/5wgAC/1/


----------



## Parantatatam (1. Mai 2012)

Schau es dir mal hier an: http://jsfiddle.net/2KUa4/


----------



## Alice (1. Mai 2012)

Hab ich auch schon ausprobiert.

Das meine ich!

Mein "alter Schinken kein guter Coder Sourcecode" geht überall.


----------



## Parantatatam (1. Mai 2012)

Welchen Browser verwendest du denn?


----------



## Alice (1. Mai 2012)

Firefox 12.0


----------



## Parantatatam (1. Mai 2012)

Du machst irgendwas falsch, denn in meinem Firefox 12.0 läuft es problemlos.


----------



## Alice (1. Mai 2012)

```
<script type="text/javascript">
<!--
var advice = document.getElementById('advice');
window.setInterval(function () {
  switch(advice.innerHTML.length - 12)
  {
    case 0:
    case 1:
    case 2:
      advice.innerHTML = advice.innerHTML + '.';
      break;
    case 3:
    default:
      advice.innerHTML = 'Bitte warten';
      break;
  }
}, 1000);
//-->
</script>
```


```
<div id="advice">Bitte warten</div>
```

Was kann man denn beim markieren, kopieren und einfügen falsch machen? 

Bei mir wird nur "Bitte warten" angezeigt und in der Console "Fehler" der sich jede Sekunden widerholt.


----------



## Parantatatam (1. Mai 2012)

Könnte man die Details zu diesem Fehler bekommen? Beschreibung, Name, Fehlercode, Zeilennummer?


----------



## Alice (1. Mai 2012)

Hast ne PN direkt zum Skript.

Sorry, aber den Link gebe ich nicht im Forum raus.


----------



## Parantatatam (1. Mai 2012)

Das Problem ist, dass das Skript ausgeführt wird, bevor die ganze Seite geladen ist. Somit existiert zur Laufzeit auch das Element noch nicht. Packe das Ganze in eine ONLOAD-Methode und dann geht es:

```
document.addEventListener('load', function () {
  // hier packst du dein bisheriges Skript rein
}, false);
```


----------



## Alice (1. Mai 2012)

Muss ich die Funktion dann irgendwie auslösen?


----------



## Parantatatam (1. Mai 2012)

Nö. Die Lambda-Funktion wird ausgelöst, wenn das Ereignis "onload" stattfindet. Das ist der Sinn von Ereignis-orientierter Programmierung.


----------



## Alice (2. Mai 2012)

Hallo @einfach nur crack 

Leider funktioniert der JS-Code von dir bei mir nicht. Ich habe den Code inkl. der ergänzung von dir 1:1 eingebaut.


----------

