Beiträge von Sempervivum

Sempervivum

Die Frage wird hier beantwortet:

https://stackoverflow.com/questions/2698…t-the-same-time

Sempervivum

Dann geht es natürlich nicht mit Mediaqueries. Was der offizielle Weg ist, weiß ich nicht, aber was Du in deinem Eingangsposting beschrieben hast, scheint mir gängig und praktikabel zu sein.

Sempervivum

Was ist denn der Hintergrund bei diesem Vorhaben? Je nachdem, nach was für welchen Kriterien diese Dateien geladen werden sollen, kämen u. U. auch Mediaqueries in Frage.

Sempervivum

Zitat

IndexOf und search() ist auch doof.Sobald erein Wort gefunden hat ist die suche zuende.

Die Zeigen nicht alle treffer an

match() mit dem Modifikator "g" ist die Lösung.

Sempervivum

Zitat

Hallo, ich wollte wissen, wie man alle Elemente mit z.B. der ID, oder Klasse "Fenster" findet und jedes Element davon in einer Variable speichern kann. Oder einem Array

Das hatte ich so verstanden, dass der TO Elemente anhand der Klasse o. ä. ermitteln will. Was Du anschneidest, läuft auf eine Suche in den Inhalten hinaus, ich glaube, das hatten wir in einem anderen Thread.

Sempervivum

Zitat

was ist indexOf?

Kannst Du z. B. hier nachlesen:

https://wiki.selfhtml.org/wiki/JavaScrip…/String/indexOf

Ich sehe aber nicht, wie dir das bei deinem Vorhaben helfen kann.

Informiere dich über document.querySelectorAll(), z. B. ebenfalls bei SelfHTML, damit kannst Du alle Elemente eines bestimmten Typs über einen Selektor ermitteln.

Über Selektoren kannst Du dich ebenfalls bei SelfHTML informieren:

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

Und die Funktion querySelectorAll() liefert gleich ein Array bzw. eine Nodelist, d. h. das Eintragen in Variablen bzw. ein Array brauchst Du nicht selbst zu machen.

Sempervivum

Ich wüsste nicht, dass in Canvas eine direkte Texteingabe möglich ist. Ich habe so etwas mal selbst zusammen gebaut, indem ich die Tastatureingabe abgefragt habe:

Code

                    $(document).off("keypress").on('keypress', function (event) {
                        if (active) {
                            txt += String.fromCharCode(event.which);
                            $(canvas).setLayer('text' + thisobj.idText, { text: txt + "|" })
                                .drawLayers();
                        }
                    });

http://ulrichbangert.de/div/webentwick…rawing-pad.html

Mit jCanvas realisiert, "Text" auswählen und in das Rechteck klicken.

In deinem Fall würde ich jedoch die Lösung mit Plus- und Minustasten vorziehen, weil Du dann die Eingabe nicht zu überprüfen brauchst, ob sie zulässig ist (nummerisch und Wertebereich).

Sempervivum

Ich würde dir ja gern helfen, aber leider gehen mir die Joomla-Kenntnisse ab. Hast Du die Filterung selber programmiert? Wenn ja, kannst Du sicher einen Hinweis geben, in welchem der zahlreichen JS-Files der Code steht. Generell ist es nämlich kein Problem, eine Aktion erst dann auszuführen, wenn in allen Selects etwa ausgewählt wurde.

Sempervivum

In einer for-Anweisung kann man für die Startaktionen mehrere Anweisungen, durch Komma getrennt, notieren. In diesem Fall werden die Variablen x, y und nr auf ihre Anfangswerte gesetzt. xstart ist der Anfangswert für die x-Position und ystart der für die y-Position.

In deinem Code hast Du es etwas anders gemacht, indem Du nur eine Zählvariable i führst und die Position daraus berechnest. Das geht natürlich genau so gut.

Sempervivum

Selbstverständlich:

Code

            var wrect = 50, hrect = 20, dist = 5,
                xstart = 10, ystart = 10,
                cv = $("#canvas2");
            for (var x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
                cv.drawRect({
                    fillStyle: 'lightblue',
                    x: x, y: y, width: wrect, height: hrect,
                    fromCenter: false
                }).drawText({
                    fillStyle: 'black',
                    x: x + wrect / 2,
                    y: y + hrect / 2,
                    text: nr
                });
                if ((nr + 1) % 5 == 0) {
                    y += dist + hrect;
                    x = xstart;
                } else {
                    x += dist + wrect;
                }
            }

Alles anzeigen

Sempervivum

Der Grund ist, dass jCanvas per Default die Koordinaten auf das Zentrum des gezeichneten Objektes bezieht, während es beim Standard-Canvas die linke obere Ecke ist. Bei jCanvas kannst Du dies durch die Eigenschaft "fromCenter" umschalten:

https://projects.calebevans.me/jcanvas/docs/rectangles/

Sempervivum

Verrätst Du uns auch, wie Du es gelöst hast?

Sempervivum

Eine Lösung könnte jQuery.getScript() sein:

https://api.jquery.com/jquery.getscript/

Sempervivum

Das wird hier diskutiert:

https://developer.mozilla.org/en-US/docs/Web…_considerations

Zitat

HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

Sempervivum

Zitat

Ich möchte aber beide haben: Einmal in blue und einmal in red.

Ach so, dann habe ich dich ganz falsch verstanden: Wenn Du zwei Boxen haben willst, musst Du sie nacheinander zeichnen, z. B. mit drawRect(), und ihnen unterschiedliche Namen geben. setLayer() dient dazu, einen vorhandenen Layer nachträglich zu ändern.

Sempervivum

Gängiges Problem: Steht das CSS in einer externen Datei gilt deren Verzeichnis als Basis für Bildpfade etc.

D. h. die URL müsste laufen:

background-image: url("../img/landing.jpg");

Sempervivum

Ja, über setLayer(), lies in der Doku nach.

https://projects.calebevans.me/jcanvas/docs/manipulateLayers/

Sempervivum

Die Funktion alignText() richtet den Text rechts aus:

HTML

<!doctype html>
<html>

<head>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>

<body>
        <canvas id="display1" width="220" height="220"></canvas>
        <canvas id="display2" width="220" height="220"></canvas>
        <input id="val" />
    <button id="colorbtn">Change color</button>
    <script>
        function getColor2(value, opts) {
            var color = opts.colorBar;
            if (opts.colors) {
                opts.colors.forEach(function (item, idx) {
                    if (value > item.threshold) color = item.colorAbove;
                });
            }
            return color;
        }
        function getText(value, max, opts) {
            return opts.templateText.replace("{value}", value)
                .replace("{remaining}", max - value)
        }
        function alignText(cv) {
            var maxTextWidth = cv.data("max-text-width");
            var textWidth = cv.measureText('text').width;
            var delta = maxTextWidth - textWidth;
            var xText  = cv.data("x-text");
            cv.setLayer('text', {
                x: xText + delta
            });
        }
        function erstelleBalken(selector, value, max, options) {
            var balkenEigenschaften = { barWidth: 400, barHeight: 40, barPos: 10,
                cornerRadius: 5, colorBg: "lightgrey", colorText: "black", textPos: "right", 
                templateText: "{value} min" }
            $.extend(balkenEigenschaften, options);
            $(selector).each(function (index, element) {
                var cv = $(this);
                cv.data("balkenEigenschaften", balkenEigenschaften);
                cv.data("max", max);
                if (value > max) max = value;
                var colorBar = getColor2(value, balkenEigenschaften);
                var height = 2 * balkenEigenschaften.barPos + balkenEigenschaften.barHeight;
                cv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorText,
                    strokeWidth: 4,
                    x: balkenEigenschaften.barPos, y: balkenEigenschaften.barPos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: balkenEigenschaften.templateText.replace("{value}", max).replace("{remaining}", max)
                });
                cv.data("max-text-width", cv.measureText('text').width);
                yBar = balkenEigenschaften.barPos + cv.measureText('text').height / 2 - balkenEigenschaften.barHeight / 2;
                if (balkenEigenschaften.textPos == "left") {
                    var xBar = balkenEigenschaften.barPos + cv.measureText('text').width + 5,
                        xText = balkenEigenschaften.barPos;
                } else {
                    var xBar = balkenEigenschaften.barPos,
                        xText = balkenEigenschaften.barPos + balkenEigenschaften.barWidth + 10;
                }
                cv.data("x-text", xText);
                var width = balkenEigenschaften.barPos + cv.measureText('text').width + 10 + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.attr("width", width);
                cv.attr("height", height);
                cv.setLayer('text', {
                    text: getText(value, max, balkenEigenschaften),
                    x: xText,
                });
                cv.drawLayers();
                cv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: balkenEigenschaften.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
                cv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: balkenEigenschaften.cornerRadius,
                    width: value / max * balkenEigenschaften.barWidth, height: balkenEigenschaften.barHeight
                });
            });
        }
        function sychronisiereBalken(selector) {
            var maxTextWidth = 0;
            $(selector).each(function (index, element) {
                var cv = $(element);
                var currentWidth = cv.data("max-text-width");
                if (currentWidth > maxTextWidth) maxTextWidth = currentWidth;
            });
            $(selector).each(function (index, element) {
                var cv = $(element);
                var balkenEigenschaften = cv.data("balkenEigenschaften");
                if (balkenEigenschaften.textPos == "left")
                    xText = balkenEigenschaften.barPos;
                else
                    xText = balkenEigenschaften.barPos + maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos;
                cv.setLayer('background', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('bar', {
                    x: maxTextWidth + balkenEigenschaften.barPos
                }).setLayer('text', {
                    x: xText
                }).drawLayers();
                alignText(cv);
                cv.attr("width", balkenEigenschaften.barPos + 2 * maxTextWidth + balkenEigenschaften.barWidth + balkenEigenschaften.barPos)
                    .drawLayers();
            });
        }
        erstelleBalken("#display1", 50, 100, {textPos: "left"});
        erstelleBalken("#display2", 5, 100, {textPos: "left"});
        sychronisiereBalken("#display1, #display2");

    </script>

</body>

</html>

Alles anzeigen

Möglicher Weise musst Du das in der Funktion, die den Balken aktualisiert, auch noch einfügen.

Sempervivum

OK, ich werde eine Blick darauf werfen. War eine schlechte Wahl, den Weg mit Canvas statt HTML/CSS zu gehen, aber ich möchte jetzt auch nicht alles neu machen.

Sempervivum

Zitat

Also ich habe es jetzt hinbekommen so wie ich es haben möchte

Wie hast Du es denn hin bekommen, hast Du meinen Code aus Posting #79 verwenden können?

Beiträge von Sempervivum

@Keyframes

CSS Dateien einbinden

CSS Dateien einbinden

Elemente mit bestimmter ID erfassen und ausgeben

Elemente mit bestimmter ID erfassen und ausgeben

Elemente mit bestimmter ID erfassen und ausgeben

Canvas Texteingabe möglich

Filterausgabe unterdrücken

jcanvas Rectangle dynamisch erzeugen

jcanvas Rectangle dynamisch erzeugen

Canvas jcanvas Unterschiede bei den Koordinaten?

[Javascript] Ajax-Rückgabe

[Javascript] Ajax-Rückgabe

[Javascript] Ajax-Rückgabe

jCanvas: Layer über Namen aufrufen

Bild wird nicht angezeigt

jCanvas: Layer über Namen aufrufen

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken