Nein, so geht das nicht. Du musst background-image verwenden:
https://wiki.selfhtml.org/wiki/CSS/Eigen…ackground-image
Oder ein Image-Objekt:
var img = new Image();
img.src = "augeGruen.gif";
document.getElementById('bl' +zw[1]).appendChild(img);das in diesen fall die variabel f eine fortlaufene nummer h bekommt
Das lässt sich machen, aber nur mit einiger Trickserei. Es gibt viel bessere Lösungen:
for (var j = 0; j < nrcols; j++) {
var box = document.createElement("div");
box.className = "gridbox";
var h=''+i+''+j+'';
var f'+h+'='hallo'+h;
box.setAttribute("data-idx", i + "_" + j;
box.addEventListener("click", function() {
alert("hallo " + this.getAttribute("data-idx"));
});
box.id ='hh'+h+'';
row.appendChild(box);
}Ja, das geht.
jQuery:
$("#div1, #div2, #div3").each(function (idx, item) {
$(item).css({
"position": "fixed", "background-color": "blue", top: "0px", left: "0px",
height: "100px", width: "200px"
});
});Ohne jQuery, indem Du die Funktion document.querySelectorAll() verwendest und über das Ergebnis mit einer for-Schleife iterierst.
Es kann auch empfehlenswert sein, anstatt die IDs aufzuzählen, allen die selbe Klasse zu geben.
So etwas:
function getSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return {wi:myWidth, hi:myHeight};
}kann dir jQuery abnehmen.
Ich kenne nur Tampermonkey und da gibt es einen Funktionsaufruf um CSS hinzu zu fügen. Offenbar gibt es das auch in Greasemonkey:
Da hast Du Recht. Abfangen kann man es leicht:
function updateBarDisplay(selector, value) {
$(selector).each(function (idx, ele) {
var canv = $(this);
var max = canv.data("max");
var opts = canv.data("opts");
if (value > max) value = max;
var barWidth = value / max * opts.barWidth;
canv.setLayer('text', {
text: getText(value, max, opts)
}).stopLayer('bar')
.animateLayer('bar', {
width: barWidth,
fillStyle: getColor(value, opts)
}, {
duration: 1000,
easing: 'linear',
step: function (now, fx, layer) {
console.log(now, fx);
}
});
});
}Möglicher Weise müsste man noch in irgend einer Form einen Hinweis auf den Überlauf anbringen.
Kein Problem:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
<canvas id="display" class="circlecountdown"
width="220" height="220"></canvas>
<input id="val" />
<script>
$("#val").on("change", function () {
updateBarDisplay("#display", this.value);
});
function getColor(value, opts) {
var color = opts.colorBar;
if (opts.colors) {
opts.colors.forEach(function (item, idx) {
if (value > item.threshold) color = item.colorAbove;
});
}
return color;
}
function getText(value, max, opts) {
return opts.templateText.replace("{value}", value)
.replace("{remaining}", max - value)
}
function updateBarDisplay(selector, value) {
$(selector).each(function (idx, ele) {
var canv = $(this);
var max = canv.data("max");
var opts = canv.data("opts");
var barWidth = value / max * opts.barWidth;
canv.setLayer('text', {
text: getText(value, max, opts)
}).stopLayer('bar')
.animateLayer('bar', {
width: barWidth,
fillStyle: getColor(value, opts)
}, {
duration: 1000,
easing: 'linear',
step: function (now, fx, layer) {
console.log(now, fx);
}
});
});
}
function createBarDisplay(selector, value, max, options) {
var opts = {
barWidth: 300,
barHeight: 40,
cornerRadius: 10,
colorBar: "blue",
colorBg: "lightgrey",
colorText: "orange",
templateText: "{value} $",
textPos: "left",
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' }
]
}
$.extend(opts, options);
$(selector).each(function (idx, ele) {
var pos = 10;
var canv = $(this);
canv.data("opts", opts);
canv.data("max", max)
var colorBar = getColor(value, opts);
var height = 2 * pos + opts.barHeight;
canv.drawText({
layer: true,
name: 'text',
fromCenter: false,
fillStyle: opts.colorText,
strokeWidth: 4,
x: pos, y: pos,
fontSize: 40,
fontFamily: 'Arial',
text: opts.templateText.replace("{value}", max).replace("{remaining}", max)
});
yBar = pos + canv.measureText('text').height / 2 - opts.barHeight / 2;
if (opts.textPos == "left") {
var xBar = pos + canv.measureText('text').width + 10,
xText = pos;
} else {
var xBar = pos,
xText = pos + opts.barWidth + 10;
}
var width = pos + canv.measureText('text').width + 10 + opts.barWidth + pos;
canv.attr("width", width);
canv.attr("height", height);
canv.setLayer('text', {
text: getText(value, max, opts),
x: xText
}).drawLayers();
canv.drawRect({
layer: true,
name: 'background',
fromCenter: false,
fillStyle: opts.colorBg,
x: xBar, y: yBar,
cornerRadius: opts.cornerRadius,
width: opts.barWidth, height: opts.barHeight
});
canv.drawRect({
layer: true,
name: 'bar',
fromCenter: false,
fillStyle: colorBar,
x: xBar, y: yBar,
cornerRadius: opts.cornerRadius,
width: value / max * opts.barWidth, height: opts.barHeight
});
});
}
createBarDisplay('#display', 10, 100, {
colorBar: 'red',
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' },
],
templateText: "{remaining} $",
textPos: "right"
});
</script>
</body>
</html>Ich habe auch die Kreisanzeige erweitert, so dann man mehrere Farben verwenden kann:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
<canvas id="display" class="circlecountdown"
width="220" height="220"></canvas>
<input id="val" />
<script>
// hier wird ein Eventlistener für das input-Feld
// mit der ID "val" (Zeile 12) registriert
// staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
$("#val").on("change", function () {
updateCircleDisplay("#display", this.value);
});
function getColor(value, opts) {
var color = opts.colorCircle;
if (opts.colors) {
opts.colors.forEach(function (item, idx) {
if (value > item.threshold) color = item.colorAbove;
});
}
return color;
}
function updateCircleDisplay(selector, value) {
$(selector).each(function (idx, ele) {
var canv = $(this);
var max = canv.data("max");
var deg = value / max * 360;
canv.setLayer('text', {
text: canv.data("opts").templateText.replace("{value}", value),
}).stopLayer('circle')
.animateLayer('circle', {
end: deg,
strokeStyle: getColor(value, canv.data("opts"))
}, {
duration: 1000,
easing: 'linear',
step: function (now, fx, layer) {
console.log(now, fx);
}
});
});
}
function createCircleDisplay(selector, value, max, options) {
var opts = {
radius: 100,
colorCircle: "blue",
strokeWidthCircle: 20,
colorBgCircle: "lightgrey",
strokeWidthBgCircle: 20,
colorText: "orange",
templateText: "{value} $",
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' }
]
}
$.extend(opts, options);
// hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
// siehe Aufruf der Funktion in Zeile 94
// staende dieses Skript im Head, waere dieses Element noch nicht definiert
$(selector).each(function (idx, ele) {
var canv = $(this);
canv.data("opts", opts);
canv.data("max", max)
var deg = value / max * 360;
var colorCircle = getColor(value, opts);
var size = 2 * opts.radius + opts.strokeWidthCircle;
var pos = opts.radius + opts.strokeWidthCircle / 2;
canv.attr("width", size);
canv.attr("height", size);
canv.drawArc({
layer: true,
name: 'circle2',
strokeStyle: opts.colorBgCircle,
strokeWidth: opts.strokeWidthBgCircle,
x: pos, y: pos,
radius: opts.radius,
// start and end angles in degrees
start: 0, end: 360
});
canv.drawArc({
layer: true,
name: 'circle',
strokeStyle: colorCircle,
strokeWidth: opts.strokeWidthCircle,
rounded: true,
x: pos, y: pos,
radius: opts.radius,
// start and end angles in degrees
start: 0, end: deg
});
canv.drawText({
layer: true,
name: 'text',
fillStyle: opts.colorText,
strokeWidth: 4,
x: pos, y: pos,
fontSize: 40,
fontFamily: 'Arial',
text: opts.templateText.replace("{value}", value)
});
});
}
createCircleDisplay('#display', 80, 100, {
colorCircle: 'red',
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' }
]
});
</script>
</body>
</html>Gut gemacht, Basti! Solche eine Balkenanzeige kann man sehr gut mit HTML und CSS erzeugen.
Ich habe trotzdem mal meine mit jCanvas umgestellt:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
<canvas id="display" class="circlecountdown"
width="220" height="220"></canvas>
<input id="val" />
<script>
$("#val").on("change", function () {
updateBarDisplay("#display", this.value);
});
function getColor(value, opts) {
var color = opts.colorBar;
if (opts.colors) {
opts.colors.forEach(function (item, idx) {
if (value > item.threshold) color = item.colorAbove;
});
}
return color;
}
function updateBarDisplay(selector, value) {
$(selector).each(function (idx, ele) {
var canv = $(this);
var max = canv.data("max");
var opts = canv.data("opts");
var barWidth = value / max * opts.barWidth;
canv.setLayer('text', {
text: opts.templateText.replace("{value}", value),
}).stopLayer('bar')
.animateLayer('bar', {
width: barWidth,
fillStyle: getColor(value, opts)
}, {
duration: 1000,
easing: 'linear',
step: function (now, fx, layer) {
console.log(now, fx);
}
});
});
}
function createBarDisplay(selector, value, max, options) {
var opts = {
barWidth: 300,
barHeight: 40,
cornerRadius: 10,
colorBar: "blue",
colorBg: "lightgrey",
colorText: "orange",
templateText: "{value} $",
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' }
]
}
$.extend(opts, options);
$(selector).each(function (idx, ele) {
var pos = 10;
var canv = $(this);
canv.data("opts", opts);
canv.data("max", max)
var colorBar = getColor(value, opts);
var height = 2 * pos + opts.barHeight;
canv.drawText({
layer: true,
name: 'text',
fromCenter: false,
fillStyle: opts.colorText,
strokeWidth: 4,
x: pos, y: pos,
fontSize: 40,
fontFamily: 'Arial',
text: opts.templateText.replace("{value}", max)
});
var xBar = pos + canv.measureText('text').width + 10,
yBar = pos + canv.measureText('text').height / 2 - opts.barHeight / 2;
var width = pos + canv.measureText('text').width + 10 + opts.barWidth + pos;
canv.attr("width", width);
canv.attr("height", height);
canv.setLayer('text', {
text: opts.templateText.replace("{value}", value)
}).drawLayers();
canv.drawRect({
layer: true,
name: 'background',
fromCenter: false,
fillStyle: opts.colorBg,
x: xBar, y: yBar,
cornerRadius: opts.cornerRadius,
width: opts.barWidth, height: opts.barHeight
});
canv.drawRect({
layer: true,
name: 'bar',
fromCenter: false,
fillStyle: colorBar,
x: xBar, y: yBar,
cornerRadius: opts.cornerRadius,
width: value / max * opts.barWidth, height: opts.barHeight
});
});
}
createBarDisplay('#display', 10, 100, {
colorBar: 'red',
colors: [
{ threshold: 30, colorAbove: 'yellow' },
{ threshold: 60, colorAbove: 'green' }
]
});
</script>
</body>
</html>Jetzt kann man beliebige Farben verwenden, weil die Schwellen und die Farben in einem Array übergeben werden.
Interessant, da wird eine Diskussion verlinkt, wo beschrieben wird, wie es mit PHP geht. Daran hatte ich gar nicht gedacht.
Nach allem was mir bekannt ist, geht das mit CSS nicht. Die einzige Lösung, die mir einfällt ist, mit Canvas das Bild zu zeichnen. Dann hat man Zugriff auf die Pixel, kann die Farbe ermitteln und die Hintergrundfarbe des Containers setzen. Kannst Du das nicht manuell machen oder muss es sich dynamisch verschiedenen Bildern anpassen?
Dieses:
var img=document.getElementById("NAME DER BILDDATEI");
ctx.drawImage(img,(ctx.canvas.width-200)/2,0);führt zu einem Fehler, da das betr. img-Element nicht definiert ist. Ich habe es deshalb hinzu gefügt und unsichtbar gemacht.
Und dieses:
ctx.globalCompositeOperation='source-atop';verhindert anscheinend das Füllen. Ich kenne es noch nicht und habe es zunächst mal auskommentiert. Ebenso das Füllen, weil es dann alles andere überschreibt.
Dies funktioniert dann bei mir:
<canvas width="1000" height="490" id="canvas">Sorry, no canvas available</canvas>
<img id="das-bild" src="images/dia0.jpg" />
<style>#das-bild {display: none;}</style>
<div id="content">
<h1>Test Logo Generator</h1>
<input type="text" id="tgroup" placeholder="Test"><br>
<h3>Logo:</h3>
<a href="#" class="button-link" id="blue">Blue</a>
</div>
<script>
window.onload = function () {
function getGroup() {
return document.getElementById('tgroup').value.trim();
}
function drawCanvas(color, c) {
var ctx
if (!c) {
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
} else {
ctx = c
}
ctx.font = '12.76px EB Garamond';
var wit = ctx.measureText(getGroup().toUpperCase()).width
ctx.canvas.width = 200
ctx.canvas.height = 101
ctx.font = '12.76px EB Garamond';
ctx.globalCompositeOperation = 'source-over';
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = color;
ctx.textAlign = 'center';
var img = document.getElementById("das-bild");
ctx.drawImage(img, (ctx.canvas.width - 200) / 2, 0);
ctx.fillText("Test", ctx.canvas.width / 2, 75);
ctx.fillText(getGroup().toUpperCase(), ctx.canvas.width / 2, 98);
//ctx.globalCompositeOperation = 'source-atop';
//ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
document.getElementById('blue').addEventListener('click', function () {
var format = "png";
drawCanvas("rgb(10,48,135)");
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "savepic.php",
data: { img: dataURL }
}).done(function (msg) {
alert(msg);
});
});
}
</script>Und, soweit ich mir erinnere, muss das Upload-Verzeichnis existieren, damit das Hochladen funktioniert.
Und ja, die Werte (values) sind die Mutltiplikatoren. Wahrscheinlich wäre es klarer gewesen, wenn ich data-Attribute mit dem richtigen Namen verwendet hätte.
Anscheinend habe ich mir da etwas angewöhnt, was eine Unart ist und im IE nicht funktioniert: Darauf zu vertrauen, dass DOM-Elemente mit einer ID als globale Variablen zur Verfügung stehen.
Verwendest Du den IE? Dann versuche dieses:
<form>
Gewicht: <input id="gewicht" />
Material:
<select id="material">
<option value="">Bitte auswählen</option>
<option value="10">Baumwolle</option>
<option value="15">Leine</option>
<option value="20">Seide</option>
</select>
<span id="ergebnis"></span>
</form>
<script>
function berechnen() {
var valgewicht = gewicht.value;
var idxmaterial = material.selectedIndex;
var preis = material.options[idxmaterial].value;
if (valgewicht != "" && idxmaterial != 0) {
ergebnis.innerHTML = valgewicht * preis + ' €';
} else {
ergebnis.innerHTML = "";
}
}
var gewicht = document.getElementById("gewicht");
var material = document.getElementById("material");
var ergebnis = document.getElementById("ergebnis");
gewicht.addEventListener("input", berechnen);
material.addEventListener("change", berechnen);
</script>Probiere dieses:
<form>
Gewicht: <input id="gewicht" />
Material:
<select id="material">
<option value="">Bitte auswählen</option>
<option value="10">Baumwolle</option>
<option value="15">Leine</option>
<option value="20">Seide</option>
</select>
<span id="ergebnis"></span>
<script>
function berechnen() {
var valgewicht = gewicht.value;
var preis = material.options[material.selectedIndex].value;
if (valgewicht != "" && material.selectedIndex != 0) {
ergebnis.innerHTML = valgewicht * preis + ' €';
}
}
gewicht.addEventListener("input", berechnen);
material.addEventListener("input", berechnen);
</script>
</form>Ich habe es ohne Berechnen-Button gemacht. so dass das Ergebnis sofort angezeigt wird. Natürlich kannst Du auch solch einen Button hinzu fügen.
Das erste scheint mir einfacher zu sein. Hast Du es damit versucht?
Das ist kein Problem: Für jeden Kreis definierst Du ein Display-Canvas mit jeweils einer anderen ID und die Funktionen rufst Du mehrmals, jeweils mit der richtigen ID auf. Würde dann so aussehen:
https://jsfiddle.net/Sempervivum/u4x71bvr/2/
Wenn alle Kreise gleich aussehen sollen und die selben Maximalwerte haben, kannst Du auch eine Klasse vergeben und die Initialisierung darauf machen.
Hast Du es mit dem Timer genau so gemacht wie bei Stackoverflow beschrieben? Poste doch mal den Code.
Schau mal ob dies dir weiter hilft:
https://stackoverflow.com/questions/3196…brary-is-loaded
Demnach wird Angular asynchron geladen.
Ich denke, Angular baut auf jQuery auf. Ändere mal die Reihenfolge:
// @require https://code.jquery.com/jquery-2.1.3.min.js
// @require https://cdn.rawgit.com/brinley…er/libs/jSignature.min.js
// @require https://cdnjs.cloudflare.com/a…r.js/1.4.2/angular.min.js
Nein, so wie Du es beschreibst, funktioniert es leider nicht, weil die Kreise keine HTML-Elemente sondern Layers von jCanvas sind.
Ich habe mal etwas ausgearbeitet, was deinen Wunsch erfüllen sollte:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
</head>
<body>
<canvas id="display" class="circlecountdown"
width="220" height="220"></canvas>
<input id="val" />
<script>
// hier wird ein Eventlistener für das input-Feld
// mit der ID "val" (Zeile 12) registriert
// staende dieses Skript im Head, wäre dieses input-Feld noch nicht definiert
$("#val").on("change", function () {
updateCircleDisplay("#display", this.value);
});
function getColor(value, opts) {
if (opts.threshold) {
if (value < opts.threshold) return opts.colorCircle;
else return opts.colorAbove;
} else {
return opts.colorCircle;
}
}
function updateCircleDisplay(selector, value) {
$(selector).each(function (idx, ele) {
var canv = $(this);
var max = canv.data("max");
var deg = value / max * 360;
canv.setLayer('text', {
text: canv.data("opts").templateText.replace("{value}", value),
}).stopLayer('circle')
.animateLayer('circle', {
end: deg,
strokeStyle: getColor(value, canv.data("opts"))
}, {
duration: 1000,
easing: 'linear',
step: function (now, fx, layer) {
console.log(now, fx);
}
});
});
}
function createCircleDisplay(selector, value, max, options) {
var opts = {
radius: 100,
colorCircle: "blue",
strokeWidthCircle: 20,
colorBgCircle: "lightgrey",
strokeWidthBgCircle: 20,
colorText: "orange",
templateText: "{value} $",
threshold: 50,
colorAbove: 'green'
}
$.extend(opts, options);
// hier wird auf das Canvas-Element mit der ID "display" (Zeile 10) zugegriffen
// siehe Aufruf der Funktion in Zeile 94
// staende dieses Skript im Head, waere dieses Element noch nicht definiert
$(selector).each(function (idx, ele) {
var canv = $(this);
canv.data("opts", opts);
canv.data("max", max)
var deg = value / max * 360;
var colorCircle = getColor(value, opts);
var size = 2 * opts.radius + opts.strokeWidthCircle;
var pos = opts.radius + opts.strokeWidthCircle / 2;
canv.attr("width", size);
canv.attr("height", size);
canv.drawArc({
layer: true,
name: 'circle2',
strokeStyle: opts.colorBgCircle,
strokeWidth: opts.strokeWidthBgCircle,
x: pos, y: pos,
radius: opts.radius,
// start and end angles in degrees
start: 0, end: 360
});
canv.drawArc({
layer: true,
name: 'circle',
strokeStyle: colorCircle,
strokeWidth: opts.strokeWidthCircle,
rounded: true,
x: pos, y: pos,
radius: opts.radius,
// start and end angles in degrees
start: 0, end: deg
});
canv.drawText({
layer: true,
name: 'text',
fillStyle: opts.colorText,
strokeWidth: 4,
x: pos, y: pos,
fontSize: 40,
fontFamily: 'Arial',
text: opts.templateText.replace("{value}", value)
});
});
}
createCircleDisplay('#display', 80, 100, {
threshold: 60,
colorCircle: 'red',
colorAbove: 'green'
});
</script>
</body>
</html>Eine coole Erweiterung wäre jetzt noch, wenn der Text nicht springt sondern während der Animation herauf- bzw. herunter gezählt würde :-;