Beiträge von Sempervivum

Sempervivum

Ich hatte ein paar Mal den Code verbessert und meinen Post geändert. Möglicher Weise hast Du da eine fehlerhafte Version erwischt. Probiere es jetzt noch Mal. Ich habe den Code aus Post #12 noch Mal zurück in meine Testseite kopiert und dort funktioniert er.

Sempervivum

Jetzt verstehe ich es besser. Ich empfehle, alle drei Balken am Anfang nur einmal zu erzeugen und dann nur noch nach Bedarf sichtbar oder unsichtbar zu machen und den Wert zu ändern.

BTW: Wenn Du nur eine Farbe haben willst, kannst Du den Parameter colors einfach weg lassen.

Ungetestet:

Code

        $("#balkenM17S2").hide();
        $("#balkenM17S3").hide();
        erstelleBalken('#balkenM17S', 100, 100, {
            colorBar: 'red',
            colors: [{
                threshold: 5,
                colorAbove: 'yellow'
            }, {
                threshold: 10,
                colorAbove: 'green'
            }, ],
            templateText: "{remaining} min",
            textPos: "right"
        });
        erstelleBalken('#balkenM17S2', 0, 0, {
            colorBar: 'blue',
            templateText: "{remaining} min",
            textPos: "left"
        });
        erstelleBalken('#balkenM17S3', 0, 0, {
            colorBar: 'black',
            templateText: "{remaining} min",
            textPos: "left"
        });

        function Zeichnen(strResponseText) {
            var objDaten = JSON.parse(strResponseText);
            if (objDaten.currentspeed[0] >= 0) {
                if (objDaten.currentspeed[0] == 0) {
                    if (Math.abs(objDaten.setlength[0] - objDaten.currentlength[0]) > 200) {
                        $("#balkenM17S").hide();
                        $("#balkenM17S3").hide();
                        $("#balkenM17S2").show();
                        balkenDiagrammanimation('#balkenM17S2', objDaten.idletime[0]);
                    } else {
                        $('#balkenM17S').hide();
                        $('#balkenM17S2').hide();
                        $("#balkenM17S3").show();
                        balkenDiagrammanimation('#balkenM17S3', objDaten.idletime[0]);
                    }
                } else {
                    $("#balkenM17S2").hide();
                    $("#balkenM17S2").hide();
                    $("#balkenM17S").show();
                    var zeitUmbau1 = Math.round((objDaten.setlength[0] - objDaten.currentlength[0]) / (objDaten.currentspeed[0] * 60));
                    balkenDiagrammanimation('#balkenM17S', zeitUmbau1);
                }
            } // end if speed ok
        }

Alles anzeigen

Sempervivum

Zitat

sobald man ja doch ein menü punkt anklickt ,ist man ja meist auch auf einer anderen url,müsste man nicht trotzdem die aktuelle url oder so dann in cookies oder anders zwischen speichern ?

IMO nein, denn anschließend sollte ja ein anderer Menüpunkt hervor gehoben werden entspr. der neuen Seite.

Sempervivum

Schau mal, ob dieses tut, was Du erwartest:

Code

<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>
        <button id="resetbtn1" type="button">Löschen</button>
    </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>
        <button id="resetbtn2" type="button">Löschen</button>
    </form>
    <form>
        Gewicht: <input id="gewicht3" />
        Material:
        <select id="material3">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis3"></span>
        <button id="resetbtn3" type="button">Löschen</button>
    </form>
    <span id="summe"></span>
    <button type="button" id="resetbtnall">Alles löschen</button>
    <script>
        var anzahl = 3;
        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();
        }
        function resetOne(nr) {
            document.getElementById("gewicht" + nr).value = '';
            document.getElementById("material" + nr).selectedIndex = 0;
            document.getElementById("ergebnis" + nr).innerHTML = '';
        }
        function resetAll() {
            for (var nr = 1; nr <= anzahl; nr++) {
                resetOne(nr);
            }
            document.getElementById("summe").innerHTML = '';
        }
        document.getElementById("resetbtnall").addEventListener("click", resetAll);
        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); });
            document.getElementById("resetbtn" + nr).addEventListener("click", function () { resetOne(nr); });
        }
    </script>

Alles anzeigen

Sempervivum

Zitat

das der Balken rumspackt

Kannst Du das genauer beschreiben?

Zitat

wenn ich den Balken innerhalb der funktion erzeuge, welche dann immer wieder wegen des Intervalls durchlaufen wird

Möglicher Weise nicht jedes Mal neu erzeugen, sondern den vorhanden aktualisieren?

Sempervivum

Zweimal die selbe ID geht gar nicht, da wirst Du immer Probleme haben.

Sempervivum

Ok, und woran scheitert das? Wie ich schrieb, kannst Du leicht durch CSS-Display den einen sichtbar und den anderen unsichtbar machen.

Sempervivum

Zitat

Zeiten anzeige wielange es noch dauert da ist es wichtig das der farben ändert von grün nach gelb nach rot und der andere Balken sagt mir wielange es schon geht. Zurzeit erstelle ich einfach verschiedene Balken. Nur wenn er von dem einen Balken zum anderen wechselt bleibt der erste Balken da und ich sehe beide Überlappend.

Verstehe ich noch nicht ganz: Willst Du nun zwei Balken anzeigen oder soll es zwei geben, aber abhängig von einem Kriterium, nur einer sichtbar sein und der andere unsichtbar? Letzters müsst Du erreichen können, indem Du jeweils display:none oder display:block für den ganzen Balken setzt.

Sempervivum

Selbstverständlich, ich erinnere mich jetzt an diese Balkendiagramme. Der Schlüssel ist "balkenEigenschaften". Dieser müsste etwa so aussehen:

Code

{
    colorBar: "green",
    colors: [5: "red", 10: "yellow"]
}

Das müsste irgend wo beim Erzeugen des Balkendiagramms angegeben werden.

Sempervivum

Sollte kein Problem sein:

Code

        function updateBarDisplay(selector, value, color /* geaendert */) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var opts = canv.data("opts");
                var barWidth = value / max * opts.barWidth;
                canv.setLayer('text', {
                    text: getText(value, max, opts)
                }).stopLayer('bar')
            .animateLayer('bar', {
                width: barWidth,
                fillStyle: color // geaendert
            }, {
                duration: 1000,
                easing: 'linear',
                step: function (now, fx, layer) {
                    console.log(now, fx);
                }
            });
        });
        }

Alles anzeigen

Sempervivum

IMO macht das Speichern keinen Sinn: Ein Menü dient dazu, vierschiedene Seiten anzusteuern und wenn man bei einem erneuten Besuch den alten Zustand des Menüs wieder her stellt, müsste man auch die betr. Seite wieder laden. Diese ergibt sich jedoch aus der URL.

Wichtiger erscheint mir, dass die Menüpunkte hervor gehoben werden, die zu der Seite gehören, die gerade offen ist. Der TO schreibt ja:

Zitat

sodass ich weiß auf welcher Seite ich mich befinde.

Sempervivum

Bei mir funktioniert es, hast du das Problem inzwischen gelöst?html-seminar.de/woltlab/attachment/1278/

Sempervivum

Hier ist etwas, das ganz ähnlich ist, wie das auf der Merzedes-Seite:

http://www.cssterm.com/css-menus/hori…s-menu-two-line

Sempervivum

Zitat

nur warum jetzt die zahlen weg sind verstehe ich trotzdem nicht ich sehe da nur ein d und das hat mit zahlen ja nicht viel zu tun

Das ist hier kurz und bündig und gut erklärt:

http://www.webmasterpro.de/coding/article/regex-syntax.html

Oder hier mal testen, da bekommt man Erklärungen:

https://regex101.com

Sempervivum

Die Antwort findest Du hier:

https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator

In deinem Fall: Kindselektor

Edit: Wie ich sehe, hast Du schon eine Lösung. Das jQuery, das Du gepostet hast, sollte eigentlich funktionieren.

Sempervivum

Um dir das sagen zu können, müsste man den Code sehen.

Sempervivum

Wie das im Browser implementiert ist, weiß ich auch nicht, aber ich vermute, dass bei jedem Schleifendurchlauf die Variable bei der betr. Callback-Funktion gespeichert wird. Der Wert ist ja jedes Mal ein anderer.

Sempervivum

Zitat

Fehlt jetzt nicht noch ein INPUT - Befehl, wo ich bekanntgeben muss, welche Variable in welches Feld geschrieben soll werden?

Was meinst Du mit input-Befehl? Ein input-Element muss es auf jeden Fall geben, etwas so:

Code

<input id="anz1">

aber ich dachte, das sei ohnehin der Fall, weil Du es ja früher gepostet hattest. Mit diesem:

Code

$('#anz1').val(data[0]);

wird er Wert dann hinein geschrieben.

Ich konnte den Code nicht testen, weil mir das ganze Umfeld fehlt, DB etc. Da ist jetzt Debuggen angesagt:

Was sagt die Console?
Checkpoint einbauen, um zu sehen, ob der Callback überhaupt kommt und ob der Wert passt:

Code

            $.getJSON('database.php', function(data) {
                console.log(data);
                $('#anz1').val(data[0]);
                $("#amp1").trigger('change');
                $('#anz2').val(data[1]);
                $("#amp2").trigger('change');
            });

Prüfen, ob die verwendeten IDs im Javascript und im HTML zusammen passen. Wahrscheinlich macht es keinen Sinn, #anzx für das Eintragen des Wertes und #ampx für das Triggern des change zu verwenden.

Sempervivum

Die vorletzte Fehlermeldung kannst Du leicht beheben, wenn Du der Empfehlung dort folgst. Ich erwarte aber nicht, dass das das Problem löst.

Zitat

solange ich die console aus habe aktualisiert sich der wert nicht.

Wenn ich aber dann die console an mache dann wird der Wert aktualisiert.

Das ist mir ein Rätsel. Poste doch mal mehr Code aus dem Umfeld des Ajax. Die ganze Seite ist wahrscheinlich zu umfangreich, das ganze Zeichnen.

Sempervivum

let ist ähnlich wie var aber mit dem Unterschied, wie bei deinem Beispiel, dass, wenn der Click-Handler aufgerufen wird, er wieder den selben Variablenwert vorfindet, wie zu dem Zeitpunkt als er registriert wurde. Während bei var er den Endwert nach Durchlauf der Schleife vorfindet.

Beiträge von Sempervivum

Tabelleninhalte löschen

Java Script Bibliotheken

Menü mit onclick

Tabelleninhalte löschen

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Menü mit onclick

verstehe add und remove class irgendwie nicht

Menü mit onclick

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

AJAX String aktualisieren

allgemeine fragen zu Javascript

mittels AJAX wert aus der DB abrufen.

AJAX String aktualisieren

allgemeine fragen zu Javascript