Beiträge von Sempervivum

Sempervivum · 12. März 2019

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 · 10. März 2019

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

Sempervivum · 8. März 2019

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

Sempervivum · 8. März 2019

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 · 8. März 2019

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/ques…ct-text-nodes-with-jquery

Sempervivum · 6. März 2019

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 · 6. März 2019

Die Erklärung findest Du hier:

https://stackoverflow.com/ques…after-appending-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 · 6. März 2019

Dafür gibt es hier ein gutes Tutorial:

Kontaktformular Tutorial

Sempervivum · 6. März 2019

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 · 5. März 2019

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 · 5. März 2019

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

Sempervivum · 3. März 2019

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

Sempervivum · 3. März 2019

Normaler Weise liegt das oben, was zuletzt notiert wurde, aber wahrscheinlich modifiziert das Reel-Skript das DOM, so dass es dennoch überdeckt wird. Versuche, mit z-index das Ladebild nach vorn zu holen:

Code

#loadimg {
    z-index: 9999;
}

Sempervivum · 3. März 2019

Zitat

Bei Img Src = "... " hier alles was du für Peel benötigst ---> habe ich die Bildadresse zum Ladebild, was den Player überlagern soll eingegeben.

Das ist mit großer Wahrscheinlichkeit das Problem:

Code

<div id="peelwrapper">
    <img src=" ... "> <!-- Dies ist das eigentliche Bild, das Reel anzeigen soll -->
    <img src="loadimg.gif" id="loadimg"> <!-- Dies ist das Ladebild, das das eigentliche Bild
                                          waehrend des Ladens verdecken soll -->
</div>

Sempervivum · 2. März 2019

Das Problem ist hier, dass bei einem prompt() das HTML noch nicht angezeigt wird, bevor der Benutzer die Eingabe gemacht hat. Auch wenn man das HTML nicht mit document.write() erzeugt, sondern direkt notiert, ist es nicht besser. Versuche:

entweder ein Eingabefeld (<input>) für den Betrag anzulegen
oder den prompt erst durch Klick auf einen Button (<button>Eis einkaufen</button>) auszulösen

Sempervivum · 1. März 2019

Zitat

viel, viel Zeit um ein paar Code-Zeilen zu meinem Beispiel zu schreiben.

Viel Zeit braucht es dazu nicht:

Code

        $(function () {
            $('#sortable').sortable();
            $("#sendit").on("click", function () {
                var order = $('#sortable').sortable('toArray').toString();
                $.post({
                    url: "dein-php-skript.php",
                    data: { productOrder: order },
                    success: function (output) {
                        $("#result").html(output);
                    }
                });
            });
        });

Alles anzeigen

Code

<button id="sendit">Sortierung abschicken</button>
<div id="result"></div>

Kompliziert?

Der Parameter output enthält die Ausgaben deines PHP-Skriptes. Das kann eine Erfolgs-/Fehlermeldung sein oder das Ergebnis einer Verifikation des Umbenennens.

Sempervivum · 1. März 2019

Mir erschließt sich ohnehin nicht wirklich, was der Vorteil sein soll, wenn man den Umweg über ein Formular und ein verborgenes Eingabefeld geht, gegenüber Ajax. Bei letzterem würde die Seite nicht neu geladen und die neue Sortierung würde bestehen bleiben.

Sempervivum · 1. März 2019

Zunächst mal hast Du im CSS vor dem wrapper den Punkt vergessen, aber das ist wahrscheinlich nur ein Kopierfehler.

Ich vermute, es liegt daran, dass Du dem .boxen_wrapper eine feste Breite gegeben hast, dadurch wird wohl das flexible Verteilen ausgebremst. So wie Du es dir vorstellst, habe ich es leider nicht hinbekommen, nur indem ich mit einer Mediaquery die Anordnung von horizontal nach vertikal umgeschaltet habe:

Code

        .wrapper {
            display: flex;
        }

        .abstand {
            flex: 1;
            border: 1px solid red;
        }

        .boxen_wrapper {
            flex: 0 0 auto;
            border: 1px solid red;
            display: flex;
            flex-wrap: nowrap;
        }

        .box {
            width: 250px;
            border: 1px solid green;
        }

        @media (max-width: 1000px) {
            .boxen_wrapper {
                flex-direction: column;
            }
        }

Alles anzeigen

Sempervivum · 26. Februar 2019

Wenn ich mir diese PDFs ansehe, gewinne ich den Eindruck, dass es Scans sind und jede Seite aus einer großen Grafik besteht? In dem Fall könntest Du die Scans auch als Grafikdateien abspeichern und würdest dich bei der Darstellung leichter tun. Oder, wie Basti sagt, wenn die Zeitung in irgend einer Form elektronisch erstellt wird, nicht den Umweg über Papier und Scannen gehen, sondern versuchen, das Dokument in einem Format auszugeben, das sich für die Darstellung im Web besser eignet.

Sempervivum · 26. Februar 2019

Zitat

Von etwa hundert Mitgliedern können einige wenige (etwa 10) die Mitgliederzeitung nicht öffnen.

Könnte es sein, dass diese den IE benutzen? Der kann nämlich PDFs nicht anzeigen sondern bietet sie zum Download an.

Beiträge von Sempervivum

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

Preloading Image für das Jquery Reel Plugin

Preloading Image für das Jquery Reel Plugin

Programmablauf / Spielrunden

Array an PHP übergeben

Array an PHP übergeben

`Flex-Box: Grow` passt sich nicht an

Probleme mit den Webseiten

Probleme mit den Webseiten