Beiträge von Sempervivum

<div id="bg">
        <h1>
            Adventskalender 2018!
        </h1>
        <div class="Kalender">
            <div class="door"><span class="contentclose">17</span><span class="contentopen"><img src="images/busleft.png" /></span></div>
            <div class="door"><span class="contentclose">18</span><span class="contentopen">Offen 18</span></div>
            <div class="door"><span class="contentclose">19</span><span class="contentopen">Offen 19</span></div>
            <div class="door"><span class="contentclose">20</span><span class="contentopen">Offen 20</span></div>
        </div>
    </div>
    <div id="snow"></div>

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.toggle("open");
                } else {
                    // Hinweis, dass es noch zu frueh fuer dieses Tuerchen ist
                }
            });
        }

<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>

$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.';
      }   
     
   }

<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>