Beiträge von Sempervivum

  • createElement() - Html Teil mit js erstellen, wie?

    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:

  • Javascript-Einblendung mit CSS-Transition verbinden

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

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

  • Javascript-Einblendung mit CSS-Transition verbinden

    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:

  • Javascript-Einblendung mit CSS-Transition verbinden

    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.

  • Javascript-Einblendung mit CSS-Transition verbinden

    Jetzt getestet und so funktioniert es:

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

  • Javascript-Einblendung mit CSS-Transition verbinden

    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:

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

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

  • Javascript-Einblendung mit CSS-Transition verbinden

    Nein, Du brauchst nur eine Klasse. Wenn heruntergescrollt wird, setzt Du diese Klasse mit add und wenn wieder hoch gescrollt wird, löschst Du sie wieder mir remove:

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

    Und dann im CSS:

    Code
    #upperlogo.hidden {
    /* hier die Regeln um das Logo auf Null zu verkleinern */
}

  • Javascript-Einblendung mit CSS-Transition verbinden

    Am besten geht so etwas, wenn man es durch Hinzufügen und Löschen einer Klasse macht, dann kannst Du beliebige CSS-Regeln steuern, ohne im JS etwa ändern zu müssen.

    https://wiki.selfhtml.org/wiki/JavaScrip…ement/classList

    Und mit transition bist Du schon auf dem richtigen Wege. Entweder width und height ändern oder mit transform: scale die Größe auf 0 ändern.

    BTW: Dies window.onscroll = function() {scrollFunction()}; lässt sich kürzer formulieren: window.onscroll = scrollFunction;

  • Less More

    Gegen deine Vorgehensweise ist nicht einzuwenden.

    Alternativen:

    Die Eventlistener nicht inline notieren sondern mit addEventListener registrieren

    Dies ist problemlos auch mit nur-CSS möglich.

    Je nachdem, wie es gewollt ist, kann man dafür sorgen, dass immer nur ein Element geöffnet ist.

  • Less More

    1. getElementsByClassName liefert kein einzelnes Element sondern ein Nodelist, im wesentlichen ein Array. Darüber müsstest Du eine Schleife machen.

    2. Du musst eine Verbindung zwischen dem geklickten Button und dem .main mit dem Inhalt herstellen. Hast Du den Button, kannst Du das .main mit nextElementSibling finden.

    Am besten gleich den Button an die Funktion fun übergeben:

    <button onclick="fun(this)">Lesen Sie mehr</button></div>

    Dann steht er in der Funktion zur Verfügung:

    Code
    function fun(btn){
    var content = btn.nextElementSibling;

    Ungetestet, den Rest überlasse ich dir.

  • sticky header funktioniert bei effekten nicht

    Ich habe damit (overflow-x) mal ein Demo gemacht und zusätzlich Scrollsnap verwendet. Damit funktioniert es auf meinem Handy mit dem Androidbrowser ganz gut. Nur die Empfindlichkeit ist etwas hoch, häufig wischt man zwei Bilder weiter.

    Hier kannst Du es in Aktion sehen:

    https://webentwicklung.ulrichbangert.de/thread363-swipe-images.html