Beiträge von Sempervivum

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/ques…perties/33856609#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.

Ah ja, danke für die Info. Die Felge und die animierten Texte hatte ich mit HTML5-Canvas gemacht, das ist ganz etwas anderes als SVG. Hat beides seine Vor- und Nachteile.

Interessantes Thema, das kannte ich noch gar nicht. Wie hast Du denn die Pfade erstellt?

Zitat

meine animation ist auf 15 sekunden eingestellt,brauch aber n wirklichkeit mal gerade 4 sekunden,wo sind die sekunden hin?

Dazu musst Du dich über die dasharrays informieren:

https://css-tricks.com/svg-line-animation-works/

Der Trick besteht darin, dass man einen einzigen Dash erzeugt, der den ganzen Pfad abdeckt. Und weil dein dash bei einer Größe von 2000 viel länger ist als der Pfad, ist der Pfad schon nach 4 Sekunden sichtbar, obwohl die Animation länger läuft.

Zitat

muss ich für jjeden buchstaben einzelnt animieren oder kann man path 1 uund 2 zusammen fummeln damit die anmation in eins durch geht ?

Für Animationen gibt es diverse Events. In diesem Fall ist "onanimationend" interessant, dieser feuert, wenn die Animation beendet ist und Du kannst damit die Animation des zweiten Buchstabens starten:

http://jsfiddle.net/nswtbuzf/18/

Ja, da waren etliche Fehler in dem Code. Das Kernproblem ist jedoch, dass an ClosePopUp() ein String übergeben werden muss. Mit dem vorhandenen Code sah das generierte HTML so aus:

<button onclick='ClosePopUp(PersonenPopUp)'

So erwartet Javascript. dass PersonenPopUp eine Variable ist, die es jedoch nicht gibt. Man muss PersonenPopUp in doppelte Hochkommas setzen, so dass das generierte HTML so aussieht:

<button onclick='ClosePopUp("PersonenPopUp")'

Das erreicht man durch dieses Javascript:

<button onclick='ClosePopUp(\"" + popup + "\")' type=

Dieses funktioniert:

<script type="text/javascript">
        function PersonenPopUp(Personenanzahl, Personennamen) {
            var content = "";

            var lPersonenPopUpHintergrund = document.createElement("div");
            lPersonenPopUpHintergrund.id = 'lPersonenPopUpHintergrund';
            document.body.appendChild(lPersonenPopUpHintergrund);

            var lPersonenPopUp = document.createElement("div");
            lPersonenPopUp.id = 'PersonenPopUp';
            lPersonenPopUpHintergrund.appendChild(lPersonenPopUp);



            for (var i = 0; i < Personenanzahl; i++) {
                content = content + "</br></br><input type='radio' name='teacher' value=''>" + Personennamen[i];
            }
            var popup = "PersonenPopUp";

            lPersonenPopUp.innerHTML = "<form method='post' action='ZeitplanerS.php' >" + content + "</br></br><button onclick='ClosePopUp(\"" + popup + "\")' type='button' name='submitPersonenPopUp'>" + popup + "</button><form></br>";

        }

        function ClosePopUp(PopUp) {
            document.getElementById(PopUp).style.display = 'none';
        }
        PersonenPopUp(2, ["Hugo", "Anton"]);

    </script>

Außerdem:

• Die Verwendung einer Variablen für die ID ist überflüssig, da die ID ohnehin konstant ist.
• Den Parameter Personenanzahl kann man einsparen, wenn man die Anzahl aus dem Array über Personennamen.length ermittelt.
• Die Indizierung im Array besser mit 0 beginnen.
• Wenn der Button die Funktion des Submit haben soll, wird die Seite ohnehin neu geladen und das Popup verschwindet.

Definitiv wissen tue ich es nicht, aber ich reime es mir folgender Maßen zusammen:

Wenn man sich die Werte im SVG ansieht, liegen sie alle so ungefähr in dem Bereich 0 bis etwas über 400 . D. h. die Grafik, die so definiert wird, muss etwa diese Abmessungen haben.

Hast Du das SVG generiert, wie in dem anderen Thread besprochen? Ich würde eigentlich vermuten, dass der Generator die Abmessungen von dem PNG-Bild beibehält, aber das scheint nicht zu stimmen, denn das Bild, was ich noch habe, ist über 1000 x 1000 px groß.

Die Grafik kommt mir bekannt vor

Wenn ich sie allein im Browser ansehe, sieht sie genau so aus, dass nur rechts ein kleines abgeschnittenes Segment sichtbar ist (links).

Ich kann sie jedoch komplett sichtbar machen, wenn ich die Werte im viewbox-Attribut vergrößere (rechts).

html-seminar.de/woltlab/attachment/1250/html-seminar.de/woltlab/attachment/1251/

Ja, man lernt nie aus. Ich habe zwar früher beruflich Software entwickelt, aber nicht für das Web und kein Javascript. Javascript immer nur hobbymäßig. Beschäftige mich vielleicht jetzt fünf bis zehn Jahre damit, aber immer nur nebenbei. Wenn man es intensiv macht, kann man sich sicher das Wissen viel schneller erarbeiten.

Das liegt daran, dass Du parseInt() verwendet hast, das schneidet die Nachkommastellen einfach ab, so dass "29.78" 29 ergibt. Wenn Du die Nachkommastellen behalten willst, musst Du parseFloat() verwenden.

Wenn es mehr sein sollen, musst Du weitere hinzu fügen und die Nummerierung anpassen. Das Javascript passt sich entsprechend der Variablen anzahl selber an.

Heißt das, es funktioniert jetzt so weit?

Dann die Berechnung der Summe:

    <span id="summe"></span>
    <script>
        var anzahl = 4;
        var ergebnisse = [];
        function summieren() {
            var endsumme = 0;
            for (var nr = 1; nr <= anzahl; nr++) endsumme += ergebnisse[nr];
            document.getElementById("summe").innerHTML = endsumme.toFixed(2).replace(".", ",") + ' €';
        }
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" +nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnisse[nr] = (valgewicht * preis);
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".", ",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
            summieren();
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            ergebnisse[nr] = 0;
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>