Beiträge von Sempervivum

... dieses ist das, woran ich mich erinnere:

https://www.dropzonejs.com

Muss man prüfen, ob das Sortieren leicht zu integrieren ist, oder ob man nur das Drag&Drop benutzen kann und den Rest behält, wie es schon ist.

Zitat

ein Array zu erzeugen und dann in PHP die Dateien erst zu löschen

Das ist natürlich das einfachste, hat aber den Nachteil, dass die gelöschte(n) Datei(en) erst Mal hochgeladen werden müssen.

Was das Drag&Drop betrifft, so kenne ich zwar keine Erklärung oder ein Tutorial aber ich habe da ein Beispiel. Muss es nur heraussuchen ...

Das wird hier diskutiert:

https://stackoverflow.com/questions/1694…utfile/16943684

Scheint machbar zu sein mit dem Objekt DataTransfer. Wenn Du nicht zum Ziel kommst, melde dich wieder.

Man kann die Animationen auch kombinieren und auf das selbe Element anwenden:

https://stackoverflow.com/questions/2698…t-the-same-time

Du brauchst zwei Animationen: Einmal die stufenweise, die Du schon hast und dann eine kontinuierliche um den Vogel horizontal zu bewegen. Dazu musst Du dem Element die Eigenschaft position:absolute; geben und die Eigenschaft left statt background-position animieren. Gibt auch noch andere Möglichkeiten, z. B. Bewegung durch Animation von transform:translate();

Da Du das CSS ausgelagert hast, vermute ich, dass es am Cache liegt. Mit Strg+F5 kannst Du die Seite einschl. externer CSS und Javascript-Dateien neu laden.

Siehe meine Kommentare

body img{
    width:18%;
    height: auto;
}

@media only screen and (max-width: 800px) {
            body img {
                width: 18%; /* dies ist wirkungslos, weil es die selbe Breite
                            definiert wie oben. Besser 30% */
            }
        }
@media only screen and (max-width: 450px) {
            body img {
                width: 30%; /* und hier 45% */
            }
        }

Ich hatte die Mediaqueries getestet und es hatte funktioniert: Abhängig von der Fensterbreite wurden 5, 3 oder 2 Bilder in einer Reihe angezeigt. Poste am besten noch Mal dein CSS.

Da Du das mit den Mediaqueries nicht verstehst, gebe ich dir hier mal einen Beispielcode:

        @media only screen and (max-width: 800px) {
            body img {
                width: 30%;
            }
        }

        @media only screen and (max-width: 450px) {
            body img {
                width: 45%;
            }
        }

Die Umschaltpunkte (max-width) kannst Du so anpassen, dass das Verhalten deinen Vorstellungen entspricht.

Dann vermute ich, dass Du meinen Hinweis auf Mediaqueries überlesen hast

Zitat

dass auch die Bilder welche mit php ausgegeben werden ebenfalls ungefähr auf beiden Bildschirmen die ungefähr in etwa vom Verhältnis her gleich groß sind

Wenn ich das richtig verstehe, müsste es dein Problem lösen, wenn Du mit Mediaqueries (siehe Posting #29) die Breite (in Prozent) der Bilder umschaltest, z. B. auf 30% bei schmalerem Fenster, so dass dann nur noch drei in einer Reihe sind.

Ich habe eine Weile über diesem gerätselt:

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

Zitat

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

und

Zitat

If the initial value of your v-model expression does not match any of the options, the <select> element will render in an “unselected” state.

aber es schließlich verstanden. Dies funktioniert:

    <div id="wrapper2">
        <select v-model="eventDate" name="test1" required size="1">
            <option selected>Datum1</option>
            <option>Datum2</option>
            <option>Datum3</option>
            <option>Datum4</option>
        </select>

        <select v-model="room" name="test2" size="1">
            <option selected>Raum1</option>
            <option>Raum2</option>
            <option>Raum3</option>
            <option>Raum4</option>
        </select>
        {{eventDate}}{{room}}
    </div>
    <script>
        var formular = new Vue({
            el: "#wrapper2",
            data: {
                eventDate: 'Datum1',
                room: 'Raum1',
            }
        });
    </script>

Versuche es anders herum, erst umlaut, dann toUpperCase.

PS: Ich bemerke gerade, dass .event als Container semantisch wohl unpassend ist, obwohl es so funktioniert. Du kannst es ja noch ein wenig umorganisieren, z. B. dem Container die ID wrapper geben und die Klasse event den a-href-Elementen zuweisen.

https://codepen.io/Sempervivum/pen/NmZYXy

Der Kern des Problems ist, dass Du den #wrapper zum Flexcontainer gemacht hast. Dieser enthält jedoch nur ein einziges Flexitem, nämlich .event und darin sind die a-href-Elemente versammelt. Vue organisiert das anscheinend etwas anders als Du es dir vorgestellt hast. display:flex wird nicht vererbt, d. h. Du musst .event zum Flexcontainer machen durch display:flex, dann funktioniert es.

https://codepen.io/Sempervivum/pen/zXVWqy

Den #wrapper habe ich gelöscht, weil man ihn dann nicht mehr braucht.

Ungetestet müsste es so aussehen:

<script>
var smaller = 0;
for (var i = 0; i < numbers.length; i++) {
    var cnumber = numbers[i];
    if (cnumber < random && cnumber > smaller) smaller = cnumber;
}
</script>

Häufiges Problem, wenn man ein Element fixiert: Gib dem body ein geeignetes margin-bottom.

HIer:

API in HTML einfügen

findest Du in Post #12 ein Beispiel, wie Du so etwas machen kannst.

Ich empfehle gern Fancybox 3 weil es responsiv ist und mit Touch-Gesten bedient werden kann:

https://fancyapps.com/fancybox/3/

Interessante Info, ich habe mich immer gewundert, warum mein VS-Code immer das schließende Tag gelöscht hat. Das ist jetzt wohl die Erklärung.