DIV-Container einblenden nach 5 Sekunden

A

Alice

Erfahrenes Mitglied
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?

Javascript: 
   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. :)
 
Code: 
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);
 
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...

Javascript: 
   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:
Code: 
   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:
Code: 
   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:
HTML: 
   <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>
 
Zuletzt bearbeitet:
Code: 
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';
  }
}
HTML: 
<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.
 
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.
 
Code: 
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);
HTML: 
<div id="advice">Bitte warten</div>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück