2 Divboxen abwechselnd einblenden

  • Hallo zusammen,


    ich weis mir irgendwie nicht zu helfen, weshalb ich mich an euch wenden muss.


    Ich möchte im oberen Bereich einer Webseite (Intranet) zwei Legenden darstellen. Diese Legende sagt zum einen aus, welche Farbe für was steht für Tickets. Und die zweite Legende sagt welche Farbe für was steht für Projekte.


    Ich möchte nun daraus etwas animiertes Basteln.


    Und zwar soll zuerst die eine Legende angezeigt werden:



    HTML
    <div id="legendeoffen1">
    <h4 style="color:white;">Ticket-Ablaufzeit:</h4>
    <span style="color:green">Grün: 1-3 Tage - Liegt im Zeitrahmen</span> |
    <span style="color:orange">Orange: 3-7 Tage - Sollte bald beendet werden</span> |
    <span style="color:red">Rot: Älter als 7 Tage - Sollte bereits beendet sein!</span>
    </div>


    und anschließend die zweite. Möglichst mit einem "smoothen" Übergang, damit das ganze auch nach was aussieht. Habt ihr Ideen, wie ich Divboxen "smooth" automatisch alle paar Sekunden aus und einblenden kann und das ohne viel Aufwand? Am liebsten natürlich reines HTML / CSS sofern das möglich ist, ansonsten geht natürlich auch JS


    Vielen Dank im Voraus!

  • Ich möchte nun daraus etwas animiertes Basteln.

    Nein, möchtest du nicht. Irgendwelches Gezappel lenkt nur vom eigentlichen Inhalt der Seite ab und wenn man mal eine der beiden Legenden braucht ist garantiert die falsche gerade da. Von der Lesbarkeit der Farben mal garnicht anzufangen …


    Achja: mit HTML/CSS alleine geht das nicht, da brauchst du JS dafür.

  • Zitat

    Der, der da sagt "Es geht nicht" sollte den nicht stören, der es gerade tut. :D

    Die Hintergrundfarbe musst Du noch anpassen, da die Farbe der Überschrift weiß war, kann sie ja nicht weiß sein.

  • Nein, möchtest du nicht. Irgendwelches Gezappel lenkt nur vom eigentlichen Inhalt der Seite ab und wenn man mal eine der beiden Legenden braucht ist garantiert die falsche gerade da. Von der Lesbarkeit der Farben mal garnicht anzufangen …

    Damit hast du Recht... als Besucher diese Seite ich ach wenigen Augenblicken wieder weg - wäre mir einfach zu doof darauf tu warten, bis die richtige Legende angezeigt wird.

    Achja: mit HTML/CSS alleine geht das nicht, da brauchst du JS dafür.

    Das ist allerdings falsch... schau dir mal Keyframe-Animationen an (https://www.w3schools.com/css/css3_animations.asp).

    Das eignet sich aber vielleicht eher , wenn ich so eine Art Slider mit Bilder erzeugen will https://wiki.selfhtml.org/exte…spiel:Bildwechsler-2.html.

    Obiger IFrame stammt aus dem Tutorial https://wiki.selfhtml.org/wiki…rials/Animation/Animation (etwas runterscrollen)

  • Guten Morgen zusammen,


    vielen Dank für die zahlreichen Antworten. Ich weis, dass das wenig benutzerfreundlich ist.


    Jedoch dient die Legende nur einer Übersicht und muss im ersten Schritt nicht gelesen werden. Die Legende wird nur von 2 Personen gesehen, nämlich denen, die im Ticketsystem als Administrator angelegt sind. Da es in letzter Zeit vermehrt zu langen Wartezeiten der Tickets kommt, hab ich das Create Datum mit dem Heutigen Datum verglichen, daraus eine Differenz gebastelt und stelle die Tage nun zur Schau. Und diese Tage werden dann farbig angezeigt. Ist das Ticket ein Ticket und ist bereits 1 Tag angelegt, ist die 1 grün. Ist das Ticket allerdings eine Woche alt, ist die 7 Rot, weil das Ticket innerhalb einer Woche gemacht werden muss.


    Ich denke jeder weis, was die Farben grün, orange, rot bedeuten wenn es um die Tage geht, wie lang das Ticket bereits offen ist. Ich wollte trotzdem eine Legende zumindest einblenden lassen, damit man mir nicht vorwerfen kann, er hätte nicht gewusst, das Rot XY bedeutet.


    Ich werde den Lösungsvorschlag von Sempervivum austesten :)


    Liebe Grüße

    Domenic


    PS: Da ich einen schmalen Header habe, passt da jeweils nur eine Legende rein. Da es allerdings Tickets->Tickets und Tickets->Projekt gibt, die unterschiedliche Abläufe haben (weil ein Projekt nie so schnell beendet ist, wie ein Ticket) habe ich 2 Legenden mit unterschiedlicher Tagesanzahl für die Erledigung.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!