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.';
}
}Geht aber problemlos auch automatisch:
<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>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.
Hallo Draga, dieses Javascript sollte es tun:
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
}
})
}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.
Hallo Draga_90: Ja, das habe ich gemeint. Für die Prüfung ist dieses Javascript relevant:
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.
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.
warum verschiebt sich das den auf einigen seiten so doll und auf anderen seiten ist alles ok
Dieses:
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.
Versuch mal #zaler absolut zu positionieren.
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.
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.
<!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>Draga_90: Du hättest für den Adventskalender besser einen neuen Thread auf gemacht, so geht es hier ein wenig durcheinander.
HTML:
<div class="door"><span class="contentclose">17</span><span class="contentopen">Offen 17</span></div>CSS:
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;
}Jetzt musst Du nur noch verhindern, dass ein Türchen zu früh geöffnet wird. Sie dir dazu mal dies an:
Adventskalender