Beiträge von Sempervivum

Nein, nicht beim Fiddle sondern bei Codepen im CSS-Fenster. Ich habe es getestet und mit dem kompilierten CSS läuft auch das Fiddle.

Zitat

ich weiss sowieso nicht wie das geht,kann mir dabei einer helfen.

Lies zunächst mal die Beschreibung bei Selfhtml und wenn Du dann noch Fragen hast, melde dich wieder.

https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage

Das CSS in dem Codepen verwendet Less und muss kompiliert werden. Wähle in dem Auswahlmenü rechts oben im CSS-Fenster "View compiled CSS" dann wird das CSS kompiliert und Du kannst es verwenden.

Dazu musst Du den Zustand im Local- oder Sessionstorage speichern und beim Laden wieder einlesen.

Bei Checkboxes ist es relativ einfach, wenn man den Checkbox-Hack anwendet: Einer Checkbox kann man ein Label zuordnen. Die Checkbox wird unsichtbar gemacht. Klick auf das Label steuert den Zustand der Checkbox. Zustand der Checkbox steuert das Aussehen des Labels.

https://jsfiddle.net/Sempervivum/3dyrdo07/1/

Bei Selects ist es leider nicht so einfach. Hier ist es eher empfehlenswert, ein Select mit CSS und Javascript neu zu bauen. jQuery-UI hat z. B. so etwas:

https://jqueryui.com/selectmenu/

Anscheinend sind es die String-Operationen, die ihn umbringen, denn ohne die geht es relativ schnell:

<script>
        var siz = 0;
        var data = [];
        var insane = "";
        for(var i = 0; i < 255; i++) {
            for(var i2 = 0; i2 < 255; i2++) {
                for(var i3 = 0; i3 < 255; i3++) {
                    siz = siz + 1;
                    data.push(i);
                    data.push(i2);
                    data.push(i3);
                    data.push(255);
                    //insane += i + " - " + i2 + " - " + i3 + " - " + 255;
                }
            }
        }
        console.log(siz);
        //$("form#main").empty();
        //$("form#main").append("<p>" + data + "</p>");
    </script>

Was ist denn überhaupt der Sinn der Sache? So etwas kann doch kein Mensch lesen.

Auf der Suche nach der richtigen Formel bin ich auf dieses gestoßen:

http://ge-waldbroel.nw.lo-net2.de/jenders/publik…eier_Fall1.html

Mit einen Demo in Javascript.

Das wird dir wahrscheinlich auch kein besseres Ergebnis bringen als mit der jetzigen Animation. Das Problem ist, dass die Seite, wo es eingebettet ist, nicht wirklich responsiv ist:

Zitat

dass die umgebenden Container nicht der Größe des Browserfensters folgen. Deshalb ändert sich die Größe der Animation nicht, denn sie folgt mit einer Breitenangabe von 100% dem umgebenden Container.

Ach so, dann ist es sehr einfach: Du brauchst dem Alert nur ein overflow:hidden zu geben, dann wird der Tropfen außerhalb unsichtbar.

Ah so, jetzt verstehe ich, glaube ich. Du möchtest, dass der Tropfen hinter dem Alert herunter fällt, d. h. er soll vom ganzen Alert verdeckt werden?

Zitat

das er hinter den roten verschwindet und dann weg ist und nicht unter den roten wieder raus kommt.man könnte ober und unterhalbdes alerts ja noch ein div bauen wo der tropfen hinter verschwindet.

Kein Problem, ich hoffe, ich habe dich richtig verstanden:

<div id="alert">
        <div id="kopf">Das ist ein Alert</div>
        <div id="kreis"></div>
        <div id="filler1"></div>
        <div id="inhalt">Dies ist der Inhalt</div>
        <div id="filler2">
            <button id="close">Schliessen</button>
        </div>
        <img id="drop" src="https://www.mediaevent.de/javascript/img/drop.png">
    </div>
    <style>
        #alert {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 50%;
            margin: auto;
            border: 1px solid black;
            height: 50vh;
            background-color: lightgrey;
        }

            #alert > * {
                position: relative;
            }

        #drop {
            position: absolute;
            left: calc(50% - 54px);
            top: 0;
            animation: drop 4s infinite linear;
        }

        #kopf {
            align-self: stretch;
            background-color: blue;
            color: white;
            padding: 5px;
            text-align: center;
            margin-bottom: auto;
            z-index: 5;
        }

        #kreis {
            width: 100%;
            height: 30%;
            background-color: lightgreen;
            background-image: url(http://www.mediaevent.de/javascript/img/circle.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        #inhalt {
            align-self: stretch;
            text-align: center;
            background-color: lightsalmon;
            z-index: 5;
        }

        #filler1, #filler2 {
            background-color: lightgrey;
            flex-grow: 1;
            align-self: stretch;
        }

        #filler2 {
            z-index: 5;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        #close {
            margin-top: auto;
        }

        @keyframes drop {
            0% {
                top: -180px;
                opacity: 1;
            }

            90% {
                top: 100%;
                opacity: 1;
            }

            100% {
                top: 100%;
                opacity: 0;
            }
        }
    </style>

Schau mal, ob dir dies weiter hilft:

https://css-tricks.com/drag-and-drop-file-uploading/

Eigentlich um Dateien hochzuladen, ob es mit dem Drag&Drop einer Email aus Outlook funktioniert, weiß ich nicht. Konne es auch nicht testen, weil ich kein Outlook habe. Mit einer eml-Datei funktioniert es jedoch. Musste den Typ für Ajax auf "text" ändern und auf dem Server war der erste Eintrag in $_FILES leer. Ich hänge meine Testdateien mal an, dann kannst Du versuchen, ob es auch mit Drag&Drop aus Outlook funktioniert.

Zitat

heist doch center zwischen oben und unten ,,und center zwischen links und rechts oder??

hatte das schon mal öfters versucht ,hat aber nie wirkung gezeigt,da muss man wohl noch was anderes beachten damit das geht oder wie?.

Genau. Keine Ahnung, warum es bei dir nicht funktioniert hat. Am besten postest Du ein Beispiel, damit man es sich ansehen kann.

Zitat

das er hinter den roten verschwindet und dann weg ist und nicht unter den roten wieder raus kommt.man könnte ober und unterhalbdes alerts ja noch ein div bauen wo der tropfen hinter verschwindet.aber wie ich dich kenne kennst du da bestimmt nee andere lösung.

Ich denke, ein zusätzliches div ist schon der richtige Ansatz. Etwas anderes fällt mir auch nicht ein.

Ich war mir nicht sicher, ob das Flexlayout mit relativer/absoluter Positionierung und z-index zusammen funktioniert, aber ein Versuch zeigt, dass es das problemlos tut:

   <div id="alert">
        <div id="kopf">Das ist ein Alert</div>
        <div id="kreis">
        </div>
        <div id="inhalt">Dies ist der Inhalt</div>
        <button id="close">Schliessen</button>
        <img id="drop" src="https://www.mediaevent.de/javascript/img/drop.png">
    </div>
    <style>
        #alert {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            width: 50%;
            margin: auto;
            border: 1px solid black;
            height: 50vh;
            background-color: lightgrey;
        }

            #alert > * {
                position: relative;
            }

        #drop {
            position: absolute;
            left: calc(50% - 54px);
            top: 0;
            animation: drop 4s infinite linear;
        }

        #kopf {
            align-self: stretch;
            background-color: blue;
            color: white;
            padding: 5px;
            text-align: center;
            margin-bottom: auto;
            z-index: 5;
        }

        #kreis {
            width: 100%;
            height: 30%;
            background-color: lightgreen;
            background-image: url(http://www.mediaevent.de/javascript/img/circle.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

        #inhalt {
            align-self: stretch;
            text-align: center;
            background-color: lightsalmon;
            z-index: 5;
        }

        #close {
            margin-top: auto;
        }

        @keyframes drop {
            0% {
                top: -180px;
                opacity: 1;
            }

            90% {
                top: 100%;
                opacity: 1;
            }

            100% {
                top: 100%;
                opacity: 0;
            }
        }
    </style>

Ich habe dies auf einer Testseite entwickelt, damit mir die Features meines Editors zur Verfügung stehen (Validierung etc.).

Ja, ich schrieb ja schon, wenn sich Elemente überdecken sollen, geht es nicht ohne absolute Positionierung. Flexlayout ist dafür gemacht, Elemente anzuordnen, die sich im normalen Fluss befinden. Auch wenn man z-index verwenden will, müssen die Elemente positioniert sein.

Anscheinend hast Du dich nicht über Arrays in Javascript informiert. Ich habe mal versucht, deinen Code, so gut ich ihn verstehe, in Javascript umzusetzen:

        v = [0]; //ein Array mit 0 als erstem Element, index = 0
        a = [9.81]; // ein Array mit 9.81 als erstem Element, index = 0
        y = [1000]; // ein Array mit 1000 als erstem Element, index = 0
        for (i = 1; i <= 1000; i++) {
            v[i] = v[i - 1] + a[i - 1];
            a[i] = 10 - 27 / 65 * v[i] * v[i];
            y[i] = y[i - 1] - v[i];
        }
        console.log(v, a, y);

Allerdings kriege ich die Formel nicht so hin, dass die Ergebnisse plausibel sind. Auch wenn ich Klammern setze:

a[i] = 10 - 27 / (65 * v[i] * v[i]);

wird es anders aber ebenso wenig plausibel. Da ist dann der Physiker gefragt.

Die Frage habe ich schon erwartet, weil eine leere Box ja keinen Sinn macht. Für die Ausrichtung gibt es einige Standardschemata, die Du unter dem Link bei CSS-Tricks nachlesen kannst (justify-content). Kannst du deine Vorstellungen damit verwirklichen, ist es relativ einfach. Wenn nicht, wird es etwas komplizierter. Hier bei stackoverflow werden erweiterte Möglichkeiten sehr gut beschrieben:

https://stackoverflow.com/questions/3255…856609#33856609

Ich habe mal den Fall realisiert, dass der übrige Inhalt mittig angeordnet werden soll:

http://jsfiddle.net/Sempervivum/rkm673tu/14/

Soll er dagegen am oberen Rand ausgerichtet sein, brauchst Du nur justify-content:space-between zu verwenden.

Ja, Flexlayout kann man im wesentlichen auf alle Elemente anwenden. Und absolute Positionierung sollte man so wenig wie möglich verwenden, z. B. dann, wenn ausdrücklich gewünscht ist, dass sich Elemente überlappen.

Hier zeigt sich wieder mal, dass absolute Positionierung meistens mehr Probleme schafft, als sie löst. Diese Aufgabe lässt sich ganz leicht mit Flexlayout lösen:

http://jsfiddle.net/Sempervivum/rkm673tu/12/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ich hoffe, dies ist, was Du dir vorstellst.

Am einfachsten ist es, wenn Du es nicht mit jQuery machst, sondern einfach im HTML einfügst:

<style>
    /* hier dein gesamtes CSS */
</style>

Mit jQuery gibt es aber auch Mittel und Wege, wenn das dein Frage noch nicht beantwortet, dann melde dich wieder.