Der Name des Bildes ist im CSS nicht notwendig, denn das ist eine allgemeine Formulierung. Verbal etwa: Nimm alle divs, die ein Attribut data-content mit dem Wert "content-2" haben. Darin suche jeweils ein img-Element und wende darauf die CSS-Anweisungen in den geschweiften Klammern an.
Und das CSS gehört dann in den Head.
Doch, das hat schon seine Richtigkeit, denn das ist CSS, kein HTML. Wenn Du es in deine HTML-Seite einbetten willst, muss es so aussehen und dann sind auch die spitzen Klammern da:
<style>
div[data-content="content-2"]>img {
width: 30%;
height: auto;
}
</style>Wenn Du die Einträge aus einer Datenbank ausliest, kannst Du Wildcards verwenden, siehe z. B. hier:
https://www.guru99.com/wildcards.html
Sogar Regexes sind möglich:
Nein, so kann es nicht funktionieren, denn das, was ich zuletzt gepostet habe, ist CSS und kein HTML. Informiere dich, wie Du CSS einbinden kannst:
Wenn es direkt in dem Container div.content liegt, so wie Du es in #12 gepostet hast, kannst Du es anpassen, indem Du die Größe in Prozent angibst:
div[data-content="content-2"]>img {
width: 30%;
height: auto;
}Liegt es in irgend welchen Untercontainern, kannst Du statt dessen Viewport-Units verwenden, z. B.:
width: 30vw;d. h. 30% der Breite des Browserfenstern.
Doch, das mit King Arthur's Team gibt es zwei Mal, oben und unten. Aber auch unten funktioniert es, wenn ich ein Bild einfüge:
Kann ich nicht reproduzieren. Wenn ich ein Bild einfüge, wird es auch angezeigt, etwa so:
<div class="slide" data-content="content-2">
<div class="img-wrap"><img src="img/2.jpg" alt="img2" /></div>
<h2>Round Table <span><img src="img/buttonpause.png">King Arthur's creative team
techniques</span></h2>
<button class="content-switch">Read more</button>
</div>Das kann ich leider nicht finden. Ist das im originalen HTML oder hast Du es hinzu gefügt?
Dann brauchst Du diese nur im Selektor wegzulassen:
let containers = document.querySelectorAll('div.slide');
Erledigt, so sind auch die unteren Teilseiten einbezogen:
function initHeart(canvas, container) {
let range = n => Array.from(Array(n).keys())
class Vector {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
reflect() {
return new Vector(-this.x, -this.y);
}
add(vector) {
return new Vector(this.x + vector.x, this.y + vector.y);
}
subtract(vector) {
return new Vector(this.x - vector.x, this.y - vector.y);
}
scale(scalar = 1) {
return new Vector(this.x * scalar, this.y * scalar);
}
length() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
distance(vector) {
let dx = this.x - vector.x;
let dy = this.y - vector.y;
return Math.sqrt(dx * dx + dy * dy);
}
}
class IO {
constructor() {
this.mouse = new Vector();
this.bindMouse();
}
bindMouse() {
window.addEventListener('mousemove', ({ x, y }) => {
this.mouse.x = x;
this.mouse.y = y;
});
}
}
class Point {
constructor({ position = new Vector(), color = '#f00', size = 3 }) {
this.position = position;
this.color = color;
this.size = size;
}
render(ctx) {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.position.x, this.position.y, this.size, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
}
class SpringPoint extends Point {
constructor({ target = new Vector(), elasticity = 1e-1, color = 'rgba(255, 0, 0, .6)', size = 3, damping = 1e-1 }) {
super({ position: target, color, size });
this.velocity = new Vector();
this.target = target;
this.elasticity = elasticity;
this.damping = damping;
}
updateVelocity() {
let damping = this.velocity.scale(this.damping);
let force = this.target
.subtract(this.position)
.scale(this.elasticity)
.subtract(damping);
this.velocity = this.velocity.add(force);
}
updatePosition() {
this.position = this.position.add(this.velocity);
}
update() {
this.updatePosition();
this.updateVelocity();
}
}
class SpringTrail extends SpringPoint {
constructor(config) {
super(config);
this.trail = range(config.trailSize || 10).map(index => {
config.target = this.position;
config.elasticity = 1 / (index * 8);
config.damping = 8 / (index * 10 + 5);
return new SpringPoint(config);
});
}
update() {
super.update();
this.trail.forEach(point => point.update());
}
render(ctx) {
super.render(ctx);
this.trail.forEach(point => point.render(ctx));
}
}
class Physics {
update(objects) {
objects.forEach(object => object.update());
}
}
class Renderer {
constructor(ctx, size = { width: 100, height: 100 }) {
this.ctx = ctx;
this.size = size;
}
render(objects) {
objects.forEach(object => object.render(ctx));
}
clear() {
// this.ctx.fillStyle = 'rgba(0, 0, 0, .2)';
this.ctx.clearRect(0, 0, this.size.width, this.size.height);
}
}
class Engine {
constructor(physics, renderer, objects = []) {
this.physics = physics;
this.renderer = renderer;
this.objects = objects;
}
add(...objects) {
this.objects = this.objects.concat(objects);
}
tick() {
this.physics.update(this.objects);
}
render() {
this.renderer.render(this.objects);
}
clear() {
this.renderer.clear();
}
}
// let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');
let io = new IO();
let engine = new Engine(
new Physics(),
new Renderer(ctx, { width: canvas.width, height: canvas.height })
);
let origin = new Vector(canvas.width / 2, canvas.height / 2);
// This is what generates the shape
let polar = (rad, time) => {
rad += Math.sin(time / 100);
let x = 16 * Math.sin(rad) ** 3;
let y = 13 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad);
let scale = (Math.sin(time / 10) + 3) * 4;
return new Vector(x * scale, -y * scale)
.add(origin.add(io.mouse.subtract(origin).scale(0.5)));
};
let random = (min = 0, max = 1) => Math.random() * (max - min) + min;
let targetsSize = 60;
// Creating the points for the shape
let targets = [];
for (let i = 0; i < targetsSize; i++) {
let target = new Vector(random(0, canvas.width), random(0, canvas.height));
engine.add(new SpringTrail({ target: target, size: 1.3, trailSize: 10, color: "rgba(230, 10, 40, 0.8)" }));
targets.push(target);
}
let time = 0;
(function animate() {
if (container.classList.contains('current') || container.classList.contains('show')) {
time++;
engine.clear();
engine.tick();
engine.render();
updateTargets();
}
window.requestAnimationFrame(animate);
})();
// Applying the shape to the target points
function updateTargets() {
for (let i = 0; i < targetsSize; i++) {
let lerp = i / (targetsSize - 1) * Math.PI * 2 + random() / 10;
let result = polar(lerp, time);
targets[i].x = result.x;
targets[i].y = result.y;
// Randomly swap two points
if (random() < 0.004) {
let rnd1 = Math.floor(random(0, targets.length));
let rnd2 = Math.floor(random(0, targets.length));
[targets[rnd1], targets[rnd2]] = [targets[rnd2], targets[rnd1]];
}
}
}
}
let containers = document.querySelectorAll('div.slide, div.content');
for (let i = 0; i < containers.length; i++) {
let canvas = document.createElement('canvas');
containers[i].appendChild(canvas);
initHeart(canvas, containers[i]);
}Das war einfacher als ich dachte. Dieses Javascript tut es bei mir:
function initHeart(canvas) {
let range = n => Array.from(Array(n).keys())
class Vector {
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
reflect() {
return new Vector(-this.x, -this.y);
}
add(vector) {
return new Vector(this.x + vector.x, this.y + vector.y);
}
subtract(vector) {
return new Vector(this.x - vector.x, this.y - vector.y);
}
scale(scalar = 1) {
return new Vector(this.x * scalar, this.y * scalar);
}
length() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
distance(vector) {
let dx = this.x - vector.x;
let dy = this.y - vector.y;
return Math.sqrt(dx * dx + dy * dy);
}
}
class IO {
constructor() {
this.mouse = new Vector();
this.bindMouse();
}
bindMouse() {
window.addEventListener('mousemove', ({ x, y }) => {
this.mouse.x = x;
this.mouse.y = y;
});
}
}
class Point {
constructor({ position = new Vector(), color = '#f00', size = 3 }) {
this.position = position;
this.color = color;
this.size = size;
}
render(ctx) {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.position.x, this.position.y, this.size, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
}
class SpringPoint extends Point {
constructor({ target = new Vector(), elasticity = 1e-1, color = 'rgba(255, 0, 0, .6)', size = 3, damping = 1e-1 }) {
super({ position: target, color, size });
this.velocity = new Vector();
this.target = target;
this.elasticity = elasticity;
this.damping = damping;
}
updateVelocity() {
let damping = this.velocity.scale(this.damping);
let force = this.target
.subtract(this.position)
.scale(this.elasticity)
.subtract(damping);
this.velocity = this.velocity.add(force);
}
updatePosition() {
this.position = this.position.add(this.velocity);
}
update() {
this.updatePosition();
this.updateVelocity();
}
}
class SpringTrail extends SpringPoint {
constructor(config) {
super(config);
this.trail = range(config.trailSize || 10).map(index => {
config.target = this.position;
config.elasticity = 1 / (index * 8);
config.damping = 8 / (index * 10 + 5);
return new SpringPoint(config);
});
}
update() {
super.update();
this.trail.forEach(point => point.update());
}
render(ctx) {
super.render(ctx);
this.trail.forEach(point => point.render(ctx));
}
}
class Physics {
update(objects) {
objects.forEach(object => object.update());
}
}
class Renderer {
constructor(ctx, size = { width: 100, height: 100 }) {
this.ctx = ctx;
this.size = size;
}
render(objects) {
objects.forEach(object => object.render(ctx));
}
clear() {
// this.ctx.fillStyle = 'rgba(0, 0, 0, .2)';
this.ctx.clearRect(0, 0, this.size.width, this.size.height);
}
}
class Engine {
constructor(physics, renderer, objects = []) {
this.physics = physics;
this.renderer = renderer;
this.objects = objects;
}
add(...objects) {
this.objects = this.objects.concat(objects);
}
tick() {
this.physics.update(this.objects);
}
render() {
this.renderer.render(this.objects);
}
clear() {
this.renderer.clear();
}
}
// let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');
let io = new IO();
let engine = new Engine(
new Physics(),
new Renderer(ctx, { width: canvas.width, height: canvas.height })
);
let origin = new Vector(canvas.width / 2, canvas.height / 2);
// This is what generates the shape
let polar = (rad, time) => {
rad += Math.sin(time / 100);
let x = 16 * Math.sin(rad) ** 3;
let y = 13 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad);
let scale = (Math.sin(time / 10) + 3) * 4;
return new Vector(x * scale, -y * scale)
.add(origin.add(io.mouse.subtract(origin).scale(0.5)));
};
let random = (min = 0, max = 1) => Math.random() * (max - min) + min;
let targetsSize = 60;
// Creating the points for the shape
let targets = [];
for (let i = 0; i < targetsSize; i++) {
let target = new Vector(random(0, canvas.width), random(0, canvas.height));
engine.add(new SpringTrail({ target: target, size: 1.3, trailSize: 10, color: "rgba(230, 10, 40, 0.8)" }));
targets.push(target);
}
let time = 0;
(function animate() {
time++;
engine.clear();
engine.tick();
engine.render();
updateTargets();
window.requestAnimationFrame(animate);
})();
// Applying the shape to the target points
function updateTargets() {
for (let i = 0; i < targetsSize; i++) {
let lerp = i / (targetsSize - 1) * Math.PI * 2 + random() / 10;
let result = polar(lerp, time);
targets[i].x = result.x;
targets[i].y = result.y;
// Randomly swap two points
if (random() < 0.004) {
let rnd1 = Math.floor(random(0, targets.length));
let rnd2 = Math.floor(random(0, targets.length));
[targets[rnd1], targets[rnd2]] = [targets[rnd2], targets[rnd1]];
}
}
}
}
let containers = document.querySelectorAll('div.slide');
for (let i = 0; i < containers.length; i++) {
let canvas = document.createElement('canvas');
containers[i].appendChild(canvas);
initHeart(canvas);
}Und dieses CSS:
div.slide {
position: relative;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
pointer-events: none;
}Allerdings braucht dies jede Menge Rechenleistung. Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist.
Da wird man wohl das Skript ein wenig erweitern müssen, so dass es für mehrere Canvas funktioniert. Wenn ich Zeit habe, werde ich es versuchen.
Wenn es in den Body kommt klappt es nur auf einer Seite, nicht gleichzeitig auf mehreren!
Versuche, das Canvas mit position: fixed; zu fixieren. Dann wird es natürlich nicht mit sliden. Wenn Du das möchtest, musst Du wohl in jeder Unterseite bzw. div.slide ein Canvas einrichten.
Coole Sache! Du kannst einen transparenten Hintergrund erzeugen, indem Du den Renderer so änderst:
class Renderer {
constructor(ctx, size = { width: 100, height: 100 }) {
this.ctx = ctx;
this.size = size;
}
render(objects) {
objects.forEach(object => object.render(ctx));
}
clear() {
// this.ctx.fillStyle = 'rgba(0, 0, 0, .2)';
this.ctx.clearRect(0, 0, this.size.width, this.size.height);
}
}Einfach die betr. Worte in ein span-Tag einbetten mit einer geeigneten Klasse, dann kannst Du sie problemlos anders formatieren.
Wahnsinn, auch ein interessanter Ansatz! Ist aber ganz schön lang der Code.
Ganz so einfach, wie ich dachte, war es nicht, aber ich habe mal eine grobe Demo gemacht. Was noch fehlt ist das Rückgängigmachen wenn man eine erneute Suche startet.
<!DOCTYPE html>
<html>
<head>
<title>Text hervorheben</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://use.fontawesome.com/e34d8d1dc9.js"></script>
<style>
.mark {
background-color: lightblue;
}
</style>
</head>
<body>
<label for="searchinput"><i class="fa fa-search" aria-hidden="true"></i><span class="sr-only">Search
FAQ</span></label>
<input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false"
autocorrect="off" tabindex="1">
<div id="content">
<ul>
<li>Karl Klapp</li>
<li>Hans Schranz</li>
<li>Karl Napf</li>
<li>Peter Meier</li>
<li>Hans Mayer</li>
<li>Guido Petersen</li>
<li>Ingo Hansen</li>
<li>Eduard Karlsson</li>
</ul>
</div>
<script>
$("#searchinput").on("change", function () {
$("#content").find(":not(iframe)").addBack().contents().filter(function () {
return this.nodeType == 3;
}).each(function (idx, ele) {
if ($(ele).text().indexOf($("#searchinput").val()) != -1) {
var newHTML = $(ele).text().replace($("#searchinput").val(), '<span class="mark">' + $("#searchinput").val() + '</span>');
$(ele).replaceWith("<span>" + newHTML + "</span>");
}
});
});
</script>
</body>
</html>Da muss man wohl alle Textnodes heraus suchen und für jeden die Markierung, wie Du es schon hast, durchführen. Am einfachsten geht das mit jQuery:
Gehe in der Ordnerstruktur nach oben, bis du einen Ordner findest, der EN heißt.
Suche in diesem Ordner und seinen Unterordnern eine Datei mit gleichem Namen und zeige sie an.
Das funktioniert nicht mit Javascript, weil diese Suche auf dem Server stattfinden muss. D. h. wenn Du dieses Verfahren umsetzen willst, brauchst Du zusätzlich PHP.
Wenn die Ordner jedoch vollkommen parallel aufgebaut sind, brauchst Du einen solchen Suchvorgang gar nicht: Du musst nur in der URL das Länderkürzel austauschen und dann die Seite mit der anderen Sprache laden.
Die Erklärung findest Du hier:
https://stackoverflow.com/questions/2684…nding-innerhtml
Jedesmal, wenn Du das HTML mit innerHTML überschreibst, gehen die Eventlistener verloren. Lösung, indem Du den unbequemen Weg gehst und auch das p-Element mit document.createElement anlegst.