Beiträge von Sempervivum

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>

Hast Du auch die Variable anzahl auf 4 gesetzt?

Jetzt verstehe ich dich nicht richtig.

Feldname als Variable:

var name = "itemx";
testobj[name] = "wertx";

Wert als Varible:

var wert = "wertx";
testobj.namex = wert;

Dann probiere dieses:

<form>
        Gewicht: <input id="gewicht1" />
        Material:
        <select id="material1">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis1"></span>
    </form>
    <form>
        Gewicht: <input id="gewicht2" />
        Material:
        <select id="material2">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis2"></span>
    </form>
    <style>
        #gewicht {
            width: 100px;
        }
    </style>
    <script>
        var anzahl = 2;
        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) {
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".",",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
        }
        for (let nr = 1; nr <= anzahl; nr++) {
            document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);});
            document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);});
        }
    </script>

Die Anzahl der Nachkommastellen kann man mir toFixed() festlegen.

Und sollen dann die Optionen in den Selects jedes Mal gleich sein?

Zum Rechenfehler: Das liegt daran, dass Javascript den Punkt als Dezimalzeichen erwartet, nicht das Komma. Das kann man jedoch leicht beheben, indem man ein Komma durch einen Punkt ersetzt:

function berechnen() {
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnis.innerHTML = valgewicht * preis + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
        }

Und die Größe der Felder kannst Du durch CSS verändern, z. B.:

<style>
        #gewicht {
            width: 100px;
        }
    </style>

Zitat

Wenn ich dieses Script auf meiner künftigen Homepage (es geht um Stoffe und Kleider Ankauf) 2 mal untereinander eingebe, dann habe ich ja 2 mal die Möglichkeit, mir das Gewicht und Ergebnis anzeigen zu lassen. Siehe Bild. Gibt es eine Möglichkeit, die jeweiligen Ergebnise addieren zu lassen?

Das lässt sich auf jeden Fall machen. Ich fürchte nur, dass dieses Skript nur mit einem Satz von Ein- und Ausgaben funktionieren wird. Wird es denn definitiv bei zwei Sätzen bleiben oder können es noch mehr werden?

Ja, es gibt noch eine andere Möglichkeit:

http://jsfiddle.net/Sempervivum/sLmraL69/25/

Leider fällt es mir schwer zu erklären, warum das so ist. Um es besser zu verstehen, versuche dieses:

var testobj = {};
testobj.item1 = 1;
var nr = 2;
testobj.'item' + nr = 2; // diese funktioniert nicht
var nr = 3;
testobj['item' + nr] = 3;

Zitat

hat fiddel sowas wie nee fehlerkonsole?

fiddle nicht, aber dein Browser. Console funktioniert bei Fiddle genau so.

Habe keine Ahnung aber Google weiß Rat:

https://stackoverflow.com/questions/1848…-css-animations

https://github.com/Keyframes/jQuery.Keyframes

Zitat

Und was versteht man unter flexbox.

Ja, davon ist häufig die Rede. Es hat nur entfernt etwas mit "box" zu tun und deshalb verwende ich selber lieber "Flexlayout".

Du kannst dich hier darüber informieren:

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

Dann poste doch mal den Code, mit dem Du die Tabelle erzeugst.

Hallo Redland,

ich habe versucht, die Animation mit CSS nachzubilden und responsiv zu machen. Dies ist soweit ganz gut gelungen:

https://jsfiddle.net/Sempervivum/s0xc3949/3/

Leider ist es mir nicht gelungen, dies in deine Seite einzubauen. Der Grund dafür ist, 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.

Durch das HTML und CSS der Seite steige ich nicht auf Anhieb durch, so dass ich es auch nicht ändern konnte. Habe bisher einen Bogen um Bootstrap gemacht.