display

[Lio]

Hallo,

habe ein Problem mit dem FF 2.0.

Folgendes:

Javascript
function swapTeaser(id) {
 if(document.getElementById(id).style.display == "none") {
   document.getElementById(id).style.display = "block";
 }
 else {
  document.getElementById(id).style.display = "none";
 }
}

HTML
<table cellspacing="0" cellpadding="0" class="teaser">
  <tr class="teaser_headline">
    <td class="text"><a href="javascript:void(0);" class="teaserhead" onclick="swapTeaser('Akm')">Text</a></td>
  </tr>
  <tr class="teaser_text" id="Akm">
    <td>Text</td>
  </tr>
</table>

Im Firefox funktioniert das Display : none und block nur einmal, danach wird entweder die Tabelle immer größer bzw. es verschwindet nur der inhalt aber nicht die Spalte.

Kann jemand einen Fehler erkennen?

[Siechfred]

Kann jemand einen Fehler erkennen?

Der display-Eigenschaft von Tabellenzeilen solltest du auch das zuweisen, was sie sind: 'table-row'. Da aber der IE damit Probleme hat, schlage ich folgendes vor:

function swapTeaser(id) {  
 var style = testProperty('Akm', 'display', 'table-row') ? 'table-row' : 'block';  
 if(document.getElementById(id).style.display == "none") {  
   document.getElementById(id).style.display = style;  
 }  
 else {  
  document.getElementById(id).style.display = "none";  
 }  
}

Die Funktion testProperty findest du hier:
http://www.anaboe.net/codes/javascript/internet-explorer-css-test

Siechfred

[Lio]

Kann jemand einen Fehler erkennen?

Der display-Eigenschaft von Tabellenzeilen solltest du auch das zuweisen, was sie sind: 'table-row'. Da aber der IE damit Probleme hat, schlage ich folgendes vor:

function swapTeaser(id) {

var style = testProperty('Akm', 'display', 'table-row') ? 'table-row' : 'block';
if(document.getElementById(id).style.display == "none") {
   document.getElementById(id).style.display = style;
}
else {
  document.getElementById(id).style.display = "none";
}
}

  
Das Funktioniert nur solange wie auch der Wert direkt eingetragen wird im FF 2.0. Wenn ein Parameter eingetragen wird "id" dann gehts wieder nicht, wieso?

[wahsaga]

hi,

Das Funktioniert nur solange wie auch der Wert direkt eingetragen wird im FF 2.0. Wenn ein Parameter eingetragen wird "id" dann gehts wieder nicht, wieso?

Wo wird welcher Parameter "eingetragen"?

gruß,
wahsaga

[Mathias Brodala]

Hallo Siechfred.

Kann jemand einen Fehler erkennen?

Der display-Eigenschaft von Tabellenzeilen solltest du auch das zuweisen, was sie sind: 'table-row'. Da aber der IE damit Probleme hat, schlage ich folgendes vor:

… was unnötig kompliziert ist.

function swapTeaser(id) {

var style = testProperty('Akm', 'display', 'table-row') ? 'table-row' : 'block';
if(document.getElementById(id).style.display == "none") {
   document.getElementById(id).style.display = style;
}
else {
  document.getElementById(id).style.display = "none";
}
}

  
Einfacher:  
  
~~~javascript
function swapTeaser(id) {  
  
  var obj = document.getElementById(id); // Einmal holen reicht  
  
  if (/* Style-Abfrage; zum Beispiel mittels [pref:t=148291;m=962147@title=document.getCurrentStyle] */) {  
  
    obj.style.display = ''; // Auf Ausgangswert zurücksetzen  
  } else {  
  
    obj.style.display = "none";  
  }  
}

Einen schönen Mittwoch noch.

Gruß, Mathias

[Siechfred]

… was unnötig kompliziert ist.

Ja, hab's gerade bei wahsaga ein paar Threads weiter oben gelesen :)

Siechfred

[Lio]

Hallo,

habe folgendes probiert:

function swapTeaser(id) {
var obj = document.getElementById(id);
if (obj.style.display == 'block') {
obj.style.display = 'none';
} else {
obj.style.display = "block";
}
}

Immernoch problemem mit ff2.0 Beim erstenmal kein Problem danach wird die Zelle immer größer mit jedem Klick