DIV-Container einblenden nach 5 Sekunden


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

Parantatatam

mag Cookies & Kekse
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);
 

Alice

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

Parantatatam

mag Cookies & Kekse
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.
 

Alice

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

mag Cookies & Kekse
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>
 

Alice

Erfahrenes Mitglied
Hab ich auch schon ausprobiert.

Das meine ich!

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

Alice

Erfahrenes Mitglied
Code:
<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>

HTML:
<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

mag Cookies & Kekse
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:
Code:
document.addEventListener('load', function () {
  // hier packst du dein bisheriges Skript rein
}, false);
 

Parantatatam

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

Alice

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

Neue Beiträge

Forum-Statistiken

Themen
272.361
Beiträge
1.558.639
Mitglieder
187.834
Neuestes Mitglied
jordanx0206