Beiträge von Sempervivum

Sempervivum

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:

html-seminar.de/woltlab/attachment/1812/

Sempervivum

Kann ich nicht reproduzieren. Wenn ich ein Bild einfüge, wird es auch angezeigt, etwa so:

Code

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

Sempervivum

Das kann ich leider nicht finden. Ist das im originalen HTML oder hast Du es hinzu gefügt?

Sempervivum

Dann brauchst Du diese nur im Selektor wegzulassen:

Code

let containers = document.querySelectorAll('div.slide');

Sempervivum

Zitat

Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist

Erledigt, so sind auch die unteren Teilseiten einbezogen:

Code

        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]);
        }

Alles anzeigen

Sempervivum

Das war einfacher als ich dachte. Dieses Javascript tut es bei mir:

Code

        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);
        }

Alles anzeigen

Und dieses CSS:

Code

    div.slide {
            position: relative;
        }

        canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            pointer-events: none;
        }

Alles anzeigen

Allerdings braucht dies jede Menge Rechenleistung. Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist.

Sempervivum

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.

Sempervivum

Zitat

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.

Sempervivum

Coole Sache! Du kannst einen transparenten Hintergrund erzeugen, indem Du den Renderer so änderst:

Code

        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);
            }

        }

Alles anzeigen

Sempervivum

Einfach die betr. Worte in ein span-Tag einbetten mit einer geeigneten Klasse, dann kannst Du sie problemlos anders formatieren.

Sempervivum

Wahnsinn, auch ein interessanter Ansatz! Ist aber ganz schön lang der Code.

Sempervivum

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.

HTML

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

Alles anzeigen

Sempervivum

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:

https://stackoverflow.com/questions/2987…des-with-jquery

Sempervivum

Zitat

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.

Sempervivum

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.

Sempervivum

Dafür gibt es hier ein gutes Tutorial:

Kontaktformular Tutorial

Sempervivum

Wahrscheinlich liegt das Problem nicht in dem Code, den Du gepostet hast, sondern im Umfeld:

Wie sieht die Funktion MailLoeschen aus? Woher weiß diese, welches Element gelöscht werden soll?

Und wie sieht das Umfeld deines Codes oben aus? Vermutlich in einem Eventhandler, der für einen Button registriert ist?

Sempervivum

Da wird durch das Skript in utils.js in Zeile 113 die Default-Aktion für den Klick unterdrückt. Deaktiviere das preventDefault() und es sollte funktionieren:

Code

$this._hide = function (event) {

            // Already hidden? Bail.
            if (!config.target.hasClass(config.visibleClass))
                return;

            // If an event was provided, cancel it.
            if (event) {

                // event.preventDefault(); // <== hier
                event.stopPropagation();

            }

Alles anzeigen

Sempervivum

Mein Computer kann leider diese Datei nicht auspacken. Poste besser die URL der Seite.

Sempervivum

Ich habe es jetzt mal getestet mit den Bilder mit der Fischtasse und bei mir funktioniert es einwandfrei, auch ohne z-index:

Code

    <div id="reel-wrapper">
        <img src="fish/DSCN0691.JPG" width="210" height="186" class="reel" id="image"
            data-images="fish/DSCN####.JPG|691..702">
        <img id="loadimg" width="210" height="186" src="/images/dia0.jpg">
    </div>

Code

    <style>
        #reel-wrapper {
            position: relative;
        }

        #loadimg {
            position: absolute;
            left: 0;
            top: 0;
            transition: opacity 1s;
            pointer-events: none;
        }
    </style>

Alles anzeigen

Code

loaded: function (e) {
    get(_images_).length > 1 || t.css({ backgroundImage: url(reel.substitute(opt.path + get(_image_), get)) }).attr({ src: cdn(transparent) });
    get(_stitched_) && t.attr({ src: cdn(transparent) });
    get(_reeled_) || set(_velocity_, opt.velocity || 0);
    set(_loading_, false);
    loaded = true;
    $("#loadimg").css({ "opacity": 0 });
},

Beiträge von Sempervivum

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

drag slider durchsichtig

Text formatierung im Fliesstext per CSS ändern / eigentlich leicht aber es will nicht

Suche ohne HTML Steuerzeichen zu berücksichtigen

Suche ohne HTML Steuerzeichen zu berücksichtigen

Suche ohne HTML Steuerzeichen zu berücksichtigen

Sprachwechsel via JavaScript Link

variablem Button eine Funktion zuweisen

Problem beim Formular senden

variablem Button eine Funktion zuweisen

HTML5 - Sprachwechsel (automatisch und per Tab)

HTML5 - Sprachwechsel (automatisch und per Tab)

Preloading Image für das Jquery Reel Plugin