Man kann sehr viel mit CSS-Animationen machen ohne Javascript, Timer und Schleifen. Nicht alles ist auch empfehlenswert, aber für diesen Fall ist es sehr gut geeignet und leicht zu lesen:
https://jsfiddle.net/Sempervivum/Lqr3go8q/
Wenn Du es jedoch programmieren wolltest, würde sich HSL am besten eignen, weil Du dann nur den Hue-Wert ändern musst, um verschiedene Farben zu bekommen.
Der Hex-Farbcode ist auch nur RGB, wobei die Farben im Hex-Format, zweistellig, aneinander gereiht sind.
Hallo Basti, ich habe auch versucht, dieses mit Tampermonkey zum Laufen zu bringen, in verschiedenen Varianten, aber ohne Erfolg.
Wahrscheinlich gibt es ein Forum für Tamper-/Greasemonkey, versuch es doch dort mal.
Redland hat die URL ihrer Seite gepostet, dort kann man alles einsehen, was das Herz begehrt, CSS, JS, HTML.
Wenn ich die Elemente so anordne:
<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>Und dem div#snow die Eigenschaft pointer-events:none gebe:
#snow {
pointer-events: none;funktioniert es bei mir einwandfrei.
Das Problem bei deinem Versuch in #120 war, dass Du nicht dem div#snow die Eigenschaft pointer-events:none gegeben hast, sondern einem ganz anderen.
Ich empfehle, dieses Muster von MrMurphy zu verwenden:
http://boratb.bplaced.net/index55.html
Es vermeidet die Nachteile von position:fixed und passt sich automatisch an die Höhe des Header bzw. bei dir des <h3> an.
Hallo Draga,
Klasse gemacht, Basti, Respekt! Aber wenn Du fragst, ob es etwas einfacheres gibt, ist meine Antwort klar, dass es mit jCanvas viel einfacher ist, denn dort schreibst Du einfach drawArc() und das Kreissegment ist fertig. Oder mit SVG und d3.js ist es ähnlich.
Schau mal, hier wird diese Aufgabe diskutiert:
https://stackoverflow.com/questions/1883…c-with-pure-css
Es ist aber einfacher und besser verständlich, wenn man es mit jCanvas macht. Dann hat man auch gleich eine API, um es steuern zu können. Vielleicht hast Du meine Circle Timer und die kreisförmige Anzeige gesehen.
Dass es nicht funktioniert, liegt daran, dass Du mit innerHTML den Inhalt der gesamten Box überschrieben hast, so dass er hier:
var dayClicked = parseInt(this.children[0].innerHTML);den geklickten Tag nicht mehr findet, weil das Element jetzt das Bild ist.
Du musst das Bild in das zweite content-span eintragen, so:
this.children[1].innerHTML = '<img src="./img/gif' + dayClicked + '.gif" />';Sehr gut, dann braucht man nur classlist.add durch classlist.toggle zu ersetzen:
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
}
});
}Das Bild kannst Du mit diesem CSS in den Vordergrund bringen:
.door.open {
background-color: transparent;
opacity: 1;
position: relative;
z-index: 999;
}Für das Schließen gibt es mehrere Möglichkeiten:
Was wäre dir lieber?
Ich verstehe es auch nicht richtig: Sind die Pünktchen Platzhalte und die URLs heißen in Wirklichkeit so (z. B.)?
<img src="ordner1/thumbs/anderes-bild.jpg">
<img src="ordner1/thumbs/ganz-anderes-bild.jpg">Vermisse da nur die dunklen Töne wie Schwarz und Braun,oder ich habe was Falsch gemacht?
Nein, Du hast nichts falsch gemacht. HSL bedeutet hue (Farbton), saturation (Sättigung) und lightness (Helligkeit). Und wie Du siehst, habe ich nur den Farbton zufällig gemacht. Die Absicht war, möglichst leuchtende Farben (max. Sättigung) zu bekommen. Wenn Du auch die dunklen (braun, schwarz) und hellen (weiß) Farben bekommen willst, musst Du auch die Helligkeit zufällig machen:
Oh, mir scheint ich hatte dein Posting #3 nicht richtig verstanden. Meinst Du das "Get in Touch" und die Emailadresse, die ebenfalls die Farbe ändern? Für alle Elemente im Container, bzw, Kindelemente des Containers, braucht man nur das CSS zu erweitern:
#c1.hovered p:first-child {
color: blue;
}
#c1.hovered p.triggercontent {
color: red;
}Das ist CSS. Bei CSS gibt es bestimmte Regeln, wenn die selbe Eigenschaft mehrmals definiert wird. Die wichtigsten:
Du kannst die Farben auch weich überblenden:
.container {
transition: background-color 1s;
}Natürlich, man kann ja dem selben Element mehrere Klassen zuweisen.
Wie diese Seite es macht, weiß ich nicht, aber ich würde es so machen:
<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>Erfordert jQuery, Du musst es einbinden, damit es funktioniert.
Hiermit:
data: { img: dataURL, tgroup : tgroup }
übergibst du nicht den Inhalt des input-Feldes sondern das ganze DOM-Element. So sollte es funktionieren:
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:
$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.';
}
}