Beiträge von Sempervivum

Am besten auch gleich das neue figure-Tag verwenden:

    <style>
        figure {
            width: 100%;
            text-align: center;
        }
    </style>
    <figure>
        <img src="images/dia0.jpg">
    </figure>

Dann würde ich empfehlen, das Skript-Element dynamisch zu erzeugen und in den Head einzufügen:

$(document).ready(function() {    
    if (theWidth > 800) {
        var tag = document.createElement("script");
        tag.src = "deinscript.js";
        document.querySelector("head").appendChild(tag);
        // ggf. weitere 
    }
});

(ungetestet)

Das klingt stichhaltig. Verstehe ich das richtig: Auf mobilen Geräten möchtest Du nicht Datatables sondern ein anderes, vereinfachtes Skript, zum Laden verwenden?

Und du schreibst, dass die Tabelle recht groß ist. Könnte dann auch die Ladezeit der Daten eine Rolle spielen?

Was Du vorhast, lässt sich machen, aber warum so kompliziert und das Skript bedingt laden? Einfach das Skript unbedingt laden und die Anweisungen, die Du brauchst, bedingt ausführen.

document.getElementById("wort").innerHTML = "?????";

Hiermit bist Du schon auf dem richtigen Wege. Was noch fehlt, ist dieses:

var daswort = wort[Math.floor(Math.random()*wort.length)];
document.getElementById("wort").innerHTML = daswort;

Und ebenso mit der Beschreibung.

Und informiere dich, wie man mit Funktionen arbeitet, z. B. direkt hier bei HTML-Seminar:

https://www.html-seminar.de/javascript-funktionen.htm

Das ist ja erfreulich, dass Du schon Eigeninitiative entwickelt hast!

Zitat

das Script bereits beim Laden der Seite, ein zufälliges Wort generiert und angezeigt

Es gibt auch ein onload:

window.onclick = myFunction;
window.onload = myFunction;

Zitat

die Wörter stehen nicht für sich alleine, sondern benötigen auch eine kurze Beschreibung in Form eines Satzes

Die Beschreibungen ebenfalls in einem Array ablegen:

var words = [
"Apfel",
"Banane",
"Birne"
];
var descriptions = [
    'Beschreibung für "Apfel"',
    'Beschreibung für "Banane",
    'Beschreibung für "Birne"'
];

Schließlich musst Du Wort und Beschreibung noch auf der Seite anzeigen. Informiere dich dazu über getElementById und innerHTML.

Sehr gutes Beispiel, Basti!

Hast Du dir auch mein Fiddle angesehen? Sollte alles leisten, was Du dir wünschst, mit Datatables und einer Anweisung jQuery.

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.