Beiträge von Sempervivum

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.

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.