Fehler bei Breite einer Grafik ermitteln

[Linuchss]

Moin,

irgendwie Brett vorm Kopf ...

Ich lade eine Grafik, deren Größe mit style angepasst wird. Nun möchte ich wissen, wie breit sie ist.

  <div style="position:relative;width:100%;height:40em;overflow-x:sccroll;overflow-y:hidden;border:1px solid #080;">
    <div style="position:absolute;left:50%;height:100%;border-left:2px solid #f00;"></div>
    <img id=rolle src="../noten/You_took_the_words_right_out_of_my_mouth_Tonikum.svg" alt=Notenrolle style="margin-left:50%;height:100%;" />
  </div>
  <br>
  <script>
  document.querySelector("#rolle").addEventlistener ( 'load', alert( this.width +"*" +this.height));
  </script>

Fehlermeldung: Uncaught TypeError: document.querySelector(...).addEventlistener is not a function

Wieso?

[Jonathan Harker]

Hallo Linuchss,

  <div style="position:relative;width:100%;height:40em;overflow-x:sccroll;overflow-y:hidden;border:1px solid #080;">
    <div style="position:absolute;left:50%;height:100%;border-left:2px solid #f00;"></div>
    <img id=rolle src="../noten/You_took_the_words_right_out_of_my_mouth_Tonikum.svg" alt=Notenrolle style="margin-left:50%;height:100%;" />
  </div>
  <br>
  <script>
  document.querySelector("#rolle").addEventlistener ( 'load', alert( this.width +"*" +this.height));
  </script>

Fehlermeldung: Uncaught TypeError: document.querySelector(...).addEventlistener is not a function

Leerzeichen zw. Methode und Klammer?

document.querySelector("#rolle").addEventlistener( 'load', alert( this.width +"*" +this.height));

Bis bald!

Jonathan

[Linuchss]

Hallo Jonathan,

Leerzeichen entfernt, Fehler bleibt (hätte mich auch sehr gewundert).

Bevor der Fehler angezeigt wird, erscheint dieses:

[linuchss]

Die SVG-Datei ist 7,1 MB groß, alles aber lokal. Problem?

[Gunnar Bittersmann]

@@linuchss

Die SVG-Datei ist 7,1 MB groß, alles aber lokal. Problem?.

Ja. Der SVG-Code muss ja geparst und ein DOM daraus erstellt werden.

Was ist das für eine Grafik, die so riesig ist? Sind die Werte mit unsinnig vielen Nachkommastellen angegeben? Ist SVG für diese Art Grafik vielleicht das falsche Format?

🖖 Живіть довго і процвітайте

[Der Martin]

Hallo,

Die SVG-Datei ist 7,1 MB groß, alles aber lokal. Problem?.

Ja. Der SVG-Code muss ja geparst und ein DOM daraus erstellt werden.

das ist ein starkes Argument.

Was ist das für eine Grafik, die so riesig ist? Sind die Werte mit unsinnig vielen Nachkommastellen angegeben?

Oder Bögen mit unsinnig vielen Stützpunkten?
Oder ist es ein SVG mit einer eingebetteten Rastergrafik?

Ist SVG für diese Art Grafik vielleicht das falsche Format?

Könnte man bei solchen Speichermonstern denken.
Oder Linuchs hat sich vertan und meinte eigentlich 7.1 kB.

Einen schönen Tag noch
 Martin

[Linuchs]

Hallo Gunnar,

Was ist das für eine Grafik, die so riesig ist?

Ich experimentiere mit einer Partitur (4 Chorstimmen untereinander, 127 Takte), die unter einer Linie durchrollen soll, während sie vom Audio-Tag (Master) synchronisiert wird.

Sinn: Sänger können zuhause (nur mit Browser) ihre Stimme lauter stellen und mitsingen, während die Noten durchrollen.

Die Größe ist mir auch unheimlich, mal sehen, ob man die Grafiken stückeln und nachladen kann. So sieht es aus:

[Der Martin]

Hallo,

Bevor der Fehler angezeigt wird, erscheint dieses:

natürlich, du rufst ja auch erst das alert() auf, um dann dessen Ergebnis als Eventhandler zu setzen.
Von dem Schreibfehler, den Rolf schon gefunden hat, mal abgesehen.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Jonathan,

Nö, Whitespace vor und nach Klammern ist beliebig.

Rolf

[Rolf B]

Hallo linuchss,

Um das zu finden, muss man wie ein luchs hinschauen. Und dann klappt das mit dem EventListener.

(Dieses Posting enthält 3 Tipps)

Rolf

[Linuchss]

Hallo Rolf,

ich habe extra eine funktionierende Zeile drübergesetzt:

document.querySelector('#tempo').addEventListener('input', setTempo);

Also lag ich vollkommen richtig: Brett vorm Kopf.

Danke.

Der Fehler ist zwar weg, aber der alert bleibt:

[Rolf B]

Hallo Linuchss,

möglicherweise bekommt der load Eventhandler nicht das Element, auf dem er registriert wurde, als this übergeben.

Mach's besser so, das ist jedenfalls besser als this:

...addEventListener("load", function(event) {
   alert(event.target.width + "×" + event.target.height);
});

Bzw. bevor Gunnar mich wieder wegen der Template-Strings ausschimpft:

...addEventListener("load", function(event) {
   alert(ˋ${event.target.width} × ${event.target.height}ˋ);
});

Rolf

[Der Martin]

Hallo Rolf,

möglicherweise bekommt der load Eventhandler nicht das Element, auf dem er registriert wurde, als this übergeben.

so weit kommt es gar nicht. Linuchs versucht, das Ergebnis von alert() als Eventhandler zu registrieren. Habe ich aber vor einer Stunde schon gesagt.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

jau, und ich hab's nicht kapiert, das ist mir komplett entfleucht.

Aber mein event-Hinweis bringt die function ja mit 😉

Rolf

[Linuchs]

Hallo Rolf,

bevor Gunnar mich wieder wegen der Template-Strings ausschimpft:

danke, aber dies gibt den Fehler Uncaught SyntaxError: missing ) after argument list

  document.querySelector("#rolle").addEventListener( 'load', function(event) {
    alert(ˋ${event.target.width} × ${event.target.height}ˋ);
//  alert( event.target.width +"*" +event.target.height );
  });

Stattdessen die auskommentierte Zeile zeigt

und ist okay. Was ist das nun wieder?

[Tabellenkalk]

Hallo,

<img [...] alt=Notenrolle [...] />

Ist das erlaubt und/oder sogar üblich, alt ohne Anführungszeichen?

Gruß
Kalk

[Der Martin]

Hallo,

<img [...] alt=Notenrolle [...] />

Ist das erlaubt und/oder sogar üblich, alt ohne Anführungszeichen?

es ist ebenso wie bei allen anderen Attributen erlaubt, solange der Attributwert nur aus Buchstaben und Ziffern besteht. Üblich oder empfohlen ist es allerdings nicht.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Ist das erlaubt und/oder sogar üblich, alt ohne Anführungszeichen?

es ist ebenso wie bei allen anderen Attributen erlaubt, solange der Attributwert nur aus Buchstaben und Ziffern besteht.

Oder anderen Zeichen, die ebenfalls in Attributwerten ohne Anführungszeichen drumrum erlaubt sind.

In der CSSBattle führt manchmal ein style-Attribut zum kürzeren Code; da versucht man, Anführungszeichen zu vermeiden:

<body bgcolor=926927 style="margin:70 35%70 160;border:22q solid#fff;border-radius:32q;filter:drop-shadow(-21q 0#6D480A">

ist für Loser. 😏

<body bgcolor=926927 style=margin:70+35%70+160;border:solid#fff+22q;border-radius:32q;filter:drop-shadow(-21q+0#6D480A>

(Beachte die geänderte Reihenfolge bei border.)

🖖 Живіть довго і процвітайте