Beiträge von Sempervivum

Da fällt schnell auf, dass die Namen nicht eindeutig sind:

name: 'ntext' + i,

i fängt ja bei jedem Aufruf der Funktion wieder bei 0 an. Offenbar verwendet jCanvas den Namen auch für seine interne Buchführung, so dass es zu Problemen kommt. Gib dem Namen einen Zusatz, der ihn eindeutig macht.

Zitat

Das gleiche passiert mit den Namen wenn ich im Canvas an einer beliebigen Stelle klicke.

Das überrascht zunächst, aber ich vermute stark, dass jCanvas einen Click-Listener für das ganze Canvas registriert und darin dann prüft, auf welches Element der Klick zutrifft.

Hast Du mal einen Blick auf die Console geworfen?

So vielleicht?

https://jsfiddle.net/Sempervivum/dh3Lxvet/4/

Ich wollte dir nur die grobe Richtung zeigen. Ja, da war noch ein Fehler drin und deine Korrektur ist richtig. Mit thefunction meine ich die Funktion, von der Du im Eingangsposting geschrieben hast. Die musst Du natürlich selber definieren.

Ich empfehle, die Arrays in einem Objekt zu übergeben, etwa so:

var arr1 = // Hier wird das erste Array erzeugt
var arr2 = // Hier wird das zweite Array erzeugt
return {narr1: arr1, narr2, arr2};

Und dann auspacken:

var botharrays = thefunction();
var arr1 = botharrays.narr1;
var arr2 = botharrays.narr2;

Den Fehler habe ich eben auch nicht gesehen:

setLayer('yy', {

Du willst ja nicht den String 'yy' übergeben, sondern den Inhalt der Variablen yy, die den Namen enthält. Nimmt man die Hochkommas weg, funktioniert es.

Beim reinen Lesen kann ich keinen Fehler entdecken. Hast Du auch an das drawLayers() gedacht?

Ich würde setLayer nur einmal aufrufen:

var yy='text' + nr;
if (nr < 3) var txt = vnamen[nr];
else var txt = nnamen[nr]
$('canvas').setLayer('yy', { text: txt}).drawLayers();

Nein, wie MrMurphy schon schrieb, geht das nur eingeschränkt und mit Tricks und ist nicht zu empfehlen:

https://css-tricks.com/float-center/

Nimmt man Javascript zu Hilfe, kann man das Bild auch einiger Maßen vertikal zentrieren, aber ebenfalls eher nicht zu empfehlen:

https://jsfiddle.net/Sempervivum/j4qrc86p/9/

Das leistet die jQuery-Funktion serialize():

https://api.jquery.com/serialize/

Ich habe mir die Testseite aus Post #7 angesehen. Was fehlt denn jetzt noch? Habe mir deine weiteren Postings angesehen, aber es nicht verstanden.

Du kannst kein Array als POST-Parameter übergeben. Kodiere es in JSON:

$.post('C:\xampp\htdocs\sendTest\phptest.php', {
    data: JSON.stringify(info)
    }, function(response) {
        console.log(response);
});

Und in PHP entsprechend wieder auspacken:

$songData = json_decode($_POST['data'], TRUE);
print_r($songData);

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.