Beiträge von Sempervivum

Sempervivum

Versuche folgendes: Positioniere das div absolut (position:relative für body und position:absolute für das div) und und erzeuge es ganz am Anfang des body.

Sempervivum

Wie hast Du denn versucht, es anzusprechen? Mit document.getElementsByName() sollte es funktionieren:

https://wiki.selfhtml.org/wiki/JavaScrip…tElementsByName

Sempervivum

Das ließe sich mit eval() machen, aber ich empfehle eher, die Image-Objekte in einem Objekt abzulegen:

Code

var images = {};
images.img1 = new Image();
images.img1.src = "bild1.jpg";
images.img2 = new Image();
images.img2.src = "bild2.jpg";

Dann kannst Du sie so ansprechen:

Code

document.getElementById('bl' +zw[i]).appendChild(images['img' + (i+1)]);

Sempervivum

Übrigens: Dieses:

Code

        $("#div1, #div2, #div3").each(function (idx, item) {
            $(item).css({
                "position": "fixed", "background-color": "blue", top: "0px", left: "0px",
                height: "100px", width: "200px"
            });
        });

geht noch wesentlich kürzer:

Code

$("#div1, #div2, #div3").css({
    "position": "fixed", "background-color": "blue", top: "0px", left: "0px",
     height: "100px", width: "200px"
});

Sempervivum

Zitat

Ich habe 20 bilder, die ich indiziert habe von Bild1 bis bild 20

Wie meinst Du das? Lauten die Dateinamen "bild1.jpg", "bild2.jpg", ...?

Oder hast Du Objekte angelegt:

var img1 = new Image();

img1.src = "bild1.jpg";

var img2 = new Image();

img2.src = "bild2.jpg";

usw.?

Sempervivum

Nein, so geht das nicht. Du musst background-image verwenden:

https://wiki.selfhtml.org/wiki/CSS/Eigen…ackground-image

Oder ein Image-Objekt:

Code

var img = new Image();
img.src = "augeGruen.gif";
document.getElementById('bl' +zw[1]).appendChild(img);

Sempervivum

Zitat

das in diesen fall die variabel f eine fortlaufene nummer h bekommt

Das lässt sich machen, aber nur mit einiger Trickserei. Es gibt viel bessere Lösungen:

Code

            for (var j = 0; j < nrcols; j++) {
                var box = document.createElement("div");
                box.className = "gridbox";
                var h=''+i+''+j+'';
                var f'+h+'='hallo'+h;
                box.setAttribute("data-idx", i + "_" + j;
                box.addEventListener("click", function() {
                    alert("hallo " + this.getAttribute("data-idx"));
                });
                box.id ='hh'+h+'';
                row.appendChild(box);
            }

Alles anzeigen

Sempervivum

Ja, das geht.

jQuery:

Code

        $("#div1, #div2, #div3").each(function (idx, item) {
            $(item).css({
                "position": "fixed", "background-color": "blue", top: "0px", left: "0px",
                height: "100px", width: "200px"
            });
        });

Ohne jQuery, indem Du die Funktion document.querySelectorAll() verwendest und über das Ergebnis mit einer for-Schleife iterierst.

Es kann auch empfehlenswert sein, anstatt die IDs aufzuzählen, allen die selbe Klasse zu geben.

Sempervivum

So etwas:

Code

function getSize() {
    var myWidth = 0, myHeight = 0;
 
    if( typeof( window.innerWidth ) == 'number' ) {
   
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
     
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
   
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }
    return {wi:myWidth, hi:myHeight};
}

Alles anzeigen

kann dir jQuery abnehmen.

Ich kenne nur Tampermonkey und da gibt es einen Funktionsaufruf um CSS hinzu zu fügen. Offenbar gibt es das auch in Greasemonkey:

https://stackoverflow.com/questions/2368…in-tampermonkey

Sempervivum

Da hast Du Recht. Abfangen kann man es leicht:

Code

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

Alles anzeigen

Möglicher Weise müsste man noch in irgend einer Form einen Hinweis auf den Überlauf anbringen.

Sempervivum

Kein Problem:

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="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        $("#val").on("change", function () {
            updateBarDisplay("#display", this.value);
        });

        function getColor(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 updateBarDisplay(selector, value) {
            $(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: getColor(value, opts)
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createBarDisplay(selector, value, max, options) {
            var opts = {
                barWidth: 300,
                barHeight: 40,
                cornerRadius: 10,
                colorBar: "blue",
                colorBg: "lightgrey",
                colorText: "orange",
                templateText: "{value} $",
                textPos: "left",
                colors: [
                    { threshold: 30, colorAbove: 'yellow' },
                    { threshold: 60, colorAbove: 'green' }
                ]
            }
            $.extend(opts, options);

            $(selector).each(function (idx, ele) {
                var pos = 10;
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var colorBar = getColor(value, opts);
                var height = 2 * pos + opts.barHeight;
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", max).replace("{remaining}", max)
                });

                yBar = pos + canv.measureText('text').height / 2 - opts.barHeight / 2;
                if (opts.textPos == "left") {
                    var xBar = pos + canv.measureText('text').width + 10,
                        xText = pos;
                } else {
                    var xBar = pos,
                    xText = pos + opts.barWidth + 10;
                }

                var width = pos + canv.measureText('text').width + 10 + opts.barWidth + pos;
                canv.attr("width", width);
                canv.attr("height", height);
                canv.setLayer('text', {
                    text: getText(value, max, opts),
                    x: xText
                }).drawLayers();
                canv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: opts.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: opts.cornerRadius,
                    width: opts.barWidth, height: opts.barHeight
                });
                canv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: opts.cornerRadius,
                    width: value / max * opts.barWidth, height: opts.barHeight
                });
            });
        }
        createBarDisplay('#display', 10, 100, {
            colorBar: 'red',
            colors: [
                { threshold: 30, colorAbove: 'yellow' },
                { threshold: 60, colorAbove: 'green' },
            ],
            templateText: "{remaining} $",
            textPos: "right"
        });

    </script>

</body>
</html>

Alles anzeigen

Sempervivum

Ich habe auch die Kreisanzeige erweitert, so dann man mehrere Farben verwenden kann:

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
    <canvas id="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        // hier wird ein Eventlistener für das input-Feld
        // mit der ID "val" (Zeile 12) registriert
        // staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
        $("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        });

        function getColor(value, opts) {
            var color = opts.colorCircle;
            if (opts.colors) {
                opts.colors.forEach(function (item, idx) {
                    if (value > item.threshold) color = item.colorAbove;
                });
            }
            return color;
        }
        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("opts").templateText.replace("{value}", value),
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg,
                    strokeStyle: getColor(value, canv.data("opts"))
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $",
                colors: [
                    { threshold: 30, colorAbove: 'yellow' },
                    { threshold: 60, colorAbove: 'green' }
                ]
            }
            $.extend(opts, options);

            // hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
            // siehe Aufruf der Funktion in Zeile 94
            // staende dieses Skript im Head, waere dieses Element noch nicht definiert
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var deg = value / max * 360;
                var colorCircle = getColor(value, opts);
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
                canv.drawArc({
                    layer: true,
                    name: 'circle',
                    strokeStyle: colorCircle,
                    strokeWidth: opts.strokeWidthCircle,
                    rounded: true,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: deg
                });
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", value)
                });
            });
        }
        createCircleDisplay('#display', 80, 100, {
            colorCircle: 'red',
            colors: [
                { threshold: 30, colorAbove: 'yellow' },
                { threshold: 60, colorAbove: 'green' }
            ]
        });

    </script>

</body>
</html>

Alles anzeigen

Sempervivum

Gut gemacht, Basti! Solche eine Balkenanzeige kann man sehr gut mit HTML und CSS erzeugen.

Ich habe trotzdem mal meine mit jCanvas umgestellt:

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="display" class="circlecountdown"
            width="220" height="220"></canvas>
    <input id="val" />
    <script>
        $("#val").on("change", function () {
            updateBarDisplay("#display", this.value);
        });

        function getColor(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 updateBarDisplay(selector, value) {
            $(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: opts.templateText.replace("{value}", value),
                }).stopLayer('bar')
                .animateLayer('bar', {
                    width: barWidth,
                    fillStyle: getColor(value, opts)
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }
        function createBarDisplay(selector, value, max, options) {
            var opts = {
                barWidth: 300,
                barHeight: 40,
                cornerRadius: 10,
                colorBar: "blue",
                colorBg: "lightgrey",
                colorText: "orange",
                templateText: "{value} $",
                colors: [
                    { threshold: 30, colorAbove: 'yellow' },
                    { threshold: 60, colorAbove: 'green' }
                ]
            }
            $.extend(opts, options);

            $(selector).each(function (idx, ele) {
                var pos = 10;
                var canv = $(this);
                canv.data("opts", opts);
                canv.data("max", max)
                var colorBar = getColor(value, opts);
                var height = 2 * pos + opts.barHeight;
                canv.drawText({
                    layer: true,
                    name: 'text',
                    fromCenter: false,
                    fillStyle: opts.colorText,
                    strokeWidth: 4,
                    x: pos, y: pos,
                    fontSize: 40,
                    fontFamily: 'Arial',
                    text: opts.templateText.replace("{value}", max)
                });
                var xBar = pos + canv.measureText('text').width + 10,
                    yBar = pos + canv.measureText('text').height / 2 - opts.barHeight / 2;
                var width = pos + canv.measureText('text').width + 10 + opts.barWidth + pos;
                canv.attr("width", width);
                canv.attr("height", height);
                canv.setLayer('text', {
                    text: opts.templateText.replace("{value}", value)
                }).drawLayers();
                canv.drawRect({
                    layer: true,
                    name: 'background',
                    fromCenter: false,
                    fillStyle: opts.colorBg,
                    x: xBar, y: yBar,
                    cornerRadius: opts.cornerRadius,
                    width: opts.barWidth, height: opts.barHeight
                });
                canv.drawRect({
                    layer: true,
                    name: 'bar',
                    fromCenter: false,
                    fillStyle: colorBar,
                    x: xBar, y: yBar,
                    cornerRadius: opts.cornerRadius,
                    width: value / max * opts.barWidth, height: opts.barHeight
                });
            });
        }
        createBarDisplay('#display', 10, 100, {
            colorBar: 'red',
            colors: [
                { threshold: 30, colorAbove: 'yellow' },
                { threshold: 60, colorAbove: 'green' }
            ]
        });

    </script>

</body>
</html>

Alles anzeigen

Jetzt kann man beliebige Farben verwenden, weil die Schwellen und die Farben in einem Array übergeben werden.

Sempervivum

Interessant, da wird eine Diskussion verlinkt, wo beschrieben wird, wie es mit PHP geht. Daran hatte ich gar nicht gedacht.

Sempervivum

Nach allem was mir bekannt ist, geht das mit CSS nicht. Die einzige Lösung, die mir einfällt ist, mit Canvas das Bild zu zeichnen. Dann hat man Zugriff auf die Pixel, kann die Farbe ermitteln und die Hintergrundfarbe des Containers setzen. Kannst Du das nicht manuell machen oder muss es sich dynamisch verschiedenen Bildern anpassen?

Sempervivum

Dieses:

Code

    var img=document.getElementById("NAME DER BILDDATEI");
    ctx.drawImage(img,(ctx.canvas.width-200)/2,0);

führt zu einem Fehler, da das betr. img-Element nicht definiert ist. Ich habe es deshalb hinzu gefügt und unsichtbar gemacht.

Und dieses:

Code

ctx.globalCompositeOperation='source-atop';

verhindert anscheinend das Füllen. Ich kenne es noch nicht und habe es zunächst mal auskommentiert. Ebenso das Füllen, weil es dann alles andere überschreibt.

Dies funktioniert dann bei mir:

Code

    <canvas width="1000" height="490" id="canvas">Sorry, no canvas available</canvas>
    <img id="das-bild" src="images/dia0.jpg" />
    <style>#das-bild {display: none;}</style>
    <div id="content">
        <h1>Test Logo Generator</h1>

        <input type="text" id="tgroup" placeholder="Test"><br>
        <h3>Logo:</h3>
        <a href="#" class="button-link" id="blue">Blue</a>
    </div>
    <script>
        window.onload = function () {
            function getGroup() {
                return document.getElementById('tgroup').value.trim();
            }
            function drawCanvas(color, c) {
                var ctx
                if (!c) {
                    var canvas = document.getElementById('canvas'),
                    ctx = canvas.getContext('2d');
                } else {
                    ctx = c
                }

                ctx.font = '12.76px EB Garamond';
                var wit = ctx.measureText(getGroup().toUpperCase()).width
                ctx.canvas.width = 200

                ctx.canvas.height = 101
                ctx.font = '12.76px EB Garamond';
                ctx.globalCompositeOperation = 'source-over';
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                ctx.fillStyle = color;

                ctx.textAlign = 'center';

                var img = document.getElementById("das-bild");
                ctx.drawImage(img, (ctx.canvas.width - 200) / 2, 0);
                ctx.fillText("Test", ctx.canvas.width / 2, 75);
                ctx.fillText(getGroup().toUpperCase(), ctx.canvas.width / 2, 98);
                //ctx.globalCompositeOperation = 'source-atop';
                //ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
            }
            document.getElementById('blue').addEventListener('click', function () {
                var format = "png";
                drawCanvas("rgb(10,48,135)");
                var canvas = document.getElementById('canvas');
                var dataURL = canvas.toDataURL();
                $.ajax({
                    type: "POST",
                    url: "savepic.php",
                    data: { img: dataURL }
                }).done(function (msg) {
                    alert(msg);
                });
            });
        }
    </script>

Alles anzeigen

Und, soweit ich mir erinnere, muss das Upload-Verzeichnis existieren, damit das Hochladen funktioniert.

Sempervivum

Und ja, die Werte (values) sind die Mutltiplikatoren. Wahrscheinlich wäre es klarer gewesen, wenn ich data-Attribute mit dem richtigen Namen verwendet hätte.

Sempervivum

Anscheinend habe ich mir da etwas angewöhnt, was eine Unart ist und im IE nicht funktioniert: Darauf zu vertrauen, dass DOM-Elemente mit einer ID als globale Variablen zur Verfügung stehen.

Verwendest Du den IE? Dann versuche dieses:

Code

    <form>
        Gewicht: <input id="gewicht" />
        Material:
        <select id="material">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leine</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis"></span>
    </form>
    <script>
            function berechnen() {
                var valgewicht = gewicht.value;
                var idxmaterial = material.selectedIndex;
                var preis = material.options[idxmaterial].value;
                if (valgewicht != "" && idxmaterial != 0) {
                    ergebnis.innerHTML = valgewicht * preis + ' €';
                } else {
                    ergebnis.innerHTML = "";
                }
            }
            var gewicht = document.getElementById("gewicht");
            var material = document.getElementById("material");
            var ergebnis = document.getElementById("ergebnis");
            gewicht.addEventListener("input", berechnen);
            material.addEventListener("change", berechnen);
    </script>

Alles anzeigen

Sempervivum

Probiere dieses:

Code

    <form>
        Gewicht: <input id="gewicht" />
        Material:
        <select id="material">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leine</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis"></span>
        <script>
            function berechnen() {
                var valgewicht = gewicht.value;
                var preis = material.options[material.selectedIndex].value;
                if (valgewicht != "" && material.selectedIndex != 0) {
                    ergebnis.innerHTML = valgewicht * preis + ' €';
                }
            }
            gewicht.addEventListener("input", berechnen);
            material.addEventListener("input", berechnen);
        </script>
    </form>

Alles anzeigen

Ich habe es ohne Berechnen-Button gemacht. so dass das Ergebnis sofort angezeigt wird. Natürlich kannst Du auch solch einen Button hinzu fügen.

Sempervivum

Das erste scheint mir einfacher zu sein. Hast Du es damit versucht?

Beiträge von Sempervivum

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

Bild einfügen in einer Tabelle

allgemeine fragen zu Javascript

Bild einfügen in einer Tabelle

Bild einfügen in einer Tabelle

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Java Script Bibliotheken

Hintergrundbild mit alternative Farbe

Hintergrundbild mit alternative Farbe

Canvas Datei auf Server per PHP speichern

Gewicht berechnen

Gewicht berechnen

Gewicht berechnen

allgemeine fragen zu Javascript