Beiträge von Sempervivum

Sempervivum

Wo hast Du das Javascript eingefügt? Es muss vor dem schließenden </body> stehen. Wenn es dann immer noch nicht funktioniert, dann poste den neuen Code. Ich hatte es getestet und es hatte funktioniert.

Sempervivum

Schweigt sich das Tutorial darüber aus?

Probiere dieses Javascript:

Code

<script>
        var tuerchen = document.querySelectorAll(".door");
        for (var i = 0; i < tuerchen.length; i++) {
            tuerchen[i].addEventListener("click", function () {
                this.classList.add("open");
                this.innerHTML = "";
            })
        }
    </script>

und dieses CSS:

Code

        .door.open {
            background-color: transparent;
        }

Sempervivum

Nicht blocken, sondern ersetzen:

https://jsfiddle.net/Sempervivum/k80Lh5bv/

Sempervivum

Ja, den Thread habe ich verfolgt. Das Fiddle, das Du dort gepostet hast, funktioniert doch einwandfrei. Auf das letzte Posting des TO bin ich nicht eingegangen, weil er den Code so hingeworfen hat, ohne es zu erklären (welchen Code hat er verwendet, anscheinend deinen. Funktioniert das jetzt oder nicht? Wenn nicht, was geht nicht?)

Sempervivum

Das einfachste ist wahrscheinlich, wenn Du diesem div einen negativen z-index gibst, das sollte ihn in den Hintergrund befördern.

Sempervivum

Leider kenne ich den Hintergrund nicht. Willst Du dieses div einer bestehenden Seite mit Userscript hinzu fügen? Bei deinem Code ist der body leer, weil das div durch die absolute Positionierung aus dem Fluss heraus genommen wird, und hat deshalb die Höhe 0. Und height:100% bezieht sich auf das Elternelement, in diesem Fall ist das body. D. h. wenn body die Höhe 0 hat, hat auch das div die Höhe 0 und ist nicht sichtbar. Versuche, Breite und Höhe des div auf 100vw und 100vh zu setzen.

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.

Beiträge von Sempervivum

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

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