"table-row": IE erkennen und Ersatz?

[AllesMeins]

Hiho,

ich möchte gerne per JS eine Tabellenzeile einblenden. Soweit ich das sehe wäre die CSS Eigenschaft "display:table-row" das passende dafür. Das klappt auch ganz gut im Mozilla, nur der IE beschwert sich.
Liege ich richtig in der Annahme das der IE 6, dank mangelnder CSS Unterstützung "table-row" nicht kann? Falls ja: Was ist der richtige Wert für den IE? display:block?
Und noch eine Frage in dem Zusammenhang: Kann ich irgendwie mit JavaScript testen ob der gerade vorbeikommende Browser "table-row" kennt um ihm dann den passenden Befehl zu geben?
Auf eine ganz normale Browserweiche würde ich, wenn möglich, gerne verzichten da es ja durchaus möglich ist das
a) spätere IE Versionen table-row kennen
b) irgendwelche anderen Browser table-row auch nicht können
Daher würde ich gerne direkt auf Kentniss von table-row testen, hab aber keine Idee wie man das machen könnte...

Grüße

Marc

[Cybaer]

Hi,

hab aber keine Idee wie man das machen könnte...

display="" - dann wird der Standardwert für das Element gesetzt.

Gruß, Cybaer

[AllesMeins]

Hiho,

display="" - dann wird der Standardwert für das Element gesetzt.

Leider nicht. Das setzt den nächst "höheren" Wert. Und da ich Elemente einblenden will müssen sie vorher ja ausgeblendet werden (display:none). Wenn ich display = "" mache, dann wird wieder display:none angewendet.
So ist es zumindest im Mozilla...

Grüße

Marc

[Gunnar Bittersmann]

Hello out there!

Und da ich Elemente einblenden will müssen sie vorher ja ausgeblendet werden (display:none).

Was du besser auch mit JavaScript machst, damit User ohne auch was sehen!

Dann merkst du dir, bevor du foo.style.display = "none" setzt, einfach den alten Wert in einer Variablen.

See ya up the road,
Gunnar

[AllesMeins]

Hiho,

Was du besser auch mit JavaScript machst, damit User ohne auch was sehen!

Darüber habe ich mir schon Gedanken gemacht. Das ganze ist eine Zusatzfunktion, die ohne JS so oder so nicht funktioniert (und auch nicht essentiell für die Benutzung der Seite ist). Deshalb habe ich mich entschlossen Leuten ohne JS die unnötigen Zeilen und Leuten mit JS das unnötige "rumgezappel" zu ersparen.

Grüße

Marc

[Cybaer]

Hi,

Deshalb habe ich mich entschlossen Leuten ohne JS die unnötigen Zeilen und Leuten mit JS das unnötige "rumgezappel" zu ersparen.

Plaziere das Verstecken in der letzten Zelle/Reihe. Dann zappelt nichts, weil die Tabelle erst fertig gerendert auf den Bildschirm kommt, wenn der Browser selbige hat - inkl. Script.

Gruß, Cybaer

[AllesMeins]

Hiho,

die betreffende Tabelle steht aber dummerweise relativ weit oben auf der Seite. Da zappelt es also auf jeden Fall.
Gibt es echt keine Möglichkeit rauszufinden ob der Browser table-row kennt?

Grüße

Marc

[Cybaer]

Hi,

die betreffende Tabelle steht aber dummerweise relativ weit oben auf der Seite. Da zappelt es also auf jeden Fall.

Nicht am Ende der Seite, im Ende der betreffenen Tabelle selbst!

Gibt es echt keine Möglichkeit rauszufinden ob der Browser table-row kennt?

IMHO: Nein.

Gruß, Cybaer

[AllesMeins]

Hiho,

Nicht am Ende der Seite, im Ende der betreffenen Tabelle selbst!

dann "zappelt" halt nicht die Tabelle sondern sie restliche Seite, oder sehe ich das falsch?

Marc

[Cybaer]

Hi,

dann "zappelt" halt nicht die Tabelle sondern sie restliche Seite, oder sehe ich das falsch?

Das siehst Du falsch.

Bevor die "restliche Seite" überhaupt kommt, ist das Script bereits da ...

Gruß, Cybaer

[Siechfred]

Hell-O!

Gibt es echt keine Möglichkeit rauszufinden ob der Browser table-row kennt?

Klar, mit Javascript. Nutze einfach aus, dass der IE einen Fehler wirft, wenn er die Eigenschaft nicht kennt:

function testProperty(prop) {  
  try {  
    document.getElementById('zeile').style.display = prop;  
    return true;  
  }  
  catch(e) {  
    return false;  
  }  
}  
  
function tabelle() {  
  if(testProperty('table-row')) {  
    zellen = document.getElementsByName('zelle');  
    for(i=0;i<zellen.length;i++) {  
      zellen[i].style.display = 'table-cell';  
    }  
  }  
  else {  
    alert('Nich möchlich!');  
  }  
}

Funktioniert in meinen try..catch-fähigen IEs ab 5.01 unter Win 2k Pro.

Siechfred

[Siechfred]

Hell-O!

Ich habe die Funktion modifiziert und unter http://sniplets.anaboe.net/javascript07.html online gestellt. Man beachte bitte auch die Hinweise zur Funktionalität.

Siechfred

[Cybaer]

Plaziere das Verstecken in der letzten Zelle/Reihe. Dann zappelt nichts, weil die Tabelle erst fertig gerendert auf den Bildschirm kommt, wenn der Browser selbige hat - inkl. Script.

Oder mache die Änderung im HEAD nach den Styles aber noch vor dem BODY (s. Coding: CSS-Regeln auslesen & ändern). display:none im statischen CSS und dann diese Regel/Eigenschaft löschen. Wenn das geht, kann dein eigentliches Script loslegen, wenn nicht, dann müssen die Surfer auf das Goodie verzichten.

Gruß, Cybaer

[wahsaga]

hi,

Wenn ich display = "" mache, dann wird wieder display:none angewendet.
So ist es zumindest im Mozilla...

Fällt schwer, das zu glauben - schließlich ist das beschriebene die Standard-Lösung für dieses "Problem", und wurde schon vielfach erfolgreich angewendet.

gruß,
wahsaga

[Cybaer]

Hi,

Wenn ich display = "" mache, dann wird wieder display:none angewendet.
So ist es zumindest im Mozilla...
Fällt schwer, das zu glauben

Wenn man einen Wert statisch mit CSS setzt, mit JS dann via style ändert, dann setzt ein "" (leider) immer den ursprünglichen Wert (hier den des statischen Styles). Ist AFAIK in allen Browsern so ...

Gruß, Cybaer

[wahsaga]

hi,

Wenn man einen Wert statisch mit CSS setzt, mit JS dann via style ändert, dann setzt ein "" (leider) immer den ursprünglichen Wert (hier den des statischen Styles).

OK, das ist nachvollziehbar, ja.

gruß,
wahsaga

[MudGuard]

Hi,

Wenn man einen Wert statisch mit CSS setzt, mit JS dann via style ändert, dann setzt ein "" (leider) immer den ursprünglichen Wert (hier den des statischen Styles).

Wieso leider?

Wenn irgendwo ein Regelsatz existiert, dessen Selektor das fragliche Element auswählt, wird er darauf angewendet.

Wenn dann per Javascript im style-Objekt des Elements vorübergehend eine Deklaration gesetzt wird, wird sie ebenfalls angewendet - und da das style-Objekt von der specificity her gewertet wird wie das style-Attribut, wird ein anderswo gesetzter Wert eben überschrieben.

Wird die Deklaration aus dem style-Objekt wieder gelöscht (das ist ja das, was passiert, wenn man "" zuweist), gelten alle anderen CSS-Regelsätze natürlich weiterhin.

Warum sollte es auch anders sein?

cu,
Andreas

[Cybaer]

Hi,

Warum sollte es auch anders sein?

Weil es in diesem Falle hilfreich wäre. :)

Und deswegen das "leider" auch in Klammern ...

Gruß, Cybaer

[wahsaga]

hi,

display="" - dann wird der Standardwert für das Element gesetzt.

Leider nicht. Das setzt den nächst "höheren" Wert. Und da ich Elemente einblenden will müssen sie vorher ja ausgeblendet werden (display:none). Wenn ich display = "" mache, dann wird wieder display:none angewendet.

Dann mach das ausblenden doch, in dem du den Style nicht direkt zuweist, sondern den Elementen dynamisch eine Klasse verpasst, die eben display:none enthält.
Beim wieder-einblenden nimmst du nur diese Klasse weg.

gruß,
wahsaga

[Struppi]

ich möchte gerne per JS eine Tabellenzeile einblenden. Soweit ich das sehe wäre die CSS Eigenschaft "display:table-row" das passende dafür. Das klappt auch ganz gut im Mozilla, nur der IE beschwert sich.
Liege ich richtig in der Annahme das der IE 6, dank mangelnder CSS Unterstützung "table-row" nicht kann? Falls ja: Was ist der richtige Wert für den IE? display:block?

Wieso nicht einfach: [object].style.display = '';

Struppi.

[Martin Hölter]

Hi!

[object].style.display = '';

Heisst das, dass die Standard-Display-Eigenschaften greifen? Warum hat man mir das nicht vor 2 Jahren gesagt? ;-)

Gruß aus Iserlohn

Martin

[Cheatah]

Hi,

[object].style.display = '';
Heisst das, dass die Standard-Display-Eigenschaften greifen?

das heißt, dass der Wert in der style-Collection (sinngemäß "im style-Attribut") gelöscht wird und somit das gilt, was ohne eine entsprechende Angabe gelten muss. Wenn das ein Wert einer anderen CSS-Regel ist, dann ist dem so. Gibt es keine solche, geht es letztendlich auf die Default-Eigenschaft zurück.

Warum hat man mir das nicht vor 2 Jahren gesagt? ;-)

Du hast nicht gefragt ;-)

Cheatah

[molily]

Hallo,

[object].style.display = '';
Heisst das, dass die Standard-Display-Eigenschaften greifen?

In der Praxis, ja.

das heißt, dass der Wert in der style-Collection (sinngemäß "im style-Attribut") gelöscht wird

Das interpretierst du da hinein. '' heißt an sich gar nichts, weil das ein ungültiger Wert ist (bemängelt Firefox meines Wissens auch). Wie ein Browser darauf reagiert, ist ihm selbst überlassen. Ein »Löschen« von Inline-Styles über eine leere Zuweisung ist jedenfalls nirgends vorgesehen. (Man korrigiere mich.)

Warum hat man mir das nicht vor 2 Jahren gesagt? ;-)

Weil das unlogischer Browserquirks ist und deshalb nur wenige auf die Idee gekommen sind, dass das funktioniert.

.style.removeProperty("display") ist dafür gedacht, das können aber sicher weniger Browser.

Mathias

[Cybaer]

Hi,

(bemängelt Firefox meines Wissens auch).

Mein Firefox (1.5) nicht.

Glück gehabt, daß, ...

.style.removeProperty("display") ist dafür gedacht, das können aber sicher weniger Browser.

... wenn schon und viele Browserprogrammierer faul sind, ...

Weil das unlogischer Browserquirks ist und deshalb nur wenige auf die Idee gekommen sind, dass das funktioniert.

... wenigstens alle Browserprogrammierer unlogisch denken! ;)

Gruß, Cybaer

[MudGuard]

Hi,

Das interpretierst du da hinein. '' heißt an sich gar nichts, weil das ein ungültiger Wert ist (bemängelt Firefox meines Wissens auch). Wie ein Browser darauf reagiert, ist ihm selbst überlassen.

Wirklich? In CSS ist festgelegt, daß Deklarationen mit ungültigen Werten zu ignorieren sind.
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors

Ein »Löschen« von Inline-Styles über eine leere Zuweisung ist jedenfalls nirgends vorgesehen. (Man korrigiere mich.)

Löschen vielleicht nicht, aber wenn die bisherige Deklaration mit einem gültigen Wert (die also beachtet wird) durch eine mit einem ungültigen Wert (die also nicht beachtet werden darf) ersetzt wird, kommt das faktisch einem Löschen gleich.

cu,
Andreas

[molily]

Hallo,

Ein »Löschen« von Inline-Styles über eine leere Zuweisung ist jedenfalls nirgends vorgesehen. (Man korrigiere mich.)

Löschen vielleicht nicht, aber wenn die bisherige Deklaration mit einem gültigen Wert (die also beachtet wird) durch eine mit einem ungültigen Wert (die also nicht beachtet werden darf) ersetzt wird, kommt das faktisch einem Löschen gleich.

Eine Deklaration wird durch eine ersetzt, die nicht beachtet wird?!

Eine leere Zuweisung ist anscheinend noch einmal was anderes als ein ungültiger Wert bzw. eine spezielle Unterart. Ungültige Werte werden tatsächlich einfach ignoriert, ohne dass ersetzt wird.

var elem = document.getElementById("elem");  
alert(elem.style.length);  
elem.style.setProperty("color", "red", null);  
alert(elem.style.length);  
elem.style.setProperty("color", "", null);  
alert(elem.style.length);

Hier ist setProperty() mit einem Leerstring als Wert äquivalent zu
elem.style.removeProperty("color");
Das ist, soweit ich weiß, nirgends so geregelt. Ich halte das für eine nicht erklärbare Inkonsequenz.

Hätte ich hingegen
elem.style.setProperty("color", "huggeldidubbeldidu", null);
geschrieben, so hätte Firefox gemeckert:

Fehler: Farbe erwartet, aber 'huggeldidubbeldidu' gefunden.  Fehler beim Verarbeiten des Wertes für Eigenschaft 'color'.  Deklaration ignoriert.

Und Opera ebenso:

DOM style property
Invalid value for property: color
Line 1:
  huggeldidubbeldidu
  ------------------^

Mathias