Beiträge von Sempervivum

Sempervivum

Geht aber problemlos auch automatisch:

Code

<div id="testbg"></div>
    <style>
        #testbg {
            width: 700px;
            height: 600px;
            background-repeat: no-repeat;
            background-position: top right;
        }
    </style>
    <script>
        function setBackground(imgurl, containerid) {
            var cv = document.createElement("canvas");
            cv.width = 600;
            cv.height = 600;
            //document.body.appendChild(cv);
            var ctx = cv.getContext("2d");
            var img = new Image();
            img.onload = function () {
                ctx.drawImage(img, 0, 0);
                var imgData = ctx.getImageData(0, 0, 1, 1);
                var dta = imgData.data;
                var rgb = 'rgb(' + dta[0] + ', ' + dta[1] +
                             ', ' + dta[2] + ')';
                console.log(rgb);
                var cont = document.getElementById(containerid);
                cont.style.backgroundColor = rgb;
                cont.style.backgroundImage = 'url(' + imgurl + ')';

            };
            img.src = imgurl;
        }
        setBackground("images/dia1.jpg", "testbg");
    </script>

Alles anzeigen

Sempervivum

Was Lightbox betrifft, bin ich eigentlich der Meinung, dass das Standard ist. Z. B. Fancybox3:

http://fancyapps.com/fancybox/3/

Klick auf den Hintergrund schließt zwar das große Bild, aber das kann laut Doku durch eine Option deaktiviert werden.

Sempervivum

Hallo Draga, dieses Javascript sollte es tun:

Code

        var tuerchen = document.querySelectorAll(".door");
        for (var i = 0; i < tuerchen.length; i++) {
            tuerchen[i].addEventListener("click", function () {
                now = new Date();
                dayNow = now.getDate();
                month = now.getMonth() + 1;
                dayNow = 19; // nur zum Test
                month = 12; // nur zum Test
                var dayClicked = parseInt(this.children[0].innerHTML);
                if (month == 12 && dayClicked <= dayNow) {
                    this.classList.add("open");
                } else {
                    // Hinweis, dass es noch zu frueh fuer dieses Tuerchen ist
                }
            })
        }

Alles anzeigen

Sempervivum

Zitat

Ich kann nicht verstehen, warum <table> und <tr> und <td> einbunden werden müssen?

Damit liegst Du ganz richtig, denn eine Tabelle ist in diesem Fall eigentlich fehl am Platze. Bleibe bei deinem HTML.

Sempervivum

Hallo Draga_90: Ja, das habe ich gemeint. Für die Prüfung ist dieses Javascript relevant:

Code

now = new Date();
day = now.getDate();
month = now.getMonth() + 1;
day = 3; // nur zum Test
month = 12; // nur zum Test
if (month == 12 && day >= img.getAttribute("data-day")) {
    console.log("ok");
    if (imgSrc != "none") {
    img.src = imgSrc;
}

Wenn Du nicht weißt, wie Du es bei dir einbauen kannst, dann melde dich noch Mal.

Sempervivum

Zitat

was bedeutet das absolute den genau ,weil die position angaben stehen doch drinne

Die Positionsangaben sind nur wirksam, wenn man das Element mit position:absolute oder position:relative positioniert.

Zitat

warum verschiebt sich das den auf einigen seiten so doll und auf anderen seiten ist alles ok

Dieses:

Code

document.getElementsByTagName('body')[0].appendChild(zahler);

fügt das Dokument am Ende der Inhalte an, die gerade, wenn das Userscript abläuft, im Body vorhanden sind. Es kann sein, dass Elemente nachträglich, z. B. durch Ajax, hinzu gefügt werden, so dass das Element dann mitten drin steht.

Sempervivum

Versuch mal #zaler absolut zu positionieren.

Sempervivum

Ja, aber ich hatte diese mit Animation des Textes fertig und wollte es nicht auch noch in die jCanvas-Version einbauen. Text rechts anordnen kann ich noch sehr leicht ergänzen.

Sempervivum

Das kann man sehr leicht mit den vorhandenen Mitteln erreichen. Ich gebe dir hier jedoch ein Version mit SVG und d3.js, weil ich bei dieser auch die Animation des Textes implementiert habe. Beachte, dass Du dabei d3.js einbinden musst. jQuery ist nicht mehr erforderlich.

HTML

<!doctype html>
<html>
<head>
    <script src="//d3js.org/d3.v4.min.js"></script>
</head>
<body>
    <svg id="display1" width="500" height="500"></svg><br>
    <input id="val">
    <svg id="display2" width="500" height="500"></svg><br>
    <button id="start">Start</button>
    <script>
        function DataDisplay(selector, max, value, options) {
            var opts = {
                textTemplate: "{value}.00 $",
                barWidth: 300,
                barHeight: 20,
                radius: 5,
                duration: 1500,
                foregroundColor: "red",
                backgroundColor: "lightgrey",
                strokeWidth: 20,
                colorText: "orange",
                colors: [
                    { threshold: 30, colorAbove: 'yellow' },
                    { threshold: 60, colorAbove: 'green' }
                ]
            }
            function extend(a, b) {
                for (var key in b)
                    if (b.hasOwnProperty(key))
                        a[key] = b[key];
                return a;
            }

            function getText(value, max) {
                return opts.textTemplate.replace("{value}", value)
                    .replace("{remaining}", max - value)
            }

            function getColor(value, opts) {
                var color = opts.foregroundColor;
                if (opts.colors) {
                    opts.colors.forEach(function (item, idx) {
                        if (value > item.threshold) color = item.colorAbove;
                    });
                }
                return color;
            }
            extend(opts, options);
            var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
            var delta = opts.strokeWidth / 2 / opts.radius;
            var factor = max / opts.width;
            var oldValue = value;
            var xBar = 85;
            var svg = d3.select(selector);
            g = svg.append("g");

            var background = g.append("rect")
                .attr("rx", opts.radius)
                .attr("ry", opts.radius)
                .attr("x", xBar)
                .attr("y", 0)
                .attr("width", opts.barWidth)
                .attr("height", opts.barHeight)
                .style("fill", opts.backgroundColor);

            var foreground = g.append("rect")
                .attr("rx", opts.radius)
                .attr("ry", opts.radius)
                .attr("x", xBar)
                .attr("y", 0)
                .attr("width", opts.barWidth * value / max)
                .attr("height", opts.barHeight)
                .style("fill", opts.foregroundColor);

            var text = g.append("text")
                .attr("y", opts.barHeight / 2)
                .text(opts.textTemplate.replace("{value}", max)
                    .replace("{remaining}", max))
                .style("text-anchor", "left")
                .attr("alignment-baseline", "central")
                .attr("fill", "black")
                .attr("font-family", "sans-serif")
                .attr("font-size", "20px");

            wtxt = text.node().getBBox().width;
            text.text(getText(value, max))
            svg.attr("width", wtxt + opts.barWidth + 2 * opts.radius);
            svg.attr("height", opts.barHeight);
            background.attr("x", wtxt);
            foreground.attr("x", wtxt);

            this.update = function (value) {
                value = parseInt(value);
                foreground
                    .transition()
                    .style("fill", getColor(value, opts))
                    .attr("width", opts.barWidth * value / max)
                    .ease(d3.easeLinear)
                    .duration(opts.duration)
                    .on("end", function (d) {
                        text.text(getText(value, max))
                        console.log("end");
                        oldValue = value;
                    })
                    .tween("progress", function () {
                        return function (t) {
                            var currentValue = Math.round(oldValue + t * (value - oldValue));
                            text.text(getText(currentValue, max));
                        }
                    });
            }
        }
        var display1 = new DataDisplay("#display1", 1000, 400, {
            foregroundColor: "red",
            colors: [
                { threshold: 300, colorAbove: 'yellow' },
                { threshold: 600, colorAbove: 'green' }
            ],
            textTemplate: "{value}.00 $"
        });
        val.addEventListener("change", function () {
            display1.update(this.value);
        });

        var display2 = new DataDisplay("#display2", 100, 100, {
            foregroundColor: "red",
            colors: [
                { threshold: 30, colorAbove: 'yellow' },
                { threshold: 60, colorAbove: 'green' }
            ],
            textTemplate: "{remaining}.00 m",
            duration: 10000
        });
        start.addEventListener("click", function () {
            display2.update(0);
        });
    </script>

</body>
</html>

Alles anzeigen

Sempervivum

Draga_90: Du hättest für den Adventskalender besser einen neuen Thread auf gemacht, so geht es hier ein wenig durcheinander.

HTML:

Code

<div class="door"><span class="contentclose">17</span><span class="contentopen">Offen 17</span></div>

CSS:

Code

span.contentclose {
            display: inline;
        }
        span.contentopen {
            display: none;
        }
        .door.open span.contentclose {
            display: none;
        }
        .door.open span.contentopen {
            display: inline;
            font-size: 0.8em;
        }
        .door.open {
            background-color: transparent;
        }

Alles anzeigen

Jetzt musst Du nur noch verhindern, dass ein Türchen zu früh geöffnet wird. Sie dir dazu mal dies an:
Adventskalender

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"
});

Beiträge von Sempervivum

Hintergrundbild mit alternative Farbe

Eine andere Art von Lightbox

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

allgemeine fragen zu Javascript

Java Script Bibliotheken

Java Script Bibliotheken

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

allgemeine fragen zu Javascript

Bild einfügen in einer Tabelle

allgemeine fragen zu Javascript