Beiträge von Sempervivum

Sempervivum

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

Sempervivum

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

Sempervivum

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.

Sempervivum

Jetzt getestet und so funktioniert es:

HTML

<!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>

Alles anzeigen

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

Sempervivum

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

Sempervivum

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:

Code

    // 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);
    }

Alles anzeigen

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

Sempervivum

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.

Sempervivum

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 */
}

Sempervivum

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;

Sempervivum

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.

Sempervivum

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.

Sempervivum

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

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Swipe Demo</title>
    <style>
        #img-container {
            width: 100%;
            display: flex;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }

        #img-container img {
            width: 100vw;
            height: auto;
            min-height: 1px;
            flex: 0 0 100%;
            scroll-snap-align: center;
        }
    </style>
</head>

<body>
    <div id="img-container">
        <img src="images/bild1.jpg">
        <img src="images/bild2.jpg">
        <img src="images/bild3.jpg">
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

Ein Problem, auf das ich ganz am Anfang gestoßen bin, ist folgendes: Deine Tabellendefinition ist nicht vollständig, es fehlt tbody. Der Browser erkennt das und fügt eigenmächtig das tbody hinzu. Man erkennt das, wenn man sich die Tabelle im HTML-Inspektor ansieht. Damit ist die Struktur bzgl. Kindelementen nicht mehr so, wie man sie erwartet. Um zu wissen, woran man ist, habe ich im HTML der Tabelle das tbody hinzu gefügt.

Was das Javascript betrifft, so habe ich das weitgehend überarbeitet und, hoffentlich, vereinfacht. Dieses funktiniert dann:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <div id="focus"></div>
    <div>
        <label id="überschrift" for="überschrift">Bitte legen Sie einen Vorlesungstermin fest
        </label>
        <label id="Termindatum" for="termindatum">Datum
            <input id="lbDatum" type="text" name="termindatum" placeholder="04.03.2020" value="04.03.2020" readonly>
        </label>
        <label id="Terminbezeichnung" for="terminbezeichnung">Bezeichnung:
            <input id="lbTerminbezeichnung" type="text" name="terminbezeichnung" placeholder="Statistik" maxlength="30">
        </label>
        <label id="Start" for="start">Von:
            <input id="lbStart" type="time" name="start">
        </label>
        <label id="Ende" for="ende">Bis:
            <input id="lbEnde" type="time" name="ende">
        </label>
        <label id="Kursbezeichnung" for="kursbezeichnung">Kurs:
            <input id="lbKursbezeichnung" type="text" name="kursbezeichnung" placeholder="WWI2020C" maxlength="10">
        </label>
    </div>
    <script>
        function clone_this() {
            // tbody in Variable bereit stellen
            var tbody = document.querySelector('#tab tbody');
            // neue Tabellenzeile durch Klonen der letzten erzeugen
            newRow = tbody.lastElementChild.cloneNode(true);
            // und an Ende in den tbody einfuegen
            tbody.appendChild(newRow);
            // Eingabefelder in der neuen Tabellenzeile bereit stellen
            var dstInputs = newRow.querySelectorAll('input');
            for (j = 0; j < dstInputs.length; j++) {
                // Quell-Eingabefeld bereitstellen
                var srcInput = document.getElementById('lb' + dstInputs[j].name);
                // und den Wert daraus in das Eingabefeld
                // in der neuen Tabellenzeile uebertragen
                dstInputs[j].value = srcInput.value;
            }
        }
    </script>
    <table id="tab" border="2">
        <tbody>
            <tr>
                <td width=" 160"><input type="text" name="Datum" value="Datum" readonly></td>
                <td width="60"><input type="time" name="Start" value="Von" readonly></td>
                <td width="60"><input type="time" name="Ende" value="Bis" readonly></td>
                <td width="160"><input type="text" name="Terminbezeichnung" value="Modulbezeichnung" readonly></td>
                <td width="160"><input type="text" name="Kursbezeichnung" value="Kursbezeichnung" readonly>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" id="erstellen" value="Festlegen" onclick="clone_this()">
</body>

</html>

Alles anzeigen

Was noch nicht befriedigt, ist, dass die erste Tabellenzeile eigentlich der Kopf thead sein müsste. Aber da wollte ich nicht einsteigen.

Sempervivum

Stimmt, das ist wenig plausibel. Allerdings ist das jetzt eine andere Datei: manifest.json.

Bei der bike.babylon kommt dagegen 503. Dazu findet man ja einiges im Web, ich habe es nicht im einzelnen gelesen, weil Du das ja genau so kannst.

Sempervivum

Guten Morgen Stef, lässt sich die Datei denn jetzt durch Direktaufruf im Browser laden?

Sempervivum

Die Empfehlung bei solchen Layout-Problemen ist immer dieselbe: Verabschiede dich von float und mache dich mit Flexlayout vertraut. Damit ist es wesentlich einfacher, die Anordnung der Element, die dir vorschwebt, zu realisieren.

Das Beispiel bei quform gefällt mir auch und es dürfte kein Problem sein, dein Formular ebenfalls in diesem Stil zu gestalten.

Sempervivum

Ein Login ohne Passwort hat gegenüber einem Select keine Vorteile aber zwei Nachteile:

1. Anfällig gegen Falscheingaben, d. h. wir sind wieder da, wo wir am Anfang waren.

2. Komplizierter in der Bedienung (zwei Schritte gegenüber einem) und der Realisierung.

Sempervivum

Ja. Leider habe ich als Webserver einen Exoten namens IIS-Express. Ich bekomme zusammen mit der Fehlermeldung eine Anleitung, wie ich der Erweiterung einen Mime-Typen hinzu fügen kann. Am besten dies in deinem Webserver tun. Oder, schnell und etwas schmutzig, versuchen, sie in .txt umzubennen und als solche zu laden.

Sempervivum

Zitat

Wenn ich die bike.babylon versuche über dem Browser aufzurufen kommt ein 404 Error (File or Directory not Fount) obwohl diese vorhanden ist

Genau so etwas hatte ich selber gerade gestern: Die Datei ist definitiv da, aber trotzdem kommt Fehler 404. Bei genauem Hinsehen und Direktaufruf im Browser wurde der Fehler dann genauer spezifiziert: 404.3 und irgend etwas in der Richtung, dass der Mimetyp nicht im Webserver spezifiziert ist (ich kann mich nicht an den genauen Wortlauf erinnern). Da .babylon keine Standard-Erweiterung ist, könnte es gut sein, dass dieses Problem auch bei dir vorliegt.

Sempervivum

So verstehe ich es besser. Ein Auswahlmenü ist schon mal ein guter Ansatz zur Lösung. Aber auch dabei gilt: Die Namen aus der DB auszulesen um das Menü zu füllen ist mit SQL ein Einzeiler, wenn sie alle in einer Tabelle sind. Allerdings müsste der Name, wenn er zum ersten Mal erfasst wird, die korrekte Form haben.

Scheint so eine Art Zeiterfassung zu werden, nicht wahr?

Beiträge von Sempervivum

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

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

Javascript-Einblendung mit CSS-Transition verbinden

Javascript-Einblendung mit CSS-Transition verbinden

Less More

Less More

sticky header funktioniert bei effekten nicht

Werte per Button in neue dynamische Tabellenzeile übernehmen

Babylon-Datei wird auf Webserver nicht gefunden

Babylon-Datei wird auf Webserver nicht gefunden

Formularelemente gestalten/Anordnen

zwei Fragen Formular und GET/POST

Babylon-Datei wird auf Webserver nicht gefunden

Babylon-Datei wird auf Webserver nicht gefunden

zwei Fragen Formular und GET/POST