Beiträge von Sempervivum

Bei dem Code in deinem Eingangsposting und dem aus #8 funktioniert es nicht, weil das img-Element tief in divs verschachtelt ist, Der "~"-Operator findet jedoch nur Geschwisterelemente. Und mit CSS kann man leider nicht im Baum nach oben gehen. Du musst es so umstrukturieren, dass das anzuzeigende Element auf der selben Ebene wie das gehoverte oder tiefer.

Zitat

Da steht ja das Gesamt ergebniss drinne und das muß ja auch stehen bleiben.

Dafür gibt es den Footer bzw. Fuß:
https://wiki.selfhtml.org/wiki/HTML/Tabe…er_und_Fu.C3.9F

https://jsfiddle.net/0s3L8v2b/2/

Wirf mal einen Blick auf datatables, dort gibt es die Option scrolly, wenn man die benutzt, ist die Tabelle sowohl scrollable als auch sortable.

Zitat

.getLayer('text' + nr).text;

was macht dieser Ausdruck genau?

Was bedeuted das .text

getLayer('text' + nr)ermittelt den Layer mit dem Namen des Eingangsparameters. Zuvor wurde dieser mit dem selben Namen erzeugt: .drawText({ name: 'text' + nr,. D. h. wenn nr = 5 lautet der Name text5. 'text' ist nur ein Bestandteil des Namens, den ich selber fest gelegt habe.

Und mit .text ermittelt man den Wert des Attributes, das man zuvor hinein geschrieben hat. Du hast Recht, die Doku ist hier etwas dürftig. Das dies geht, habe ich nur durch Probieren heraus gefunden.

Zitat

warum ist das Ergebnis nur nr, dh zB. nur "3" wenn da zweimal text verwandt wird?

'text' wird nur im Namen verwendet. In das Attribut text wurde beim drawText nur nr hinein geschrieben: text: nr Man könnte irgend etwas hinein schreiben wie 'hallo' und könnte dann diesen Text wieder heraus lesen. Das Attribut text hat mit dem Namen nichts zu tun.

Vgl. auch mit dem anderen Beispiel mit den Plus- und Minus-Tasten: Dort kann man das Attribut text beliebig verändern wobei der Name immer gleich bleibt.

Mag zunächst ein wenig kompliziert sein, aber nur dadurch kann man ein gezeichnetes Element hinterher wieder ansprechen und verändern. Bei einfachem Javascript ist das nicht möglich. Man müsste "zu Fuß" die gezeichneten Elemente in Objekten parallel halten und nach jeder Änderung neu zeichnen. Genau das tut jCanvas hinter den Kulissen, aber es ist verborgen und man muss sich darüber keine Gedanken machen.

Zitat

Mit dem nr kann ich nicht arbeiten, Hier erhalte ich immer den letzten Index.

Dies ist ein häufiges Problem, wenn man Eventlistener in einer Schleife zuweist und diese auf einen Schleifenindex zugreifen: Wenn das Event feuert, ist die Schleife längst durchgelaufen und der Index, hier die Variable nr, hat den Endwert, hier 10.

Lösen kann man dies durch die Verwendung einer Funktion, wie du schon geschrieben hast oder einfacher, indem man "let" statt "var" bei der Initalisierung verwendet. Dann findet der Listener den Wert vor, den die Variable hatte, als der Listener registriert wurde.

Und um jederzeit auf die Elemente zugreifen zu können, empfehle ich, ihnen Namen zu geben.

<canvas width="400" height="300"></canvas>
    <script>
        var wrect = 50, hrect = 50, dist = 5,

            xstart = 50, ystart = 50,

            cv = $("canvas");



        for (let x = xstart, y = ystart, nr = 0; nr < 10; nr++) {

            var num = nr;

            cv.drawRect({
                name: 'rect' + nr,
                layer: true,

                fillStyle: 'lightblue',

                x: x, y: y, width: wrect, height: hrect,

                fromCenter: false,



                click: function (layer) {
                    var txt = cv.getLayer('text' + nr).text;
                    alert(txt);

                    $(this).animateLayer(layer, {

                        fillStyle: 'blue'

                    });



                }

            }).drawText({
                name: 'text' + nr,
                layer: true,

                fillStyle: 'black',

                x: x + wrect / 2,

                y: y + hrect / 2,

                text: nr

            });

            if ((nr + 1) % 5 == 0) {

                y += dist + hrect;

                x = xstart;

            } else {

                x += dist + wrect;

            }

        }
    </script>

Das Event ended feuert nur bei einem video-Element, nicht bei einem iFrame, wo ein Video drin ist. Der TO schrieb weiter oben, dass er Videos von verschiedenen Plattformen hat, vimeo, google drive etc. Da ist es eine echte Herausforderung, für jedes Video das ended zu erkennen.

Ich habe mal dies ausgearbeitet:

    <canvas id="canvas3" width="500" height="400"></canvas>
    <script>
        var bgColor = '#B5EC9B', textColor = 'black',
            borderWidth = 2, borderColor = 'black';
        function drawPlusMinus(cv, x, y, h, content, nr) {
            var xcenter = x + h / 2, ycenter = y + h / 2;
            var w = h;
            cv.drawRect({
                layer: true,
                name: 'c' + content + nr,
                strokeStyle: borderColor, strokeWidth: borderWidth,
                fillStyle: bgColor,
                x: xcenter, y: ycenter,
                width: w, height: h,
                fromCenter: true,
                click: function () {
                    var textval = cv.getLayer('textvalue' + nr);
                    var val = parseInt(textval.text);
                    console.log(val);
                    if (content == '+') {
                        val++;
                    } else if (val > 0) {
                        val--;
                    }
                    cv.setLayer('textvalue' + nr, {
                        text: val
                    }).drawLayers();
                }
            }).drawText({
                layer: true,
                name: 'text' + content + nr,
                align: 'center',
                fillStyle: textColor,
                x: xcenter, y: ycenter,
                fontSize: 20,
                fontFamily: 'Verdana, sans-serif',
                text: content,
                fromCenter: true
            });
        }
        function drawGroup(cv, x, y, h, w, nr) {
            var xcenter1 = x + w / 2, ycenter1 = y + h / 2;
            cv.drawRect({
                layer: true,
                name: 'cvalue' + nr,
                strokeStyle: borderColor, strokeWidth: borderWidth,
                fillStyle: bgColor,
                x: xcenter1, y: ycenter1,
                width: w, height: h,
                fromCenter: true
            }).drawText({
                layer: true,
                name: 'textvalue' + nr,
                align: 'center',
                fillStyle: textColor,
                x: xcenter1, y: ycenter1,
                fontSize: 20,
                fontFamily: 'Verdana, sans-serif',
                text: nr,
                fromCenter: true
            });
            drawPlusMinus(cv, x + w, y, h / 2, '+', nr);
            drawPlusMinus(cv, x + w, y + h / 2, h / 2, '-', nr);
        }
        for (let i = 0; i < 3; i += 1) {
            drawGroup($('#canvas3'), 120 + i * 120, 100, 60, 60, i + 1);
        }
    </script>

Ich habe den einzelnen Elementen Namen mit Nummer gegeben: name: 'textvalue' + nr Dies ist jeweils der linke Layer, der den aktuellen Wert enthält.

Mit

                    var textval = cv.getLayer('textvalue' + nr);
                    var val = parseInt(textval.text);

kann ich dann im Clickhandler diesen Layer ermitteln und den Wert herausholen.

Auf die gleiche Weise kannst Du auch den Wert irgend wo anders im Skript herausholen. Um das zu vereinfachen, kann es jedoch angebracht sein, die Werte parallel in einem Array zu führen.

Den Grund habe ich schon beschrieben:

Zitat

werden nur Elemente gezeichnet, die als Layer definiert sind. Daher verschwanden bei dir die ersten beiden Texte,

d. h. Du musst die Texte auch als Layer definieren.

Ich muss zugeben, dass das mit den Layern bei jCanvas etwas kompliziert ist: Zeichnet man mit drawLayers() neu, werden nur Elemente gezeichnet, die als Layer definiert sind. Daher verschwanden bei dir die ersten beiden Texte, Wegen der anderen Vorteile würde ich aber empfehlen, bei jCanvas zu bleiben.

In diesem Fall kann es vorteilhaft sein, das Zentrum als Bezugspunkt zu verwenden (fromCenter:true), weil dann die Texte automatisch mittig sind.

    <canvas id="canvas3" width="500" height="400"></canvas>

    <script>
        for (var i = 0; i < 3; i += 1) {

            $('#canvas3').drawRect({
                layer: true,

                fillStyle: '#B5EC9B',

                x: 140 + i * 80,

                y: 330,

                width: 30,

                height: 30,

                fromCenter: true

            }).drawText({
                layer: true,
                align: 'center',
                fillStyle: 'black',

                x: 140 + i * 80,

                y: 330,

                fontSize: 20,

                fontFamily: 'Verdana, sans-serif',

                text: i + 1,

                fromCenter: true

            });

        }
    </script>

1. Tipp, der dir offenbar leider nicht zusagt: jCanvas verwenden, das unterstützt Mousevents für Elemente ohne dass man mit den Koordinaten herum rechnen muss.

2. Tipp um Schreibarbeit zu sparen: Parameter in einem Array ablegen und die drei Gruppen in einer Schleife zeichnen.

Die Frage wird hier beantwortet:

https://stackoverflow.com/questions/2698…t-the-same-time

Dann geht es natürlich nicht mit Mediaqueries. Was der offizielle Weg ist, weiß ich nicht, aber was Du in deinem Eingangsposting beschrieben hast, scheint mir gängig und praktikabel zu sein.

Was ist denn der Hintergrund bei diesem Vorhaben? Je nachdem, nach was für welchen Kriterien diese Dateien geladen werden sollen, kämen u. U. auch Mediaqueries in Frage.

Zitat

IndexOf und search() ist auch doof.Sobald erein Wort gefunden hat ist die suche zuende.

Die Zeigen nicht alle treffer an

match() mit dem Modifikator "g" ist die Lösung.

Zitat

Hallo, ich wollte wissen, wie man alle Elemente mit z.B. der ID, oder Klasse "Fenster" findet und jedes Element davon in einer Variable speichern kann. Oder einem Array

Das hatte ich so verstanden, dass der TO Elemente anhand der Klasse o. ä. ermitteln will. Was Du anschneidest, läuft auf eine Suche in den Inhalten hinaus, ich glaube, das hatten wir in einem anderen Thread.

Zitat

was ist indexOf?

Kannst Du z. B. hier nachlesen:

https://wiki.selfhtml.org/wiki/JavaScrip…/String/indexOf

Ich sehe aber nicht, wie dir das bei deinem Vorhaben helfen kann.

Informiere dich über document.querySelectorAll(), z. B. ebenfalls bei SelfHTML, damit kannst Du alle Elemente eines bestimmten Typs über einen Selektor ermitteln.

Über Selektoren kannst Du dich ebenfalls bei SelfHTML informieren:

https://wiki.selfhtml.org/wiki/CSS/Selektoren

Und die Funktion querySelectorAll() liefert gleich ein Array bzw. eine Nodelist, d. h. das Eintragen in Variablen bzw. ein Array brauchst Du nicht selbst zu machen.

Ich wüsste nicht, dass in Canvas eine direkte Texteingabe möglich ist. Ich habe so etwas mal selbst zusammen gebaut, indem ich die Tastatureingabe abgefragt habe:

                    $(document).off("keypress").on('keypress', function (event) {
                        if (active) {
                            txt += String.fromCharCode(event.which);
                            $(canvas).setLayer('text' + thisobj.idText, { text: txt + "|" })
                                .drawLayers();
                        }
                    });

http://ulrichbangert.de/div/webentwick…rawing-pad.html

Mit jCanvas realisiert, "Text" auswählen und in das Rechteck klicken.

In deinem Fall würde ich jedoch die Lösung mit Plus- und Minustasten vorziehen, weil Du dann die Eingabe nicht zu überprüfen brauchst, ob sie zulässig ist (nummerisch und Wertebereich).

Ich würde dir ja gern helfen, aber leider gehen mir die Joomla-Kenntnisse ab. Hast Du die Filterung selber programmiert? Wenn ja, kannst Du sicher einen Hinweis geben, in welchem der zahlreichen JS-Files der Code steht. Generell ist es nämlich kein Problem, eine Aktion erst dann auszuführen, wenn in allen Selects etwa ausgewählt wurde.

In einer for-Anweisung kann man für die Startaktionen mehrere Anweisungen, durch Komma getrennt, notieren. In diesem Fall werden die Variablen x, y und nr auf ihre Anfangswerte gesetzt. xstart ist der Anfangswert für die x-Position und ystart der für die y-Position.

In deinem Code hast Du es etwas anders gemacht, indem Du nur eine Zählvariable i führst und die Position daraus berechnest. Das geht natürlich genau so gut.

Selbstverständlich:

            var wrect = 50, hrect = 20, dist = 5,
                xstart = 10, ystart = 10,
                cv = $("#canvas2");
            for (var x = xstart, y = ystart, nr = 0; nr < 10; nr++) {
                cv.drawRect({
                    fillStyle: 'lightblue',
                    x: x, y: y, width: wrect, height: hrect,
                    fromCenter: false
                }).drawText({
                    fillStyle: 'black',
                    x: x + wrect / 2,
                    y: y + hrect / 2,
                    text: nr
                });
                if ((nr + 1) % 5 == 0) {
                    y += dist + hrect;
                    x = xstart;
                } else {
                    x += dist + wrect;
                }
            }