Ankündigung

Einklappen
Keine Ankündigung bisher.

div -box per Befehl (also kein Klick) ausblenden

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    div -box per Befehl (also kein Klick) ausblenden

    Zuletzt geändert von lord_icon; 12.05.2017, 10:56.
    Hi,

    ich hab eine div Box die ich per Befehl (nach ablauf einer schleife) ausblenden möchte.

    PHP-Code:
    echo '<div style="display:block">Ladefortschrittsbalken</div>'; 
    Per Klick ist das kein Problem... aber per Befehl komme ich hier nicht weiter.
    Vielen Dank für ein Tipp (bitte ohne Framework)
    Stichworte: -
  • #2
    ganz ohne Framework:

    HTML-Code:
    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blendout</title>
  <style>
    .blendOut{
      font-family:"Calibri", sans-serif;
      font-size: 30px;
      animation-name: blendOutAni;
      animation-duration: 5s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;      
    }
    @keyframes blendOutAni{
      0%{opacity:1;}
      80%{opacity:1;}
      100%{opacity:0;}
    }  
  </style>
</head>
<body>
  <div class = "blendOut" >Ich bin in 5 Sekunden nicht mehr sichtbar</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, rem?
</body>
</html>
    gib dem Div einfach per befehl die klasse blendOut...

    Kommentar

    • #3
      hmm... ich galube, wo wird das nichts.. auch wenn ich über eine CSS lösung recht überrascht bin.

      Es laufen ja verschiedene Schleifen. Innerhalb der Schleife wird ein Ladebalken ausgegeben, sodass man weiß, wann diese Aufgabe abgearbeitet ist.
      Nach der Schleife müsste dann ein JS Befehl kommen, der meine div Box auf hidden setzt.

      Deine Lösung kann bei mir nicht klappen. Denn innerhalb von 5 Sek und da garnichts getan. Eher 20-40 min.. je nach Aufgabe.

      Kommentar

      • #4
        Dann solltest du vielleicht mal deinen Ansatz zeigen, wie du das bis jetzt hast, damit eine Lösung anbieten kann.
        So kann man nur sagen das du nach Beendigung der Scheife halt in das Dom eingreifst, dir die id zu dem DIV holst und die CSS Angabe veränderst in dem du diese auf none setzt.

        Code:
         
 document.getElementById('mybox').style.display = "none";

        Kommentar

        • #5
          Zitat von daniel_1998 Beitrag anzeigen
          hmm... ich galube, wo wird das nichts.. auch wenn ich über eine CSS lösung recht überrascht bin.

          Es laufen ja verschiedene Schleifen. Innerhalb der Schleife wird ein Ladebalken ausgegeben, sodass man weiß, wann diese Aufgabe abgearbeitet ist.
          Nach der Schleife müsste dann ein JS Befehl kommen, der meine div Box auf hidden setzt.

          Deine Lösung kann bei mir nicht klappen. Denn innerhalb von 5 Sek und da garnichts getan. Eher 20-40 min.. je nach Aufgabe.
          Warum so negativ? Dein Text hätte lauten sollen:

          "Okay, das sieht gut aus. Kann man denn im div-Element dem Attribut class einen anderen Wert geben, und diesen dann nach Abarbeitung

          verschiedener Aufgaben in blendOut umändern?"

          Antwort: "Ja, kann man."

          PHP-Code:
          <!doctype html>
          <          html lang="en">
          <          head>
            <          meta charset="UTF-8">
            <          title>Blendout</title>
            <          style>
            .          visible{
                        font-family:"Calibri", sans-serif;
                          font-size: 30px;
            }
              .          blendOut{
                          font-family:"Calibri", sans-serif;
                          font-size: 30px;
                          animation-name: blendOutAni;
                          animation-duration: 1s;
                          animation-iteration-count: 1;
                          animation-fill-mode: forwards;     
              }
              @          keyframes blendOutAni{
                          0%{opacity:1;}
                          80%{opacity:1;}
                          100%{opacity:0;}
              } 
            </          style>

          </          head>
          <          body>
            <          div class="visible" id="div1">Am Ende der Aufgabe bin ich weg!!</div>
            <          p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, rem?</p>
          <          script type="text/javascript">
          <!--
                     /*
           * Eine Aufgabe dauert ca. 5 Sekunden
           */
                     setTimeout(function(){
                      /*
           * Nach Ende einer Aufgabe
           */
                      document.getElementById('div1').setAttribute("class", "blendOut");
           },           5000);
          // -->
          </script>
          </body>
          </html> 
          Gruß
          Günni

          Kommentar

          • #6
            Zitat von daniel_1998 Beitrag anzeigen
            hmm... ich galube, wo wird das nichts.. auch wenn ich über eine CSS lösung recht überrascht bin..
            Ich war eben auch überrascht, dass Du schon seit 2009 hier dabei bist. Nach über 7 Jahren noch solche Fragen zu stellen ist bezeichnend....

            Kommentar

            • #7
              @daniel_1998
              hast du hier verschieden Nanme unter denen du schreibst?
              Leicht irritiert...

              Kommentar

              • #8
                Danke GUNNI.
                Code:
                document.getElementById('div1').setAttribute("class", "blendOut");
 }, 5000);
                Das werd ich mal versuchen nachzustellen. Zumindest scheint es für MICH verständlich zu sein, was dort erreicht werden soll.


                Zitat von kaminbausatz Beitrag anzeigen
                Ich war eben auch überrascht, dass Du schon seit 2009 hier dabei bist. Nach über 7 Jahren noch solche Fragen zu stellen ist bezeichnend....
                Und ich bin immer wieder überrascht wie oft und viele Leute davon ausgehen, dass man gleich ein Programmierprofi sein muß, wenn man a: hier schon ewig dabei ist... oder B: (was bei mir ja nicht zutrifft, aber in anderen Postings immer wieder zu lesen ist)... dass das Alter einer Person den Erfahrungsstand wiederspiegeln muß. Ein 50 Jähriger muß nach den Verständniss einiger hier eher als Sensai als als Schüler auftretten.
                Nun lehn ich mich mal weit aus den Fenster und behaupte mal, dass nicht jeder eine IT-Ausbildung genossen hat.

                Ich bin "nur" Kaufmann i.A. und mach das nebenbei aus Spaß an der Sache. In den letzten 2 Jahren hab ich aber wg. Ausbildung, Berufsschule und privaten Problem wenig Freizeit wo ich mich mit PHP und diversen anderen Prog.Sprachen beschäftigen kann.

                Behaupten kann ich aber, das hier wohl keiner JEDEN PHP,JS oder CSS-Befehl auswendig kann. ICH für meine Sache habe sowas bisher noch nie einsetzen müssen und sehe es jetzt auch zum ersten mal
                Code:
                animation-name: blendOutAni;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
                Entspechend meine Überraschung, dass ich mit CSS auch Elemente "nachbehandeln" kann.

                Und nein... ich will und wollte hier jetzt keinen Angreifen. Ich hoffe mal, dass das auch keiner so aufgenommen hat. Es hat nunmal nicht jeder den gleichen Kenntnissstand


                Zitat von protestix Beitrag anzeigen
                @daniel_1998
                hast du hier verschieden Nanme unter denen du schreibst?
                Leicht irritiert...
                Janein... ich bin daniel_1998. In der Berufsschule haben wir ein Computerkabinett wo je nach Stundenart andere Personen dran sitzten.
                Wenn die vorherige Person sich nicht ausloggt ud ich nicht drauf achte, ob es mein Nickname ist, dann poste ich unter anderen Namen.
                Ist leider nicht das erste mal vorgekommen. Und umgedreht genauso. Muß ich tatsächlich mal mehr drauf achten... aber is ja eh nur noch ein gute Jahr ^^


                Unabhängig dessen: Danke an euch allen

                Kommentar

                • #9
                  Ja und nu? Ist der Fall jetzt geklärt?
                  [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X