Beiträge von Sempervivum

Sempervivum · 7. Februar 2018

Gut gemacht, JR!

Sempervivum · 7. Februar 2018

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 · 7. Februar 2018

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 · 7. Februar 2018

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 · 6. Februar 2018

Zitat

nur dass ich einen bestimmten Ordner angebe

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

Sempervivum · 6. Februar 2018

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 · 6. Februar 2018

Die PHP-Seite wird auch hier beschrieben:

http://php.net/manual/de/featu…le-upload.post-method.php

Sempervivum · 5. Februar 2018

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 · 5. Februar 2018

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 · 5. Februar 2018

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 · 5. Februar 2018

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.

Sempervivum · 5. Februar 2018

Zitat

lasse ich in einer Selectbox nun eine vereinfachte Auswahl durchführen ...

in der Selectbox sollte nun - wenn man z.B. Relation 100 auswählt

Zwei Fragen:

1. Ich nehme an, die erste Selectbox soll ebenfalls automatisch aufgebaut werden?

2. Soll die Auswahl in der ersten Selectbox nur die Felder 'Relation' enthalten?

Sempervivum · 5. Februar 2018

Wenn Du in den Quelltext siehst, erkennst Du, dass bei action eine URL angegeben ist:

Code

<form method="post" action="https://css-tricks.com/examples/DragAndDropFileUploading//?" enctype="multipart/form-data" novalidate class="box">

Wie die PHP-Datei aussehen muss, kannst Du dir hier ansehen:

https://www.tutorials.de/threa…upload-will-nicht.406371/

Sempervivum · 4. Februar 2018

Wenn Du wenig Zeit hast, kannst Du die Bilder ganz schnell etwas hübscher machen, indem Du sie rund machst:

http://webentwicklung.ulrichbangert.de/weltkarte-hunde.html

Sempervivum · 3. Februar 2018

Hier ist etwas für den Upload:

https://css-tricks.com/examples/DragAndDropFileUploading/

Sempervivum · 3. Februar 2018

Das geht mit border-collapse: collapse;

Sempervivum · 2. Februar 2018

vertical-align funktioniert außerhalb einer Tabellenzelle nur für Bilder. Zuverlässiger ist Flexbox und align-items:center.

Sempervivum · 2. Februar 2018

Zitat

Fragen wir mal Sempervivum .vieleicht weiss er das was ich falsch mache

Dein Vertrauen ehrt mich, Basti, aber ich möchte in dieses Thema nicht einsteigen:

1. Wenn ich dies machen müsste, würde ich Fancybox verwenden.

2. Ich bin bisher nicht in Bootstrap eingestiegen und habe es auch nicht vor.

Sempervivum · 2. Februar 2018

Mit jQuery-UI-draggable war es eine Kleinigkeit:

http://webentwicklung.ulrichba…arte-hunde-draggable.html

Einen der Köpfe mit der Maus ziehen und das Ausgabefeld links unter der Karte beobachten.

Sempervivum · 2. Februar 2018

Gute Nacht!

Beiträge von Sempervivum

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

Durchsuchen eines Arrays und Werte ausgeben

Upload und Download

Mein Traum für meine ersten Webseite

Upload und Download

allgemeine fragen zu Javascript

Lightbox gallery

Lightbox gallery

Mein Traum für meine ersten Webseite

Mein Traum für meine ersten Webseite