Beiträge von Sempervivum

Sempervivum

PS: Bastis Galerie ist vom HTML her ja schon sehr gut. Ich habe mal das CSS auf Flex umgestellt, damit sie responsiv wird und Fancybox3 hinzu gefügt:

HTML

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

<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<body>
    <style>
#wrapper {
            max-width: 600px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin: auto;
        }
        figure {
            margin: 0.5em;
            flex-basis: calc(33% - 1em);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        figure img {
            width: 100%;
            height: auto;
            min-height: 1px;
        }
        figure a {
            min-height: 1px;
        }
        figure figcaption {
            text-align: center;
        }
    </style>

    <div id="wrapper">
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (1).jpg" alt="bild2" />
            <figcaption>
                Text Bild 1
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (2).jpg" alt="bild2" />
            <figcaption>
                Text Bild 2
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (3).jpg" alt="bild1" />
            <figcaption>
                Text Bild 3
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (4).jpg" alt="bild1" />
            <figcaption>
                Text Bild 4
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (5).jpg" alt="bild1" />
            <figcaption>
                Text Bild 5
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (7).jpg" alt="bild1" />
            <figcaption>
                Text Bild 6
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (8).jpg" alt="bild1" />
            <figcaption>
                Text Bild 7
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (9).jpg" alt="bild1" />
            <figcaption>
                Text Bild 8
            </figcaption>
        </figure>
        <figure>
            <img class="bild" src="http://lupus.bplaced.net/fotos/t (10).jpg" alt="bild1" />
            <figcaption>
                Text Bild 9
            </figcaption>
        </figure>
    </div>
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
        <script>
        $("figure img").each(function(idx, item) {
            var url = $(this).attr("src");
            var caption = $(this).next("figcaption").text();
            $(this).wrap('<a></a>');
            var atag = $(this).parent();
            var caption = atag.next("figcaption").text();
            atag.attr({href: url, "data-fancybox": "", "data-caption": caption});
        })
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Zitat

"transform-origin": "0 0" das sagt doch den Left ,Top Punkt fest oder? links oben in Ecke.?

So verstehe ich es auch. Bin aber noch nicht allzu tief in dieses Thema eingestiegen.

Sempervivum

Zitat

Ist damit eine Bildbox, wie von basti1012 realisiert, machbar? 3 Thumbnails in Reihe, n Reihen . Bei Klick großes Foto?

Wovon ich spreche, ist eine Lightbox. Davon gibt es diverse, ich empfehle Fancybox. Diese erledigt das Aufpoppen des Fensters mit dem großen Bild. Der Aufbau der Galerie mit Zeilen und Spalten ist nicht Bestandteil davon, diese kannst Du lassen, wie sie jetzt sind.

Sempervivum

Ich habe vor längerer Zeit mal so etwas gemacht und da war es ziemlich einfach:

https://jsfiddle.net/Sempervivum/nqn7402b/2/

Wie Du siehst, habe ich "transform-origin": "0 0", dann musste ich gar nichts verschieben.

Sempervivum

1. Wenn ich es richtig sehe, sind lengthMenu und pageLength keine Elemente des language-Objektes sondern direkte Optionen von datatables.

2. Damit man url nutzen kann, muss man die Datei auf dem eigenen Server bereit stellen. Einfacher als das ist es wahrscheinlich, das language-Objekt direkt in den Optionen anzugeben, es sind ja nicht so viele Elemente. Hat man viele Tabellen mit datatables kann es jedoch angebracht sein, sie zentral einer Datei zu halten und mit URL zu laden.

Dies funktioniert bei mir:

Code

        table = $('table#example').DataTable({
            //"paging": false,
            "language": {
                "sEmptyTable": "Keine Daten in der Tabelle vorhanden",
                "sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
                "sInfoEmpty": "0 bis 0 von 0 Einträgen",
                "sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
                "sInfoPostFix": "",
                "sInfoThousands": ".",
                "sLengthMenu": "_MENU_ Einträge anzeigen",
                "sLoadingRecords": "Wird geladen...",
                "sProcessing": "Bitte warten...",
                "sSearch": "Suchen",
                "sZeroRecords": "Keine Einträge vorhanden.",
                "oPaginate": {
                    "sFirst": "Erste",
                    "sPrevious": "Zurück",
                    "sNext": "Nächste",
                    "sLast": "Letzte"
                },
                "oAria": {
                    "sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
                    "sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
                },
                select: {
                    rows: {
                        _: '%d Zeilen ausgewählt',
                        0: 'Zum Auswählen auf eine Zeile klicken',
                        1: '1 Zeile ausgewählt'
                    },
                },
                "lengthMenu": [25, 50, 100, 200],
                "pageLength": 25,
                "ordering": false,
                "info": false
            },
            "lengthMenu": [25, 50, 100, 200],
            "pageLength": 25,
            "ordering": false,
            "info": false
        });

Alles anzeigen

Sempervivum

Zitat

nach den verkleinern passt die position nicht

Die Position kannst Du mit transform-origin steuern. Am besten forschst Du in dieser Richtung mal nach.

Zitat

Oder meinst du den wo die Uhr drine ist <div id="haupt">

Genau, den meinte ich. Nicht main sondern haupt.

Sempervivum

Da gibt es doch fertige Plugins wie Fancybox, die so etwas wie Bildbeschreibung von Haus aus unterstützen. Mir unbegreiflich, dass man davon keinen Gebrauch macht, sondern immer wieder von neuem das Rad neu erfindet.

Sempervivum

Es gibt einen Weg, wenn er auch nicht besonders schön ist: Mit Javascript und transform:scale() die Größe von #main an die Breite des Browserfensters anpassen. Den Skalierungsfaktor musst Du berechnen.

Sempervivum

Zitat

hast du eine Empfehlung für einen Editor für mich

Selbst bin ich gerade auf Visual Studio Code umgestiegen und sehr zufrieden. Um richtige PHP-Unterstützung zu bekommen, musste ich etwas frickeln und ein paar Plugins installieren. Aber sonst gut und nicht so ein Monster wie Visual Studio Community.

Sempervivum

Eine Idee habe ich auch: Eine Sessionvariable führen mit dem Status. Dieser kann zwei Zustände haben:

1. Vokabel anbieten

2. Eingabe des Benutzers prüfen

Zufallswert ermitteln machst Du dann nur bei 1, damit ist das ursprünglich Problem gelöst, dass bei der Prüfung der Zufallswert erneut ermittelt wird.

Sempervivum

Man müsste sich mal das generierte HTML ansehen. Wenn die Seite online ist, dann poste doch mal die URL und beschreibe, wo man diese Testarea findet.

Sempervivum

Einfach ganz am Anfang. Ich habe es mit dem HTML-Inspektor getestet und hatte sofort drei Spalten ohne noch etwas anpassen zu müssen.

Sempervivum

Man kann sich diese ganze Rechnerei ersparen durch dieses CSS:

Code

* {
    box-sizing: border-box;
}

Dann werden die Abmessungen so berechnet, wie man es für das Layout erwartet.

Sempervivum

PS: Reihenfolge und Gestaltung der Bedienelemente kann man auch über eine Option steuern:

https://datatables.net/reference/option/dom

Sempervivum

Wenn sie direkt beieinander sind, hast Du wahrscheinlich für beide das gleiche float angegeben. In dem Fall kannst Du einen Abstand durch ein margin herstellen.

Zitat

Und wo kann ich die Anzahl entries, die angezeigt werden sollen ändern?

Werte in der Dropdown-Liste:

https://datatables.net/reference/option/lengthMenu

Anfangswert:

https://datatables.net/reference/option/pageLength

Zitat

Wie mache ich es, dass ich das ganze auf eine Tabelle mit mehr Kolumnen übertragen kann?

Ich erwarte, dass das selbst anpassend ist, d. h. die Parameter werden aus der Tabelle gelesen und daraus die Suchfelder aufgebaut.

Ist jedenfalls in diesem Beispiel so, wenn man sich das JS ansieht:
https://datatables.net/examples/api/multi_filter.html

Zitat

Und die Beschriftung?

Findest Du ebenfalls in den Optionen unter "Internatianalization":
https://datatables.net/reference/option/

Sempervivum

Hiernach:

https://developer.mozilla.org/de/docs/Web/HTML/Element/textarea

gibt es maxlength nur in HTML5. Hast Du auch den entsprechenden Doctype?

Sempervivum

Ich hatte es im HTML-Inspektor getestet. Jetzt habe ich es noch Mal in eine Testseite eingetragen und auch dort funktioniert es einwandfrei.

Sempervivum

Das ist häufig so bei Bibliotheken: Elemente werden dynamisch durch Javascript angelegt, dann sind sie im HTML-Inspektor sichtbar aber nicht im Quelltext.

Das CSS hatte ich getestet, vielleicht funktioniert es bei dir nicht, weil die Klassen anders sind. Ich untersuche es mal.

Sempervivum

Die Positionen kannst Du sehr leicht vertauschen, indem Du im CSS bei float left und right vertauschst:

Code

.dataTables_wrapper .dataTables_filter {
    float: left;
    text-align: right;
}
.dataTables_wrapper .dataTables_length {
    float: right;
}

Sempervivum

Sehr gute Idee, dieses Tut zu schreiben. Fragen bzg. Kontaktformular werden ja häufig gestellt und dann kann man auf diesen Thread verweisen und muss nicht jedes Mal bei Adam und Eva anfangen.

Beiträge von Sempervivum

Fotogalerie

Inhalt eines Containers reponsiv machen

Fotogalerie

Inhalt eines Containers reponsiv machen

Durchsuchbare Tabelle

Inhalt eines Containers reponsiv machen

Fotogalerie

Inhalt eines Containers reponsiv machen

nach include werden Leerzeilen eingefügt und Dateiname mit Variable ergänzen

PHP Formular Seite laden verhindern

Zeichen Anzahl im Textfeld begrenzen

Website Layout geht nicht

Website Layout geht nicht

Durchsuchbare Tabelle

Durchsuchbare Tabelle

Zeichen Anzahl im Textfeld begrenzen

Durchsuchbare Tabelle

Durchsuchbare Tabelle

Durchsuchbare Tabelle

Kontaktformular Tutorial