jquery.appear mit einem Canvas-Bild

[ByeBye 274568]

Hallo zusammen, mein erster Eintrag und eine absolute Anfängerfrage. Leider gibt es keine Beginner-Section, sonst hätte ich dort meine Frage gestellt, also bitte nicht krum nehmen

Es gibt ein kleines feines JS namens jquery.appear, das ein Element auf der Seite erst dann anzeigt, wenn man dort hingescrollt hat. Das macht in meinem Besipiel vor allem deswegen Sinn, da das eigentliche JS eine Animation enthält und bei der langen Seite mit zahlreichen Canvas eben nicht zur Geltung kommt.

Die "appear"-Funktion möchte ich mit einem Canvas-Bild verknüpfen, das derzeit ungefähr so aussieht:

<canvas id="pic"></canvas> 

<script type="text/javascript">    

var picData6 = wasauchimmer1
var options =  wasauchimmer2

var ct6 = document.getElementById("pic").getContext("2d");
ct6.canvas.width = document.getElementById("pic").offsetWidth-4;
ct6.canvas.height = document.getElementById("pic").offsetHeight;
var Chart6  = new Chart(ct6).Line(picData6,options);

</script>

Jetzt gilt es (vorrausichtlich die letzte Zeile mit "var Chart6"?) mit dem Plugin in Einklang zu bringen. Was ich schon rausbekommen habe: Ich muss meine Bild-ID "pic" erstmal mit "appear" registrieren...

$('#pic').appear();

...und dann anschließend dem JavaScript sagen, was passieren soll, wenn das Bild erscheint, bzw. was bei appear/disappear passieren soll. In etwa so:

$('#pic').on('appear', function(ev, elements) { });

Doch wie bringe ich das mit meinem obigen Skript zusammen? Vermutlich ist das in 3 Sekunden erledigt. Ihr würdet mir sehr helfen.

 

[Sempervivum]

IMO müsste es so gehen:

$('#pic').on('appear', function(ev, elements) {
    var Chart6  = new Chart(ct6).Line(picData6,options);
});

ct6 ist eine globale Variable und müsste in der Funktion sichtbar sein.

 

[ByeBye 274568]

Hallo, zunächst einmal Danke für den Versuch! Aber leider nein, das funktioniert nicht. Ich meine, das auch schon so ausprobiert zu haben: die letzte Zeile einfach in die Funktion einzufügen. Ohne Erfolg.

Ich glaube, es hängt auch mit diesem "ev, elements" zusammen. Könntest Du oder wer anders noch mal einen Blick in die Mini-Anleitung werfen? Für Newbies - wie mich - ist das leider nichts. Dort steht über diese Function:

$('someselector').on('appear', function(event, $all_appeared_elements) {
      // this element is now inside browser viewport
    });

Was bedeutet "event", was "$all_appeared_elements" und wie kann ich beides nun vereinen?

 

[Sempervivum]

Mit diesen beiden Parametern kenne ich mich leider nicht aus. Ich meine jedoch, dass Du sie nicht brauchst, weil Du ja nur das eine Element mit der ID "pic" registriert hast. Hast Du die Seite schon online? Dann poste doch mal die URL.
In deinem ersten Javascript muss Du natürlich die Zeile

var Chart6  = new Chart(ct6).Line(picData6,options);

löschen.

 

[ByeBye 274568]

Natürlich muss die Zeile vorher gelöscht werden und natürlich muss etwas an den Parametern geändert werden. Die entscheidende Frage ist, was genau! Deine Antwort hilft leider überhaupt nicht weiter.

Diese Seite ist genauso wie oben angegeben, läuft offline mit den wenigen Zeilen Text.

var Chart6  = new Chart(ct6).Line(picData6,options);

...generiert das Bild für das Canvas-Element, soll aber eben erst dann ausgeführt werden, wenn die canvas-id "#pic" sichtbar ist. Oder anders ausgedrückt, muss diese Zeile hier drüber und die nachfolgende

$('someselector').on('appear', function(event, $all_appeared_elements) {
});

zusammengefügt werden. Nur "function()" - also ohne die Parameter - geht's auch nicht.

 

[ByeBye 274568]

Es funktioniert mit:

$("#pic").appear();
$("#pic").on('appear', function (){var Chart6  = new Chart(ct6).Line(picData6,options);});