Beiträge von Sempervivum

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.

Sempervivum

Oh, bin in die falsche Zeile gerutscht. Eigentlich wollte ich dies posten:

https://datatables.net/examples/api/multi_filter.html

Vergiss das globale Suchfeld oben rechts, die spaltenspezifischen Suchfelder befinden sich unter der Tabelle.

Man kann es aber auch so einrichten, dass man die Spalte mit einem Select auswählen kann, wie Du es beschrieben hast.

Sempervivum

Gut gemacht, JR!

Sempervivum

So einfach ist das:

PHP

<?php
    $images = glob("images/*.{jpg,jpeg,png,gif}", GLOB_BRACE);
    echo '<img src="' . $images[0] . '">';
?>

Wenn es lokal laufen soll, brauchst aber einen Webserver, z. B. XAMPP.

Sempervivum

Gebaut nicht, aber das von CSS-Tricks läuft bei mir. Ich vermute, dieses Skript ist deshalb so kompliziert, weil nicht jeder Browser Drag&Drop unterstützt und man deshalb eine Rückfallebene eingebaut hat.

Sempervivum

Ich bevorzuge ja das Flexlayout:

HTML

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

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

<body>
    <style>
        main {
            display: flex;
            flex-direction: row;
            width: 100vw;
        }

        .container.left {
            display: flex;
            flex: 1 1 33%;
            flex-direction: column;
            align-items: center;
            background-color: yellow;
        }

        .container.right {
            display: flex;
            flex: 1 1 66%;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: center;
            background-color: lightgrey;
        }

        .box.left, .box.right {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header1 {
            width: 80%;
            height: 30px;
            background-color: black;
            text-align: center;
            margin-left: 1.5%;
            border-radius: 15px;
            margin-top: 5px;
            font-size: 20px;
            color: white;
        }

        .button {
            width: 150px;
            height: 100px;
            background-color: white;
            margin-left: 5px;
            margin-top: 0px;
            margin-bottom: 5px;
            border-radius: 20px;
            text-align: center;
            font-size: 18px;
            opacity: 0.8;
        }

        @media only screen and (max-width: 550px) {
            .container.right, .container.left {
                flex: 1 1 50%;
            }
            .box.left, .box.right {
                flex: 1 1 100%;
            }
        }
    </style>
    <header class="allgemein">Intranet
        <a href="Intranet.html">
            <div class="logo"></div>
        </a>
        <a href="Intranet.html">
            <div class="exe"></div>
        </a>
    </header>
    <main>
        <div class="container left">
            <div class="box left">
                    <p class="header1">Links</p>
                    <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-word"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box left">
                    <p class="header1">Links</p>
                    <div class="button">hallo</div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
        </div>
        <div class="container right">
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
            <div class="box right">
                <p class="header1">Links</p>
                <div class="button">
                    <div class="header2">Konstruktions- richtlinien
                    </div>
                    <div class="datei-ordner"></div>
                </div>
                <div class="button">hallo</div>
                <div class="button">hallo</div>
            </div>
        </div>
    </main>

</body>

</html>

Alles anzeigen

Sempervivum

Zitat

nur dass ich einen bestimmten Ordner angebe

Das erlaubt Javascript nicht. Du musst jedes Mal die Bilder interaktiv auswählen.

Sempervivum

Dafür würdest Du einen lokalen Webserver und PHP benötigen. Die Bilder kannst Du dann mit glob() einlesen. Dabei werden sie gleich sortiert, so dass Du das neueste anzeigen kannst.

Sempervivum

Die PHP-Seite wird auch hier beschrieben:

http://php.net/manual/de/feat…post-method.php

Sempervivum

Dafür gibt es ein mächtiges Plugin:

https://datatables.net/examples/api/multi_filter_select.html

Features, die man nicht braucht, kann man abschalten, z. B. das Sortieren:

https://datatables.net/examples/basic_init/filter_only.html

Sempervivum

Ich habe es mal im Opera getestet und kann die Anzeige im HTML-Inspektor nicht finden. Deshalb denke ich, dass hier Handarbeit angesagt ist.

Ich habe mal in meinen Testdateien gesucht und dies gefunden:

Code

        <div class="wrtt tooltips">
            <input class="tooltips" pattern="^[0-9]*$" />
            <span>Falsche Eingabe</span>
        </div>
        <div class="wrtt tooltips">
            <input class="tooltips" pattern="^[0-9]*$" />
            <span>Falsche Eingabe</span>
        </div>
        <style>
            .wrtt.tooltips {
                margin-top: 20px;
                position: relative;
                display: inline-block;
            }

                .wrtt.tooltips span {
                    position: absolute;
                    width: 140px;
                    color: #FFFFFF;
                    background: salmon;
                    height: 30px;
                    line-height: 30px;
                    text-align: center;
                    border-radius: 6px;
                }

                    .wrtt.tooltips span:after {
                        content: '';
                        position: absolute;
                        bottom: 100%;
                        left: 50%;
                        margin-left: -8px;
                        width: 0;
                        height: 0;
                        border-bottom: 8px solid salmon;
                        border-right: 8px solid transparent;
                        border-left: 8px solid transparent;
                    }

            input.tooltips + span {
                visibility: visible;
                opacity: 0.8;
                top: 34px;
                left: 50%;
                margin-left: -76px;
                z-index: 999;
            }

            input.tooltips:valid + span {
                visibility: hidden;
            }
        </style>

Alles anzeigen

Nur CSS, zeigt den Fehler sofort bei der Eingabe an. Will man ihn erst beim Submit anzeigen, muss man wahrscheinlich noch etwa Javascript hinzu fügen. Das kann man dann beliebig gestalten und positionieren.

Sempervivum

Dann versuchen wir es mit onchange und einer for-Schleife:

Code

        relselect.onchange = function() {
           var dataselect = document.listForm.data;
           dataselect.innerHTML = '';
           var cdata = data[this.options[this.selectedIndex].innerHTML]
           for (var i = 0; i < cdata.length; i++) {
               var item = cdata[i];
               var opt = new Option(item.Name);
               opt.setAttribute("data-telefon", item.Telefon);
               dataselect.appendChild(opt);
           };
        };

Alles anzeigen

Sempervivum

Ich habe mal einen Vorschlag ohne jQuery ausgearbeitet:

Code

<form name="listForm">
        <select name="relation">
        </select>
        <select name="data">
        </select>
    </form>
    <script>
        var data = {
            '100': [
                {Name:'Bernd', Telefon: '00011'},
                {Name:'Frank', Telefon: '00014'}
            ],
            101: [
                {Name:'Klaus', Telefon: '00012'}
            ],
            102: [
                {Name:'Dieter', Telefon: '00013'}
            ]
        };
        document.listForm.relation.options[document.listForm.relation.length] = new Option('100');
        document.listForm.relation.options[document.listForm.relation.length] = new Option('101');
        document.listForm.relation.options[document.listForm.relation.length] = new Option('102');
        var relselect = document.listForm.relation;
        relselect.addEventListener("change", function() {
           var dataselect = document.listForm.data;
           dataselect.innerHTML = '';
           data[this.options[this.selectedIndex].innerHTML].forEach(function (item, idx) {
               var opt = new Option(item.Name);
               opt.setAttribute("data-telefon", item.Telefon);
               dataselect.appendChild(opt);
           });
        });
        var e = document.createEvent('HTMLEvents');
        e.initEvent("change", false, true);
        relselect.dispatchEvent(e);
    </script>

Alles anzeigen

Prüfe, ob es das ist, was Du brauchst. Die Definition der Daten habe ich so geändert, dass der Zugriff möglichst einfach ist.

Beiträge von Sempervivum

Website Layout geht nicht

Durchsuchbare Tabelle

Durchsuchbare Tabelle

Zeichen Anzahl im Textfeld begrenzen

Durchsuchbare Tabelle

Durchsuchbare Tabelle

Durchsuchbare Tabelle

Kontaktformular Tutorial

Durchsuchbare Tabelle

Schräge Striche in die Webseite bekommen

das aktuellste Bild aus Ordner im Browser anzeigen

Upload und Download

Positionierung von Kacheln

das aktuellste Bild aus Ordner im Browser anzeigen

das aktuellste Bild aus Ordner im Browser anzeigen

Upload und Download

Durchsuchbare Tabelle

[JS][CSS] setCustomValidity

Durchsuchen eines Arrays und Werte ausgeben

Durchsuchen eines Arrays und Werte ausgeben