:first-letter in Verbindung mit JavaScript style.display

[derletztekick]

Hallo,

ich habe auf meiner Seite ein kleines JavaScript, das Inhalte ein und ausblenden kann. Dabei gehören (in meinem Fall) immer zwei P-Tags zu einem Artikel - der eine ist die Beschreibung, der andere dann der (wahlweise) eingeblendete Rest des Artikels.

Mittels CSS und :first-letter habe ich den ersten Buchstaben des Textes jeweils formatiert.

Im Gecko (getestet im Firefox 1.5 und SeaMonkey 1.0) wird lediglich nur das erste first-letter akzeptiert. Wenn ein Artikel ausgeklappt ist, ignoriert er diese Formatierung. Opera 8 macht es richtig (oder zumindest so, wie ich mir das eigentlich gedacht hatte).

Hier zwei Beispiellinks, der erste zeigt den Fall, wo alles noch "zu" ist und lediglich der Anfang des Artikels sichtbar ist. Der zweite Link zeigt dann den zweiten Artikel "geöffnet".

Artikel geschlossen und Zweiter Artikel geöffnet

Woran liegt es, dass die Geckos das "erste" first-letter beim aufklappen ignorieren?

Mit freundlichem Gruß
Micha

[frankx]

Hellihello

interessant könnte das Javscriptschnipselchen sein, mit dem Du hantierst.

frankx

[derletztekick]

Hallo frankx,

interessant könnte das Javscriptschnipselchen sein, mit dem Du hantierst.

Deshalb habe ich die Seiten verlinkt, auf dem es im Einsatz ist. :) Nichtsdestotrotz hier der Link zum Script.

Mit freundlichem Gruß
Micha

[Cheatah]

Hi,

Woran liegt es, dass die Geckos das "erste" first-letter beim aufklappen ignorieren?

ehrlich gesagt halte ich es derzeit für einen Bug, dass die :first-letter-Formatierung im zweiten Fall nicht greift - ich schaue mir das noch mal genauer an. Die Ursache ist aber recht klar: Dein JavaScript-Code erzeugt ein anderes Ergebnis als das, welches Du auf der zweiten Seite auslieferst. Das <p>-Element relativ zu positionieren behebt das Problem.

Cheatah

[derletztekick]

Hallo Cheatah,

ich schaue mir das noch mal genauer an.

Danke!

Die Ursache ist aber recht klar: Dein JavaScript-Code erzeugt ein anderes Ergebnis als das, welches Du auf der zweiten Seite auslieferst.

Es ändert im Grunde genommen nur eine Style-eigenschaft - display. Beim Aufklappen wird noch ein Link entfernt, der vorher hinzugefügt wurde.

Das <p>-Element relativ zu positionieren behebt das Problem.

Das habe ich gerade erfolglos probiert. Wo hast Du es hinzugefügt, der Klasse "article_description" oder p Allgemein?

Mit freundlichem Gruß
Micha

[Cheatah]

Hi,

ich schaue mir das noch mal genauer an.
Danke!

bisher finde ich leider noch keine Notiz in CSS/2.0 oder CSS/2.1, die dieses Verhalten erklären würde.

Die Ursache ist aber recht klar: Dein JavaScript-Code erzeugt ein anderes Ergebnis als das, welches Du auf der zweiten Seite auslieferst.
Es ändert im Grunde genommen nur eine Style-eigenschaft - display.

Nein, es ändern auch das class-Attribut.

Das <p>-Element relativ zu positionieren behebt das Problem.
Das habe ich gerade erfolglos probiert. Wo hast Du es hinzugefügt, der Klasse "article_description" oder p Allgemein?

Um genau zu sein: Im DOM-Inspector ;-)

Cheatah

[derletztekick]

Hallo Cheatah,

Nein, es ändern auch das class-Attribut.

Tut es das? Ich kann keine Veränderung zwischen der ersten und der zweiten Seite erkennen. Es wird eine weitere (Dummy-)Class: article_<X> hinzugefügt, wobei X eine ganze Zahl ist, aber die ist "onload()" immer vorhanden; es spielt also keine Rolle, ob man alles sieht oder noch etwas zu ist. Oder sehe ich gerade etwas nicht und Du redest von etwas anderem?

Um genau zu sein: Im DOM-Inspector ;-)

Was mit dem Ding alles so geht - erstaunlich.

Mit freundlichem Gruß
Micha

[Cheatah]

Hi,

Nein, es ändern auch das class-Attribut.
Tut es das?

article[i].className = article[i].className + " article_"+i;

Ich kann keine Veränderung zwischen der ersten und der zweiten Seite erkennen.

Dann solltest Du noch den Umgang mit dem DOM-Inspector üben ;-)

Um genau zu sein: Im DOM-Inspector ;-)
Was mit dem Ding alles so geht - erstaunlich.

Jepp! Was ich immer noch vermisse (zumindest in dem mir vorliegenden), ist die Verwertung von Pseudo-Elementen. Gerade hier wäre das hilfreich gewesen ...

Cheatah

[derletztekick]

Hallo Cheatah,

article[i].className = article[i].className + " article_"+i;

Ich kann keine Veränderung zwischen der ersten und der zweiten Seite erkennen.

Dann solltest Du noch den Umgang mit dem DOM-Inspector üben ;-)

Das scheint mir auch gerade ;) Für mich ergibt sich keine Veränderung und beziehe mich dabei auf Dein Posting:

Dein JavaScript-Code erzeugt ein anderes Ergebnis als das, welches Du auf der zweiten Seite auslieferst.

Es wird eine Klasse hinzugefügt, ja. Dies wird aber am Anfang immer gemacht. Es ist also keine Veränderung zwischen offen und zu und das war doch der Ausgangspunkt oder? Wenn Du eine generelle Veränderung - dazu zähle ich die (einmalige) Manipulation des Attributes - meinst, stimm ich Dir zu ansonsten nicht unbedingt.

Jepp! Was ich immer noch vermisse (zumindest in dem mir vorliegenden), ist die Verwertung von Pseudo-Elementen. Gerade hier wäre das hilfreich gewesen ...

Ich habe nach Deinem Posting vorhin den DOM-Inspector vom Firefox1.5 (erstmalig) genommen. Dort kann ich Pseudo-Elemente setzen.

Mit freundlichem Gruß
Micha

[MudGuard]

Hi,

Ich habe nach Deinem Posting vorhin den DOM-Inspector vom Firefox1.5 (erstmalig) genommen. Dort kann ich Pseudo-Elemente setzen.

Kann es sein, daß Du Pseudo-Elemente mit Pseudo-Klassen verwechselst?

cu,
Andreas

[derletztekick]

Hallo MudGuard,

Kann es sein, daß Du Pseudo-Elemente mit Pseudo-Klassen verwechselst?

Jetzt wo Du mich so direkt Fragst und mich noch einmal zum Nachsehen animiert hast: Ja, da war ich etwas voreilig.

Mit freundlichem Gruß
Micha

[Cheatah]

Hi,

Dein JavaScript-Code erzeugt ein anderes Ergebnis als das, welches Du auf der zweiten Seite auslieferst.
Es wird eine Klasse hinzugefügt, ja. Dies wird aber am Anfang immer gemacht. Es ist also keine Veränderung zwischen offen und zu und das war doch der Ausgangspunkt oder?

ja, aber es war - in Anbetracht der Tatsache, dass beim Öffnen per JavaScript das gewünschte Ergebnis sichtbar war - für mich der Anlass, die Unterschiede zu vergleichen.

Ich habe nach Deinem Posting vorhin den DOM-Inspector vom Firefox1.5 (erstmalig) genommen.

Dann war ich ja erfolgreich ;-)

Cheatah

[Ingo Turski]

Hi,

Es ändert im Grunde genommen nur eine Style-eigenschaft - display.

Und genau dabei "vergißt" Firefox first-letter.
Das ist ein Bug, mit dem ich bei meiner Infobox auch schon Bekanntschaft gemacht hatte. Sobald hier beim zweiten Beispiel die Infobox wieder ausgeblendet wurde, war first-letter nicht mehr formatiert.

freundliche Grüße
Ingo

[Cheatah]

Hi,

Das ist ein Bug, mit dem ich bei meiner Infobox auch schon Bekanntschaft gemacht hatte. Sobald hier beim zweiten Beispiel die Infobox wieder ausgeblendet wurde, war first-letter nicht mehr formatiert.

hast Du diesen Bug in Bugzilla gefunden bzw. gemeldet? Gibt es Details dazu?

Cheatah

[Ingo Turski]

Hi,

hast Du diesen Bug in Bugzilla gefunden bzw. gemeldet?

weder noch. Ich hatte mich einfach damit abgefunden bzw. mir in diesem Enzelfall mit
<span id="FFbug">U</span>m in der Infobox ...
beholfen. ;-)

freundliche Grüße
Ingo

[Cheatah]

Hi,

weder noch. Ich hatte mich einfach damit abgefunden bzw. mir in diesem Enzelfall mit
<span id="FFbug">U</span>m in der Infobox ...
beholfen. ;-)

nun, das ist auf jeden Fall schneller, leichter, verführerischer ;-)

Cheatah

[derletztekick]

Hallo Ingo Turski,

Das ist ein Bug, mit dem ich bei meiner Infobox auch schon Bekanntschaft gemacht hatte.

Danke für den Hinweis.

Mit freundlichem Gruß
Micha

[wahsaga]

hi,

ein wirklich fieser, aber auf die schnelle ausgedachter Workaround:

Dem Element, bei dem Firefox sich nicht mehr an den :first-letter-Style "erinnern" kann, sein .innerHTML noch mal zuweisen.

Innerhalb von initArticleJS() habe ich in der for-Schleife über die descriptions

  
article[i].Description = description[i];  

~~~ hinzugefügt,  
und in setVisible() in der for-Schleife den else-Zweig wie folgt geändert:  
  
~~~javascript
  
else{  
  article[currentID].style.display="";  
  description[currentID].getElementsByTagName("a")[description[currentID].getElementsByTagName("a").length-1].style.display = "none";  
  article[i].Description.innerHTML = article[i].Description.innerHTML; // Inhalt noch mal drüberbügeln, frischt das Erinnerungsvermögen auf :-)  
}  

gruß,
wahsaga

[derletztekick]

Hallo wahsaga,

ein wirklich fieser, aber auf die schnelle ausgedachter Workaround:

Wow, funktioniert. Ich behalte es mal im Auge.

Nun habe ich mir vorher "soviel Mühe" mit dem kleinen Script gegeben, so dass ich mich nun frage: Sollte ich es mit .innerHTML abändern?

Würdes Du es machen oder über diesen Darstellungsfehler hinwegsehen (IE Nutzer kommen ja auch nicht in den Genuß von first-letter, bei einem Gecko wird man dann eben nur zur Hälfte bedient und im Opera gönnt man sich den ganzen Luxus)?

Mit freundlichem Gruß
Micha

[wahsaga]

hi,

Würdes Du es machen oder über diesen Darstellungsfehler hinwegsehen

Wenn ich einen Darstellungsfehler mit so wenig zusätzlichem Javascript (und wenig zusätzlichen Kosten) ausmerzen kann, spricht da für mich wenig dagegen.

Allerdings können sich solches Workarounds ja mit der Zeit in ihrer Anzahl auch summieren - deshalb würde ich sowas nicht in alle Ewigkeit mit Rücksicht auf "Abwärtskompabilität" mitschleppen - sprich, wenn die Geckos diesen Bug irgendwann gefixt haben, kann's m.E. dann auch wieder rausfliegen. (Zumal ich die Update-Bereitschaft von Gecko- und Opera-Nutzern ja generell höher einschätze, als die von IElern.)

Auf die Darstellung in IE und Opera hatte es nach einem kurzen Test keine negativen Auswirkungen (hätte ich auch nicht erwartet).
Und wenn du magst, kannst du diese innerHTML-Zuweisung ja auch noch von einer "Browserweiche" abhängig machen (sofern sich eine zuverlässige für Geckos findet).

(IE Nutzer kommen ja auch nicht in den Genuß von first-letter, bei einem Gecko wird man dann eben nur zur Hälfte bedient und im Opera gönnt man sich den ganzen Luxus)?

Ist natürlich genauso vertretbar.
Haben halt erst mal nur die Nutzer des wirklich besten Browsers was davon, und die des/der zweitbesten erst dann, wenn der Fehler in der Gecko-Engine beseitigt wurde :-)

gruß,
wahsaga

[Ingo Turski]

Hi,

(IE Nutzer kommen ja auch nicht in den Genuß von first-letter

wieso eigentlich nicht? first-letter kennt er doch ab Version 6.

freundliche Grüße
Ingo

[derletztekick]

Hallo Ingo Turski,

(IE Nutzer kommen ja auch nicht in den Genuß von first-letter
wieso eigentlich nicht? first-letter kennt er doch ab Version 6.

Stimmt, laut SELFHTML sollte er es können. Siehst Du es auf meiner Beispielseite? Das er es kann, sehe ich bspw. an meinen Überschriften auf meiner Seite. Warum macht er es auf der  anderen nicht?

Was ich gerade noch festgestellt habe: Wenn ich im FF den Text markiere, der mit first-letter formatiert werden sollte, dann sehe ich anhand des Markierten, das dieser anders aussieht als der "normale" Text. Der FF scheint also nciht alles zu ignorieren oder wie darf ich das deuten?

Mit freundlichem Gruß
Micha

[Ingo Turski]

Hi,

Warum macht er es auf der  anderen nicht?

Keine Ahnung. Irgendwelche anderen Eigenschaften werden ihn davon abhalten.

freundliche Grüße
Ingo

[Cheatah]

Hi,

(IE Nutzer kommen ja auch nicht in den Genuß von first-letter
wieso eigentlich nicht? first-letter kennt er doch ab Version 6.
Warum macht er es auf der  anderen nicht?

nach :first-letter bzw. :first-line muss für den IE im Selektor unbedingt ein Leerzeichen folgen.

Was ich gerade noch festgestellt habe: Wenn ich im FF den Text markiere, der mit first-letter formatiert werden sollte, dann sehe ich anhand des Markierten, das dieser anders aussieht als der "normale" Text. Der FF scheint also nciht alles zu ignorieren oder wie darf ich das deuten?

Hm, das kann ich nicht nachvollziehen.

Cheatah

[derletztekick]

Hallo Cheatah,

nach :first-letter bzw. :first-line muss für den IE im Selektor unbedingt ein Leerzeichen folgen.

Stimmt, das überzeugt den IE. Danke für den Tipp!

Hm, das kann ich nicht nachvollziehen.

Ich habe mich vll unverständlich ausgedrückt, so daß Dir dieser Screenshot ggf zum besseren Verständins hilft. Ob das jedoch überhaupt eine Aussagekraft hat, mag ich zu bezweifeln.

Mit freundlichem Gruß
Micha

[Cheatah]

Hi,

ein wirklich fieser, aber auf die schnelle ausgedachter Workaround:

ich hab's gerade mal getestet: Das Setzen diverser CSS-Eigenschaften (position, display, ...) erfordert ein Rerendering, welches den gleichen Effekt hat. Beispielsweise position auf relative und sofort wieder auf static zu setzen war bei mir erfolgreich. Das ist zwar auch reichlich dämlich, aber vielleicht etwas weniger fies ...

Cheatah

P.S.: Eigentlich kennt man solche Schweinereien sonst nur von Opera :-(

[wahsaga]

hi,

ich hab's gerade mal getestet: Das Setzen diverser CSS-Eigenschaften (position, display, ...) erfordert ein Rerendering, welches den gleichen Effekt hat. Beispielsweise position auf relative und sofort wieder auf static zu setzen war bei mir erfolgreich. Das ist zwar auch reichlich dämlich, aber vielleicht etwas weniger fies ...

Ja, die Lösung wäre wohl zu bevorzugen - immerhin etwas weniger unsinnig, als dem Element seinen eigenen Inhalt erneut zuzuweisen.

P.S.: Eigentlich kennt man solche Schweinereien sonst nur von Opera :-(

Ja, das stimmt.
In der Hinsicht dürfte er wirklich noch zulegen.
Aber manchmal vermute ich fast, dass das der Preis dafür ist, dass er so schnell rendert ...

Hab auch letztens mal festgestellt, dass Opera die Scrollposition der Seite beim Abfragen dieser über JS erst dann aktualisiert, wenn man mit Scrollen _fertig_ ist. Da ich einen Effekt _während_ des Scrollens realisieren wollte, für den ich die Position gebraucht hätte, viel das damit für den Opera auch aus.

gruß,
wahsaga

[wahsaga]

hi,

viel das damit für den Opera auch aus.

Fiel Feind, fiel Ähr.

Verflixte Typos.

gruß,
wahsaga

[Orlando]

Hallo wahsaga,

viel das damit für den Opera auch aus.

Fiel Feind, fiel Ähr.

Veind.

Verflixte Typos.

:-)

Grüße
 Roland

[Detlef G.]

Hallo,

Fiel Feind, fiel Ähr.

Veind.

Verflixte Typos.

Fervlixte.

(wenn schon, denn schon)

Auf Wiederlesen
Detlef

[Orlando]

Hallo,

Fiel Feind, fiel Ähr.

Veind.

Verflixte Typos.

Fervlixte.

Detlef

Sicher, Detlev?

Grüße
 Roland

[Cheatah]

Hi,

Ja, die Lösung wäre wohl zu bevorzugen - immerhin etwas weniger unsinnig, als dem Element seinen eigenen Inhalt erneut zuzuweisen.

(und ganz nebenbei funktioniert das auch dann, wenn der Client nur DOM implementiert hat, nicht die MS-Erfindung .innerHTML.)

Cheatah ;-)

[derletztekick]

Hallo Cheatah,

Beispielsweise position auf relative und sofort wieder auf static zu setzen war bei mir erfolgreich.

Darf ich fragen wo/wie Du das getestet hast? Ich hätte vermutet, dass ich es ebenfals im ELSE-Zweig der Funktion setVisible() realisieren muss, jedoch ohne Erfolg. :/

Mit freundlichem Gruß
Micha