Beiträge von Sempervivum

Ich habe selber mal eine Demo gemacht aus meiner Testseite:

https://jsfiddle.net/Sempervivum/zg4kqx7e/1/

Da verschiebt sich nichts.

Zitat

Das Logo wird ja erst beim Scrollen ab einem bestimmten Punkt auf der Seite angezeigt. Wenn das Logo eingeblendet wird, verschiebt sich das Navigationsmenü nach rechts und dann taucht das Logo auf.

Genau das verstehe ich nicht: Weil bei Skalierung sich die Größe des div nicht ändert, dürfte sich doch nichts verschieben?

Wäre es eine Möglichkeit, dass Du eine Demo ohne Inhalte mit irgend welchen Blindtexten machst und diese online stellst?

Ich verstehe nicht, was Du mit dem Ausblenden durch display: none; erreichen willst. Anscheinend gibt es ja da ohne das einen störenden Effekt, den Du beseitigen willst.

Hast Du die Möglichkeit, das ganze online zu stellen, damit man es sich ansehen kann?

Das wird hier diskutiert:

https://stackoverflow.com/questions/2210…isplay-property

Zitat

display:none; removes a block from the page as if it were never there.

deshalb funktioniert die Animation nicht. Als Lösung wird angeboten, statt dessen die opacity zu animieren, das können wir ja noch schnell ausprobieren:

        /* Klasse des eigentlichen Bildes .upperlogo ist der div */
        .logocool {
            margin-top: 6px;
            height: 55px;
            width: 57px;
            transition: transform 0.7s, opacity 0.7s;
            /* Bild zunaechst unsichtbar machen */
            transform: scale(0, 0);
            opacity: 0;
        }

        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            transform: scale(1, 1);
            opacity: 1;
        }

Testdatei fertig, ich sehe, was das Problem ist, aber nicht die Lösung. Ich überlege ...

D. h. nachdem wir die Änderung mit dem Ausblenden des Div gemacht haben funktioniert funktioniert das animierte Wachsen der Größe von 0 an nicht mehr?

Ich mache mal eine Testdatei dafür ...

Zitat

allerdings funktioniert der CSS-Effekt nicht.

Das verstehe ich jetzt nicht, Du schreibst doch, dass die Javascript-Animation funktiert? Welchen CSS-Effekt meinst Du hier?

Zitat

Ich möchte schön mehrere elemente erzeugen, deswegen mit DocumentFragment.

Das ist natürlich ein Grund und dann ist es auch angebracht.

Zitat

möchte ich ein div ins das erste div erzeugen. Muss ich es mir mit getElementById(....) holen?

Wenn ich das richtig verstehe, hast Du das Div ja als Javascript-Objekt und dann kannst Du das neue auch dort einfügen. In etwa so:

    let newDiv = document.createElement('div');
    if(categoryBox.hasOwnProperty(elem)) {
      newDiv.id = elem;
      newDiv.classList.add('min-row');
    }
    let newDiv2 =document.createElement('div');
    // dieses div erweitern mit class, id etc.
    // und dem ersten Div hinzu fügen:
    newDiv.appendChild(newDiv2);
    
    console.log(categoryBox[elem]);
    htmlFragment.appendChild(newDiv);

Das wäre kein Problem, Du müsstest im CSS nur das display auf none setzen und beim Scrollen wieder auf block oder flex:

/* Klasse des eigentlichen Bildes .upperlogo ist der div */
        .logocool {
            margin-top: 6px;
            height: 55px;
            width: 57px;
            transition: width 0.7s, height 0.7s;
            /* Bild zunaechst unsichtbar machen */
            width: 0;
            height: 0;
            display: none;
        }
        .logocool img {
            width: 100%;
            height: 100%;
        }
        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            width: 55px;
            height: 57px;
            display: flex;
        }

Ich fürchte nur, dass es dann einen unangenehmen Sprung gibt, aber sieh es dir erst Mal an.

Ja, dann wäre das Logo von Anfang an etwas nach rechts versetzt und würde sich vom Zentrum aus ausdehnen.

Wenn ich mir deinen Screenshot oben ansehe, dann ist das Logo ja sicher in einem Container mit den Menüpunkten. Diesem könntest Du display: flex; zuweisen und dann das Logo zentrieren mit align-self: center; für den Container des Logos mit der Klasse "logocool".

Finde ich nicht pingelig. Möchtest Du, dass es nur vertikal mittig ist? Denn sonst wären wären wir wieder bei dem Effekt, den wir mit scale hatten.

Da fehlen uns jetzt noch zwei Dinge:

Das Logo muss sich in der Größe an das Div anpassen und wir müssen width und height animieren:

/* Klasse des eigentlichen Bildes .upperlogo ist der div */
        .logocool {
            margin-top: 6px;
            height: 55px;
            width: 57px;
            transition: width 0.7s, height 0.7s;
            /* Bild zunaechst unsichtbar machen */
            width: 0;
            height: 0;
        }

        .logocool img {
            width: 100%;
            height: 100%;
        }

        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            width: 50px;
            height: 50px;
        }

Ja, ich denke, so sollte es funktionieren. Das andere CSS musst Du natürlich beibehalten.

Und stört es jetzt, dass das Div auch im unsichtbaren Zustand den Platz einnimmt? Wenn ja, einfach width und height ändern anstatt transform:scale

Zitat

Eine Sache noch:

Ich sollte ja das style="display: none;" entfernen. Dies hatte ich drinstehen, damit der Div nur angezeigt wird, wenn das Scroll-Event gestartet ist, da dort sonst ein unschöner freier Platz ist. Jetzt wird der Div aber immer angezeigt. Kann ich den auch einfach über CSS ausblenden?

Da sind wir jetzt mit dem scale u. U. auf falschen Weg, denn dabei ist es so, dass das Element auf wenn es auf 0 herunter skaliert ist, den Platz einnimmt. Lass uns das erstmal zum Laufen bringen und dann sehen wir weiter.

Jetzt getestet und so funktioniert es:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        header {
            position: fixed;
            background: lightsalmon;
            width: 100%;
        }

        main {
            height: 400vh;
            background-color: lightblue;
        }

        /* Klasse des eigentlichen Bildes .upperlogo ist der div */
        .logocool {
            margin-top: 6px;
            height: 55px;
            width: 57px;
            transition: transform 0.7s;
            /* Bild zunaechst unsichtbar machen */
            transform: scale(0, 0);
        }

        #upperlogo.visi {
            /* jetzt das Bild sichtbar machen */
            transform: scale(1, 1);
        }
    </style>

</head>

<body>
    <header>
        <div class="logocool" id="upperlogo">
            <img src="images/buttondownload.png" alt="">
        </div>
    </header>
    <main></main>
    <script>
        window.onscroll = scrollFunction;
        function scrollFunction() {
            if (window.matchMedia('(min-width: 769px)').matches) {
                if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                    document.getElementById("upperlogo").classList.add("visi");
                } else {
                    document.getElementById("upperlogo").classList.remove("visi");
                }
            }
        }
    </script>


</body>

</html>

Woran es jetzt lag, weiß ich nicht, ich hatte zunächst das inline display: none; noch drin und der Eventhandler war mir abhanden gekommen.

Das ist nicht verwunderlich, denn ich hatte bisher nichts von dem getestet. Werde ich jetzt aber tun ...

Eher habe ich da etwas falsch verstanden, weil ich das HTML nicht gesehen habe. Du willst ja das Logo sichtbar machen, wenn man herunter scrollt. D. h. den Klassennamen auf "visi" ändern:

    if(window.matchMedia('(min-width: 769px)').matches){
        if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
                document.getElementById("upperlogo").classList.add("visi");
            } else {
                document.getElementById("upperlogo").classList.remove("visi");
            }
        }
    }

Du machst ja das Logo mit dem Inlinestyle style="display: none;" unsichtbar. Das zunächst Mal löschen, denn wir wollen ja jetzt die Größe des Logos animieren. Dann im CSS das Logos zunächst auf 0 herunter verkleinern und wenn die Klasse "visi" vorhanden ist, wieder sichtbar machen:

    // Klasse des eigentlichen Bildes .upperlogo ist der div //
    .logocool {
        margin-top: 6px;
        height: 55px;
        width: 57px;
        -webkit-transition: -webkit-transform 0.7s;
        transition: transform 0.7s;
        /* Bild zunaechst unsichtbar machen */
        transform: scale(0, 0);
    }
    #upperlogo.visi {
        -webkit-transform: scale(0, 0);
        /* jetzt das Bild sichtbar machen */
        transform: scale(1, 1);
    }

AFAIK ist dieses -webkit-transform heute nicht mehr notwendig.

Ebenfalls frohe Ostern!

Ich habe es nicht getestet, aber ich denke, Du bist da schon auf dem richtigen Weg. Du musst dann nur das htmlFragment noch dem Container hinzu fügen.

DocumentFragment hat schon Vorteile, aber wenn Du ein einziges Element erzeugen und hinzu fügen willst, geht es wahrscheinlich auch ohne.