Beiträge von Sempervivum

Sempervivum

Dies:

Zitat

Failed to load resource: the server responded with a status of 404 (Not Found)

sagt eindeutig aus, dass die Datei, die Du lesen wolltest, nicht gefunden wurde. In dem Fall liefert der Server eine Fehlerseite aus und weil diese nicht im JSON-Format ist, kommt es zu dem Fehler:

Zitat

Uncaught (in promise) SyntaxError: Unexpected token } in JSON at position 112

Du hast ja das Problem, das AndreasB in Posting #2 beschrieben hat. Korrigiere das zunächst. Wie Du über die Elemente eines Objektes iterieren kannst, kannst Du hier nachlesen:

https://wiki.selfhtml.org/wiki/JavaScrip…_.22for...in.22

Liegt denn diese JSON-Datei wirklich lokal auf deinem Server?

Sempervivum

PS: Man kann das auch mit einer Tabelle mit relativ geringem Aufwand responsiv machen:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial=scale=1.0" />
    <title>
        Responsive Table
    </title>
    <style>
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        table tr {
            background: #f8f8f8;
            border: 1px solid #ddd;
            padding: .35em;
        }

        table th,
        table td {
            padding: .625em;
            text-align: center;
        }

        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        @media screen and (max-width: 800px) {

            table {
                border: 0;
            }

            table thead {
                display: none;
            }

            table tr {
                border-bottom: 3px solid #ddd;
                display: block;
                margin-bottom: .625em;
            }

            table td {
                border-bottom: 1px solid #ddd;
                display: block;
                font-size: .8em;
                text-align: right;
            }

            table td:last-child {
                border-bottom: 0;
            }

            @media screen and (min-width: 701px) and (max-width: 800px) {
                tbody {
                    display: grid;
                    grid-template-columns: 2fr 1fr 1fr;
                }


                tbody tr:nth-child(3n-2) td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }

            }

            @media screen and (min-width: 561px) and (max-width: 700px) {
                tbody {
                    display: grid;
                    grid-template-columns: 2fr 1fr;
                }

                tbody tr:nth-child(2n-1) td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }

            @media screen and (max-width: 560px) {
                tbody {
                    display: grid;
                    grid-template-columns: 1fr;
                }

                tbody td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
            }
        }
    </style>
</head>

<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <td></td>
                <th>7:00</th>
                <th>8:00</th>
                <th>9:00</th>
                <th>10:00</th>
                <th>11:00</th>
                <th>12:00</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Montag</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
            </tr>
            <tr>
                <td>Dienstag</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
            </tr>
            <tr>
                <td>Mittwoch</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Kiesertraining</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
            </tr>
            <tr>
                <td>Donnerstag</td>
                <td>Workout</td>
                <td>Kiesertraining</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
            </tr>
            <tr>
                <td>Freitag</td>
                <td>Workout</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Workout</td>
                <td>Rückenschule</td>
                <td>Kiesertraining</td>
            </tr>
        </tbody>
    </table>
    <script>
        const tbl = document.querySelector('table');
        const headCells = tbl.rows[0].cells;
        for (let i = 1; i < tbl.rows.length; i++) {
            const row = tbl.rows[i];
            for (let j = 0; j < row.cells.length; j++) {
                const cell = row.cells[j];
                cell.setAttribute('data-label', headCells[j].textContent);
            }
        }
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Die Lösung findet man, wenn man nachliest, wie device-width definiert ist:

Zitat von Selfhtml

Das Merkmal device-width (Geräte-Breite) beschreibt die Breite des Ausgabegerätes, z. B. Breite eines Bildschirms in Pixel.

Testet man das auf einem großen Monitor, indem man das Browserfenster zusammen schiebt, ändert sich natürlich nicht die Breite des Bildschirms. Lösung, indem Du width statt device-width verwendest. Ich würde allerdings erwarten, dass es funktioniert, wenn man es real auf einem Smartphone testet.

Zitat

Wie kann ich jedem zweiten Child einen farbigen Background geben.

Mit :nth-child(odd) bzw. :nth-child(even) kannst Du in CSS jedes zweite Element ansprechen.

Sempervivum

Wahrscheinlich ist das alles eine Frage der Gestaltung: Auch den Slider von Cycle2 kannst Du ja mit CSS gestalten, genau so, wie Du es dir vorstellst.

Sempervivum

Zitat

Innerhalb dieses DIVs habe ich eine h1 und eine h2, die nun jedoch nebeneinander sind, weil das flex auf sie wirkt. Setze ich bei der h1 ein display:block, ändert das aber nichts. Auch ein br nach der h1 ändert nichts daran, auch nicht mit clear all.

Warum ist das so?

Wenn Du display:flex verwendest, haben die Regeln, nach denen Flex die Elemente anordnet, Vorrang. Du kannst in dem Fall die Elemente jedoch sehr einfach untereinander anordnen, indem Du flex-direction: column; hinzu fügst.

Sempervivum

Du hast Recht, den Fall, dass das Browserfenster in der Höhe klein ist aber breit, hatte ich nicht berücksichtigt. Dann fehlt wiederum das height: 100%; beim Container der Slideshow. Lässt sich aber leicht beheben, indem man die Höhe wiederum gezielt bei diesem setzt:

Code

div.cycle-slideshow {
    height: 100%;
}

Generell stiftet es ein wenig Verwirrung, dass der Container für den Pager ebenso wie der für die Slides jeweils ein div ist. Um sie besser auseinander halten zu können, könnte man für die Slides ein figure-Tag nehmen.

Sempervivum

Zitat

Ich mag' nur nicht, wenn das automatisch durchklickt. Wahrscheinlich lässt sich das irgendwo ändern

Selbstverständlich, die Doku verrät wie:

data-cycle-timeout="0"

http://jquery.malsup.com/cycle2/demo/basic.php

Dort kannst Du auch ablesen, wie Du prev-/next-Buttons hinzufügen kannst.

Sempervivum

Das liegt daran, dass die Höhe des Pagers auf 100% gesetzt ist. Weil er unten positioniert ist, ragt er nach unten heraus. Einfach die Zuweisung der Höhe weg lassen und besser auf bottom positionieren:

Code

div.cycle-slideshow, div.cycle-slideshow div {
    width: 100%;
    /* height: 100%; */
}
.cycle-pager {
    text-align: center;
    width: 100%;
    z-index: 500;
    position: absolute;
    /* top: calc(100% - 100px); */
    overflow: hidden;
    bottom: 0;
}

Alles anzeigen

Sempervivum

Stimme so weit zu, für dein Problem ist primär das CSS entscheidend.

Ich habe gerade in einem anderen Thread Cycle2 empfohlen, schau Mal, ob das etwas für dich ist:

Flexslider2 mit max. Imagebreite

Sempervivum

Was Du noch tun könntest, wäre, diesen i-Elementen gleich durch CSS die richtige Breite zu geben, dann würden die Icons zwar immer noch leicht verzögert auftauchen, aber im Umfeld würde nichts mehr zucken. Da die Breite leider vom Icon abhängig ist, wäre dieser Weg immer noch ein wenig steinig.

Sempervivum

Zitat

Ja, ich weiß, man sollte die scripts zu weniger Dateien zusammenfassen, kann ich aber nicht, da ich von java wirklich überhaupt keine Ahnung habe.

Da stimme ich nicht zu: In getrennten Dateien ist es wesentlich übersichtlicher, als wenn alles globalgalaktisch in einer einzigen Datei versammelt wäre.

Sempervivum

PS: Wie ich sehe, eignet sich diese Demo besser, um einen Pager einzubauen:

http://jquery.malsup.com/cycle2/demo/pager.php

Sempervivum

Generell erfordert Cycle2 etwas mehr Handarbeit, wenn man erweiterte Features haben will. Das ist nicht nur ein Nachteil sondern auch ein Vorteil weil man alles genau so einrichten kann wie man es sich vorstellt.

Die Seitenpunkte werden hier beschrieben unter "Timeout and pager":

http://jquery.malsup.com/cycle/int2.html

Zitat

Was bewirkt data-cycle-slides="> div">?

Das sagt dem Plugin, dass die Elemente keine Bilder sondern Divs sind.

Zitat

Ab welcher jQuery Version funktioniert das?

Die FAQs sagen dazu: "Cycle2 requires jQuery 1.7 or later."

Sempervivum

Mit Cycle2 tue ich mich etwas leichter, weil das das HTML nicht so stark umarbeitet. Hier eine Demo:

HTML

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

<head>
    <title>Cycle 2 responsive</title>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
            min-height: 0;
            margin: 0 5%;
        }
        div.cycle-slideshow,
        div.cycle-slideshow div {
            width: 100%;
            height: 100%;
        }

        div.cycle-slideshow img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>

<body>
</body>
<header>Dies ist der Header</header>
<main>
    <div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000" data-cycle-slides="> div">
        <div style="background:#fcc">
            <img src="images/dia0.jpg">
        </div>
        <div style="background:#cfc">
            <img src="images/01.png">
        </div>
        <div style="background:#ccf">
            <img src="images/AAA.png">
        </div>
    </div>
</main>
<footer>Dies ist der Footer</footer>

</html>

Alles anzeigen

Die Bilder werden mit object-fit eingepasst, das führt dazu dass seitlich oder oben und unten freier Raum entsteht. Oder man müsste in Kauf nehmen, dass etwas abgeschnitten wird.

Sempervivum

Zitat

Da wäre ich allerdings nicht drauf gekommen, da ich meine main.css nach Bootstrap lade und in der main.css habe ich für alles margin 0 definiert... Das sollte doch eig auch die Bootstrap-Stile überschreiben...dachte ich

Die Erklärung dafür, dass es das nicht tut, findest Du hier:

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#:~:text=In%20CSS%20werden%20Regelsätze%20nach,mit%20dem%20Startwert%20Null%20festgelegt.

Sempervivum

Zitat

Ich habe auch schon festgestellt, dass es am eingebundenen Bootstrap liegt, das ich später für ein Carousel verwenden möchte.

Wenn Du Bootstrap nur für das Carousel verwenden willst, dann lass es doch bei den übrigen Elementen außen vor, indem Du die betr. Klassen weg lässt, beim Footer das class="footer-resp". Allerdings hilft das nicht beim p-Element, da Bootstrap dieses ohne Klasse umgestaltet.

Generell lässt sich Bootstrap nur sinnvoll einsetzen, wenn man das Layout so akzeptiert, wie es dadurch vorgegeben ist. Möchte man individuelle Vorstellungen umsetzen, ist es einem nur im Wege.

Sempervivum

Normaler Weise müsste es so funktionieren, wie webkriecher es angegeben hat. Keine Ahnung, warum der Reader es nicht anzeigt.

AFAIK ist ein Semikolon hinter dem inline-block nicht zwingend erforderlich, aber zur Sicherheit versuche es dennoch damit:

<span style="background-color: rgb(219, 218, 211); display: inline-block;">

Ich finde da Validatoren für ePub, z. B. hier:

https://www.ebookit.com/tools/bp/Bo/eBookIt/epub-validator

Versuche mal, ob das Ergebnis dir weiter hilft.

Oder gibt es bei dem Reader irgend welche Diagnosemöglichkeiten so wie die Entwicklerwerkzeuge im Browser?

Sempervivum

Zitat

Warum um Himmels Willen rutscht die jetzt mit nach unten, die befindet sich ja außerhalb des DIV.

Das ist eines der Mysterien von CSS und läuft unter dem Begriff "collapsing margins" bzw. "zusammenfallende Außenabstände", hier wird es erklärt:
https://developer.mozilla.org/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern

Setze ich jetzt das margin-top für das div.banner auf 0 so verschwindet der obere Abstand aber dann wird sich das Problem stellen, dass dieses div.banner unter die Nav rutscht. Normaler Weise könnte man das leicht lösen, indem man die Nav auf position:sticky setzt aber hier macht einem Bootstrap einen Strich durch die Rechnung weil die Klasse zwar "sticky" heißt aber position:fixed gesetzt wird, wahrscheinlich aus Gründen der Kompatibilität mit alten Browsern. Ein Grund mehr, warum ich kein Freund von Bootstrap bin.

Sempervivum

Ich sehe da ein generelles Problem: Du hast die Breite des Textcontainers auf 66.66% eingestellt und die des Bildes auf 33.33%. Wenn man das Bild jetzt so einrichtet, dass es im Container bleibt und sich nicht nach rechts ausdehnt, wird es relativ klein und der Textcontainer ist viel höher. Ich habe das mal im HTML-Inspektor demonstriert:

html-seminar.de/woltlab/attachment/2806/

Macht man das Bild größer, z. B. 50% 50% für die beiden Container, wird es nicht besser, denn dann haben die Texte weniger Platz und nehmen noch mehr Höhe in Anspruch - die Katze beißt sich in den Schwanz. Auch wenn man die Abstände, die Du mit <br> eingestellt hast, verkleinern würde, würde es nicht viel besser.

Sempervivum

Immerhin positiv, dass Du in Eigeninitiative eine Lösung gefunden hast

Allerdings ist dieses Verfahren nicht besonders elegant und vor allem nicht änderungsfreundlich, denn jedes Mal, wenn Du im horizontalen Menü etwas hinzu fügst, musst Du auch eine weitere Funktion hinzu fügen und die vorhandenen ändern.

Besser nur eine Funktion verwenden und die Menüpunkte in einer Schleife abarbeiten:

HTML

            <ul class=vertical">
                <li><a href="#erste" onclick="showHorizontal('erste')">first</a></li>
                <li><a href="#zweite" onclick="showHorizontal('zweite')">second</a></li>
                <li><a href="#dritte" onclick="showHorizontal('dritte')">third</a></li>
            </ul>

JavaScript

        const horizontals = document.querySelectorAll('.horizontal');
        function showHorizontal(id) {
            horizontals.forEach(item => {
                if (item.id == id) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        }

So brauchst Du nur das HTML zu ändern, das Javascript ist universell.

Beiträge von Sempervivum

Object-literal & Javasript

Media Queries funktionieren nicht in Tabelle - Flexbox

Media Queries funktionieren nicht in Tabelle - Flexbox

Bootstrap Carousel mit Bild und Text

Zeilenumbruch bei h1 in Flexbox

Flexslider2 mit max. Imagebreite

Bootstrap Carousel mit Bild und Text

Flexslider2 mit max. Imagebreite

Bootstrap Carousel mit Bild und Text

Script für Fontawesome-Kit nur einmal für die Seite laden

Script für Fontawesome-Kit nur einmal für die Seite laden

Flexslider2 mit max. Imagebreite

Flexslider2 mit max. Imagebreite

Flexslider2 mit max. Imagebreite

Bootstrap irritiert meine DIVs

Bootstrap irritiert meine DIVs

Hintergrundfarbe für einen ganzen Abschnitt mit einen <p> und <span>

Background-DIV irritiert Navigation

Bootstrap Divs unterschiedlich breit

Horizontale Navigation unter Vertikaler Navigation