Beiträge von Sempervivum

Sempervivum

Natürlich, man kann ja dem selben Element mehrere Klassen zuweisen.

Sempervivum

Wie diese Seite es macht, weiß ich nicht, aber ich würde es so machen:

Code

<style>
        .triggercontent  {
            display: inline-block;
        }
        #c1 {
          background-color: lightgrey;
        }
        #c2 {
          background-color: lightblue;
        }
        #c1.hovered {
          background-color: darkgrey;
        }
        #c2.hovered {
          background-color: turquoise;
        }
    </style>
    <section class="container" id="c1">
        <p class="content">pthjw</p>
        <p class="triggercontent"
           data-hovercolor="darkgrey">Email</p>
        <p class="content">öhrenjth </p>
    </section>
    <section class="container" id="c2">
        <p class="content">pthjw</p>
        <p class="triggercontent"
           data-hovercolor="blue">Irgend was</p>
        <p class="content">öhrenjth </p>
    </section>
    <script>
        $(".triggercontent").hover(function () {
            $(this).closest(".container").addClass("hovered");
        }, function () {
            $(this).closest(".container").removeClass("hovered");
        });
    </script>

Alles anzeigen

Erfordert jQuery, Du musst es einbinden, damit es funktioniert.

Sempervivum

Zufallsfarbe:

https://jsfiddle.net/Sempervivum/bnefbkwu/2/

Sempervivum

Hiermit:

data: { img: dataURL, tgroup : tgroup }

übergibst du nicht den Inhalt des input-Feldes sondern das ganze DOM-Element. So sollte es funktionieren:

Code

                var canvas = document.getElementById('mycanvas');
                var dataURL = canvas.toDataURL();
                var grp = document.getElementById('tGroup').value;
                $.ajax({
                    type: "POST",
                    url: "savepic.php",
                    data: { img: dataURL, tgroup: grp }
                }).done(function (msg) {
                    alert(msg);
                });

Und mit dem PHP bist Du ja schon auf dem richtigen Wege:

Code

$img = $_POST['img'];
   
   $tgroup = $_POST['tgroup'];
   
   if (strpos($img, 'data:image/png;base64') === 0) {
       
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $file = 'test-' . $tgroup . '.png';
   
      if (file_put_contents($file, $data)) {
         echo "Der Canvas wurde gespeichert als $file.";
      } else {
         echo 'Der Canvas konnte nicht gespeichert werden.';
      }   
     
   }

Alles anzeigen

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.

Beiträge von Sempervivum

Hintergrundfarbe eines Elements oder Divs ändern bei Link hover

Hintergrundfarbe eines Elements oder Divs ändern bei Link hover

allgemeine fragen zu Javascript

Canvas Datei auf Server per PHP speichern

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