Änderungsvorschlag zum Wiki-Artikel „clientWidth“

[Azador]

Hallo miteinander,

das Anwendungsbeispiel zu getBoundingClientRect funktioniert (auf meinem PC) in Firefox, Vivaldi und Internet Explorer nicht. Deswegen habe ich das Beispiel angepasst, dabei die EventHandler mit den einzelnen Formen verknüft und, mangels Recht auf Bearbeiten, hier gespeichert: https://codepen.io/anon/pen/YxzYQG

Ein bisschen Text dazu: An die Formen werden mit [[addEventListener]] Eventhandler angefügt, sodass beim Überfahren mit der Maus die Funktion <code>ermittleWerte()</code> aufgerufen wird. Diese Funktion frägt mit <code>getBoundingClientRect()</code> alle Eigenschaften ab, fügt sie in der Variable <code>text</code> zusammen und gibt sie anschließend aus.

Falls ein Admin das Problem bestätigen kann, darf er gerne meine Version des Beispiels ins Wiki einpflegen.

Grüße, Azador

[Matthias Apsel]

Hallo Azador,

das Anwendungsbeispiel zu getBoundingClientRect funktioniert (auf meinem PC) in Firefox, Vivaldi und Internet Explorer nicht.

Auch nicht, wenn du das Beispiel in einem neuen Tab öffnest? Es handelt sich hier wieder um das schon bekannte Problem des Frickls (//@Felix Riesterer)

Deswegen habe ich das Beispiel angepasst, dabei die EventHandler mit den einzelnen Formen verknüft und, mangels Recht auf Bearbeiten, hier gespeichert: https://codepen.io/anon/pen/YxzYQG

Ein bisschen Text dazu: An die Formen werden mit [[addEventListener]] Eventhandler angefügt, sodass beim Überfahren mit der Maus die Funktion <code>ermittleWerte()</code> aufgerufen wird. Diese Funktion frägt mit <code>getBoundingClientRect()</code> alle Eigenschaften ab, fügt sie in der Variable <code>text</code> zusammen und gibt sie anschließend aus.

Dankeschön.

Bis demnächst
Matthias

[Julius]

Hallo Matthias, @Felix Riesterer

ich habe gerade auch ein Problem mit Frickl entdeckt...

Auch nicht, wenn du das Beispiel in einem neuen Tab öffnest? Es handelt sich hier wieder um das schon bekannte Problem des Frickls (//@Felix Riesterer)

Ist es auch schon ein bekanntes Problem, dass Frickl nicht mit SVGs als einzigem Inhalt klarkommt? Siehe z. B. https://wiki.selfhtml.org/wiki/SVG/Anwendung_und_Praxis/responsive_Imagemaps#Gestaltung_durch_CSS

Wie würde man das am besten lösen? Frickl anpassen (es gibt ja auch eine SVG-Sektion im Wiki...) oder ein HTML-Grundgerüst drum (Pfusch?) bauen?

Gruß
Julius

[Matthias Apsel]

Hallo Azador,

https://codepen.io/anon/pen/YxzYQG

Ein bisschen Text dazu: An die Formen werden mit [[addEventListener]] Eventhandler angefügt,

Im Allgemeinen möchte man nicht für jedes Element einen Eventhandler registrieren, sondern nur einen für das übergeordnete Element. Dort fragt man dann ab, von welchem Element das Event ausging.

Bis demnächst
Matthias

[JürgenB]

Hallo,

ich habe mal dden Eventhandler vom body auf das main-Element umgelegt, jetzt scheint es zu funktionieren.

Sollte man nicht auch noch statt mouseover click nehmen?

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

ich habe mal dden Eventhandler vom body auf das main-Element umgelegt, jetzt scheint es zu funktionieren.

Hmh. Bei mir funktionierte es vorher auch.

Sollte man nicht auch noch statt mouseover click nehmen?

Da hab ich keine Meinung zu. Aber vielleicht wäre es für die mauslosen Besucher tatsächlich besser. Eventuell beide Handler?

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

Sollte man nicht auch noch statt mouseover click nehmen?

Da hab ich keine Meinung zu. Aber vielleicht wäre es für die mauslosen Besucher tatsächlich besser. Eventuell beide Handler?

jetzt gibt es beide Handler.

Gruß
Jürgen

[Azador]

Danke für den Hinweis bzgl. der Eventhandler und die Änderung. Jetzt funktionierts.

Gruß, Azador aka Michael