HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

2 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

22.05.2021, 16:39

Nimm setTimeout für die Verzögerung und display: none (oder deinElement.remove() falls du die Ladeanimation danach nie mehr brauchst) zum Ausblenden:

setTimeout(()=> {
document.getElementById("loadingDiv").style.display = "none";
}, 5000);

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

triopasi

22.05.2021, 16:41

Alternativ: Lass die Ladeanimation weg.

Der Timeout hört sich nicht so an, als würdest du wirklich etwas laden wo das nötig ist. In dem Fall nervt das einfach nur.

22.05.2021, 16:38

Du könntest mit display: none oder/und opacity:0 DOM Elemente. ausbleden. Du könntest auch über Selektoren mit remove, die DOM Elemente aus dem Code entfernen. Vielleicht fällt regex noch was ein.

Woher ich das weiß:Berufserfahrung – Web Developer bei einem mittelständischen Portalbetreiber

Ähnliche Beiträge

Welche Programmiersprache(n) nach HTML, CSS, Javascript?

Ich weiß HTML, CSS sind keine aber welche Programmiersprachen sollte man nach Javascript lernen mein Bereich wäre momentan zum Start Webseiten (Webanwendungen) sowie Apps.

Wie funktioniert die Ladeanimation in html?

Guten Morgen,Ich habe eine Webanwendung welche beim Aufruf verschiedener Unterseiten Scripte ausführt. Nun möchte ich dass eine Ladeanimation erscheint sobald ich die Unterseite aufrufe und diese soll erst beendet werden sobald das Script fertig ausgeführt wurde. Habe bereits eine geeignete Animation gefunden und implementiert, nur weis ich nicht wie man diese jetzt aufruft, denn von allein funktioniert das nicht. Habe ein div spinner mit den Attributen und noch webkitkeyframes für die Animationen, wie kann man der Animation angeben wann sie beginnen soll und wann sie sich beenden soll?

Hier der code in css: (html code beinhaltet nur ein div spinner)

Javascript + CSS animation will nicht funktionieren?

Hallo,

ich kann mir vorstellen, dass hier so einiges falsch ist. Es geht hauptsächlich um die drei letzten Klassen im CSS und um den kompletten JS Code. Ich will, dass die box auf der linken Seite und der Container unterm HR rein sliden.

Weil des Code etwas lang ist hab ich das auf jsfiddle gespeichert:

https://jsfiddle.net/damvn6wy/26/

danke im voraus.

html/css text dynamisch anpassen?

hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.

Homepage-Baukasten, der HTML-Code ausspuckt

Hallo zusammen,

ich möchte eine eigene Homepage erstellen. Kenntnisse in HTML, CSS, JavaScript, PHP und MySQL sind zwar vorhanden, aber ich bin vor allem zu faul, den statischen Code (also HTML, CSS und JavaScript) zu schreiben, weil das so lange dauert. Außerdem bin ich im Designen nicht so gut. Deshalb wollte ich mir die Arbeit von einem Homepagebaukasten abnehmen lassen, der am Ende HTML-, CSS-, und JavaScript-Code ausspuckt, sodass ich hier am Design nichts mehr schreiben muss. Leider laufen die meisten Homepagebaukasten direkt im Browser (optimaler, aber nicht notwendig wäre ein Desktop-Programm) und vor allem gibt es bei den meisten nur die Möglichkeit, die Webseite direkt zu hosten, ohne dass der HTML-Code abrufbar ist (außer dann später, wenn die Webseite gehostet ist).

Meine Frage also: Kennt jemand einen Homepage-Baukasten, der direkt HTML-, CSS- und JavaScript-Code ausspuckt und einen nicht zwingt, die Seite direkt zu hosten, un der möglichst auf dem Desktop läuft?

Vielen Dank im Voraus und viele Grüße!

JavaScript vs. Flutter und Dart?

Was findet ihr besser?

HTML, CSS und Javascript

Oder

Dart und Flutter

Projektidee Java (Webanwendung)?

Was sind gute Webprojektideen für Leute, die relativ weit am Anfang sind?

Sollte nicht zuu komplex sein, aber schon gewisse Dinge wie HTML, CSS, Java beinhalten. Am besten wäre es, wenn ich dabei noch ein Framework kennenlernen kann. Es wäre auch okay, wenn ich dabei ein bisschen JavaScript/PHP benutzen müsste.

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

Alternative für Trinket?

Hallo Leute, ich baue gerade eine Website für meine Facharbeit mit HTML, CSS und JavaScript. Auf der Website soll 1 Python Programm gezeigt werden (also der Code) und es soll eine Konsole geben, mit der man das Programm ausführen kann und wenn nötig (also das Programm fragt den Nutzer etwas einzugeben um dann spezielle Berechnungen zu tätigen) etwas eingeben kann. Gibt es einer Möglichkeit dies direkt mit HTML, CSS und JavaScript zu erstellen, oder braucht man da direkt ein Programm wie Trinket, dessen Code man dann einbetten kann. Wenn ja, gibt es andere solche Tools. Oder wie würde sowas dann funktionieren, wenn man es direkt programmiert?

Vielen Dank an alle, die sich für diese Frage Zeit nehmen!

LG Melleo

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

HTML CSS - DIV Container wie iframe nutzen

Ich hab mal eine Frage, gibt es in CSS und HTML eine Möglichkeit einen DIV Container wie einen iFrame zu nutzen und in diesen Container Content von einer anderen Webseite hineinzuladen?

Javascript, html und css?

Ich habe jetzt mit programmieren angefangen, und um genauer zu sein mit Javascript. Ich weiß jetzt dass man Javascript, HTML und css zusammen kombinieren kann. Ich weiß aber immer noch nicht wie das gehen kann. Haben alle nicht verschiebe Codes oder wie ist es genau zu verstehen ?

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

...dass Content 1 von Opacity 100 auf 0 geht
...dass Content 1 in Minus Y-Richtung 20px bewegt wird
...dass Content 2 von Opacity 0 auf 100 geht
...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

Was ist eigentlich das div genau in html?

Wenn ich zum Beispiel 4 div Container im Code habe, ist der erste div Container dann ganz oben und der letzte div Container ganz unten?

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }