Beiträge von Sempervivum

Sempervivum

Mit Gridlayout ist das recht einfach, hier eine Demo:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Zwei-Spalten-Layout mit Grid</title>
    <style>
        body {
            margin: 0;
        }

        .grid-2-cols {
            margin-left: 3em;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1em 1em;
        }

        section {
            padding: 0.5em;
        }
    </style>
</head>

<body>
    <section>
        <h1>Die Hauptüberschrift</h1>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua.
        </p>
    </section>
    <div class="grid-2-cols">
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
    </div>
</body>

</html>

Alles anzeigen

Ich verstehe deine Frage erst Mal so, dass Du dieses Layout haben möchtest. Wenn Du auch das "Weitere Ergebnisse ...:" haben willst, muss man das noch etwas erweitern.

Sempervivum

Bootstrap für das Layout ist heute überflüssig, denn es gibt Grid und Flex.

Sempervivum

Das Metatag mit dem charset ist nur die eine Seite der Medaille. Du musst deine Dateien aber auch in UTF-8 speichern, sonst hilft das nichts.

Sempervivum

Wie Axel es gemacht hat, sehe ich, aber nicht deinen Code. Posten diesen doch mal.

Sempervivum

Zitat

Der Befehl wird dadurch schon ganz schön aufwändig:

Das trifft allerdings zu Wenn Du dagegen mein Posting nicht ignorierst, ist es für jeden Button ein Einzeiler, wie bisher, plus ein paar Zeilen CSS, diese aber nur einmal für alle Buttons.

Sempervivum

Ich würde anders herum vorgehen: Es bei dem a-href-Tag belassen, das button-Tag weglassen und das a-href-Tag mit CSS so gestalten, dass es wie ein Button aussieht. Wird ebenfalls so empfohlen, z. B. bei Stackoverflow.

Sempervivum

Zitat

Dies ist eine Code Competition bei der ich nur JavaScript verwenden darf.

Das erklärt natürlich einiges. Ich hatte mich schon gewundert, warum Du dafür keine serverseitige Lösung andenkst, aber dachte "er wird schon wissen, was er tut"

Sempervivum

Ich habe zwar keine Ahnung von Firebase aber mit solchen asynchronen Vorgängen ist es immer gleich: Dort wo Du die Liste generierst, bist Du nicht direkt in der Funktion readData sonden in der anonymen Funktion des then. Notierst Du dort return, verlässt Du letztere Funktion mit diesem Rückgabewert aber nicht readData. Du musst bei dem asynchronen Konzept bleiben und deinen weiteren Code in der anonymen Funktion notieren und ausführen. Ggf. damit es eleganter ist und falls die Funktion readData universeller sein soll, diesen Code in einer Funktion als Callback übergeben.

Sempervivum

Der Code ist jederzeit zugänglich durch Rechtsklick - Seitenquelltext anzeigen o. ä. aber hier ist er nochmal:

HTML

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

<head>
    <meta charset="utf-8" />
    <title>Swipe Demo</title>
    <style>
        body {
            margin: 0;
        }

        #img-container {
            width: 100%;
            display: flex;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }

        #img-container img {
            width: calc(100vmin - 20px);
            height: calc(100vmin - 20px);
            object-fit: contain;
            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">
        <img src="images/bild4.jpg">
        <img src="images/bild5.jpg">
        <img src="images/buddenbrookhaus_01.jpg">
        <img src="images/burgtor_01.jpg">
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

Vielleicht so:

http://localhost:8080/_HP-Subdomain/…vertically.html

Sempervivum

Ich bin zwar nicht Sailor aber ich bin ein wenig verwirrt: Ganz am Anfang hast Du von vertikalem Scrollen geschrieben und auch bei dem Link dort wird vertikal gescrollt. Aber zuletzt geht es um horizontales Scrollen?

Für des horizontale habe ich vor ein paar Tagen für einen anderen Thread so etwas gemacht:

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

Funktioniert auch auf Touch-Geräten durch Wischen.

Sempervivum

Zitat

Wären die Formulare dann auch einzeln Speicherbar?

Dafür müsstest Du den Dateinamen der Zieldatei angeben. Entweder durch Eingabe durch den Benutzer (fehleranfällig) oder indem Du ein Select dafür anlegst. Dann braucht es das Formular nur einmal zu geben, voraus gesetzt, die Dateien sind alle gleich aufgebaut.

Sempervivum

Zitat

wenn ich zb. 20 Bilder in einer Thumbnail -ansicht untereinander habe und zb. auf das 9. klicke, wie kann dann das 9. Bild kommen und ich in beide Richtungen swipen, also vor zum 1. und bis zum letzten.

Das lässt sich machen, wenn man mit Ankern arbeitet:

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

Allerdings hat man dann nicht dieses schöne weiche Scrollen.

Zitat

Oder tüfteln wir da grad an etwas herum, für das es coole dienste wie eben zb. fancybox gibt ?

Das kann gut sein: Ich kenne da ein Skript namens Swiper, wo man die Galerie formatfüllend anlegen kann und ebenfalls durch Wischen navigieren:

https://swiperjs.com/demos/#thumbs_gallery

Wie Du siehst hat man auch dieses weiche Scrollen wenn man auf ein Thumbnail klickt. Außerdem lässt sich diese Galerie auch am PC durch Wischen mit der Maus bedienen. Ich habe schon Benutzer kennen gelernt, die es vom Handy kannten und erwarteten, dass es auch am PC funktioniert.

Sempervivum

Ich habe hier mal zwei Varianten zusammen gestellt, wie man etwas über ein Bild legen kann. Was dort Text ist, wäre bei deinem Anwendungsfall das Siegel. Versuche, das auf deine Seite zu übernehmen.

https://jsfiddle.net/Sempervivum/k84scz1a/25/

Sempervivum

Zitat

wie ich hunderte Meetings im Localstorage abspeichern kann

Für größere Datenmengen ist Localstorage weniger geeignet, aber es gibt eine Alternative: IndexedDB:

https://developer.mozilla.org/de/docs/Web/API/IndexedDB_API

Sempervivum

Hallo Sascha, willkommen im Forum!

Selbstverständlich ist das möglich. Eine Template-Datei anlegen mit Platzhaltern. Gängig sind dabei doppelte geschweifte Klammern:

{{datum}}

Und dann ein Formular, wo es für jeden Wert ein Eingabefeld gibt. Beim Abschicken dann mit PHP die Template-Datei laden, die Platzhalter ersetzen und unter dem Zielnamen speichern

Sempervivum

Hallo Olli,

ich bin mal folgender Maßen vorgegangen: Das letzte Wort, d. h. hinter Leerzeichen oder <br> ermitteln und prüfen, ob es in eine Zeile passt. Wenn nicht, Hinweis an den Benutzer ausgeben. Hat man den Fehlerfall erst Mal erkannt, kann man auch andere Reaktionen programmieren, z. B. zwangsweise einen Zeilenumbruch einzufügen.

Wenn das Wort passt, kann man ganz normal beim ersten Leerzeichen vom Ende aus gesehen einen Zeilenumbruch einfügen.

HTML

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

<head>
    <meta charset="utf-8" />
    <title>Automatic Wrapping</title>
    <style>
        #text-container,
        #help-container {
            display: inline-block;
            border: 2px solid lightblue;
            min-height: 1em;
        }

        #text-container {
            width: 200px;
        }

        #help-container {
            min-width: 200px;
        }
    </style>

</head>

<body>
    <div id="text-container" contenteditable="true"></div>
    <div id="help-container"></div>
    <textarea id="help-textarea"></textarea>

    <script>
        const container = document.getElementById('text-container');
        const helpcontainer = document.getElementById('help-container');
        const textarea = document.getElementById('help-textarea');
        const maxWidth = 200;
        container.addEventListener('keyup', (event) => {
            let text = container.innerHTML;
            console.log(text);
            let helptext = '';
            for (let i = 0; i < text.length; i++) {
                helptext += text.charAt(i);
                helpcontainer.innerHTML = helptext;

                // Aktuelle Breite des Hilfscontainers ermitteln
                let currentWidth = helpcontainer.clientWidth;

                // Ist diese Breite groesser als die maximale?
                if (currentWidth > maxWidth) {
                    // Jetzt ermitteln wir das letzte (u. U. sehr lange) Wort
                    helptext2 = helptext.match(/(\s|<br>)([^\s]+)$/)[2];
                    // und tragen es in den Hilfscontainer ein
                    helpcontainer.innerHTML = helptext2;
                    // Ist die Breite des Hilfscontainers bzw. die Breite
                    // des letzten Wortes kleiner oder gleich der max. Breite?
                    if (helpcontainer.clientWidth <= maxWidth) {
                        // Alles OK: Zeilenumbruch beim letzten Leerzeichen einfuegen
                        helptext = helptext.replace(/\s([^\s]+)$/, '<br>$1');
                    } else {
                        // Das Wort ist zu lang und passt nicht in die Zeile:
                        // Hinweis an den Benutzer
                        console.log('Das Wort ' + helptext2 + ' ist zu lang');
                        // Schleife abbrechen, damit der Hinweis nicht wiederholt wird
                        break;
                    }
                }
            }
            textarea.value = helptext;
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

So etwas kann man sehr gut mit vue.js machen:

https://vuejs.org/v2/cookbook/us…nsume-apis.html

Dann brauchst Du kein $.get weil das Holen des JSON durch axios erledigt wird.

Da Du schreibst, dass Du die Daten mit einer Schleife verarbeitest, brauchst Du auch mit Vue eine Iteration. Das wird hier beschrieben:

https://vuejs.org/v2/guide/list.html

Sempervivum

Möglicher Weise kann man das irgend wie retten, indem man nur den fraglichen Header überarbeitet aber dazu müsste man das HTML und das CSS im Zusammenhang sehen. Hast Du eine URL?

Sempervivum

So sieht das HTML schon entschieden besser aus. Perfekt wäre es, wenn Du es nicht als Screenshot sondern als Text in Code-Tags, das </> in der Werkzeugleiste oben, posten würdest.

Dann habe ich vorhin bemerkt, dass mir bei der Formulierunng in meinem Posting #4 ein Fehler unterlaufen ist. Der letzte Satz muss lauten:

Zitat

Und dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container anwenden musst und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.

Das was jetzt fett geschrieben ist fehlte.

Damit das Ganze funktioniert, müsste das HTML etwa so aussehen:

Code

<div class="align-vertical-center">
    <section>
        <h1>Say Hallo</h1>
        <!-- und der ganze Rest mit u. a. der Social-Buttons -->
    </section>
    <form>
        <!-- hier die Formularelementd -->
    </form>
</div>

und das CSS so:

Code

div.align-vertical-center {
    display: flex;
    align.items: center;
}

Hier habe ich natürlich nur das angegeben, worauf es ankommt.

Das div.align-vertical-center ist der Flex-Container und section und form die Flex-Items.

Das align-items: center; wirkt nur auf die direkten Kinder des Flex-Containers, die Flex-Items.

Beiträge von Sempervivum

Layout für Anzeige der Suchmaschiene

Bootstrap verwenden

Umlaute falsch angezeigt auf PHP Seiten

Verschachteln von Listen in HTML5?

Input statt Button: Keine Argumente

Input statt Button: Keine Argumente

Meetingplaner

Array mit Objekten zurückgeben

Vertikale Bildergalerie zum Scrolen

Vertikale Bildergalerie zum Scrolen

Vertikale Bildergalerie zum Scrolen

HTML mit Platzhaltern "automatisieren"

sticky header funktioniert bei effekten nicht

[ERLEDIGT] Probleme beim Zentrieren von übereinanderliegenden Bildern

Meetingplaner

HTML mit Platzhaltern "automatisieren"

Textarea Zeilenumbruch

Javascript Ausgabe in der Konsole in ein html dokument packen.

Darstellungsfehler Header je nach Auflösung

Formular per CSS vertikal zentrieren