✔ jQuery <tr> ein- und ausblenden Explorer/Firefox

[NM78]

Ich hatte ursprünglich nicht den korrekten Pfad zur DTD in dem Beispiel. Das hatte ich aber korrigiert. Trotzdem klappt es mit den Spalten nicht.

@Sven

Welche Header hast Du gesendet bzw. würdest Du da einbauen?

 

[Sven Mintel]

Welche Header hast Du gesendet bzw. würdest Du da einbauen?

Ich hatte garkeinen DOCTYPE

Hab jetzt mal deinen Code genommen wie aus dem letzten Posting, folgende Ergänzung tut es:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

http://web-gazette.de/2008/tipps-und-tricks/hypertext-markup-language/ie8-kompatibel-zu-ie7-machen/

Einen Kommentar zu dieser MS-Erfindung spare ich mir lieber

 

[NM78]

Danke, damit geht es in unserem Beispiel hier. Leider klappt das nicht in meiner eigentlichen Anwendung.

Ich fürchte, auf das schicke fadeIn werde ich wohl in absehbarer Zeit verzichten müssen (vielleicht gehts ja mit einem der nächsten jQuery Updates).

Meine Lösung wird bis dahin css("display","table-row") heißen.

Vielen Dank für Eure Unterstützung!

 

[Quaese]

Hi,

schmeiss nicht gleich die Flinte ins Korn. jQuery bietet ja noch die Methode animate. Damit funktioniert es bei mir auch im IE 8.

$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked"))
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    else
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, 1000);
  });
});

$(function(){
  $("tr.ausgeblendeteZeile td").css({opacity: 0});
});

Die Eigenschaft display: none habe ich im Gegenzug aus der CSS-Klasse genommen.

Ciao
Quaese

 

[NM78]

Naja, aber ohne display:none lässt er im IE dort wo vorher die Zeilen waren einfach eine leere Box zurück d.h. die Tabelle wird nicht verkürzt.

Das hier würde gehen:

$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked"))
      $("tr.ausgeblendeteZeile td").css("display","table-row");
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    else
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, "slow",function(){$("tr.ausgeblendeteZeile td").css("display","none");});
  });
});

Leider werden dabei diesmal im Firefox beim Einblenden nicht mehr die korrekten Spaltenabstände angezeigt.

Wie man es dreht und wendet...

 

[Quaese]

Hi,

versuchs mal so:

$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked")){
      $("tr.ausgeblendeteZeile td").css("display", "");
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    }else{
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, 1000, function(){
        $("tr.ausgeblendeteZeile td").css("display","none");
      });
    }
  });
});

$(function(){
  $("tr.ausgeblendeteZeile td").css({display: 'none', opacity: 0});
});

Ciao
Quaese

 

[NM78]

Das funktioniert! Danke!

In Deinem Beispiel war nur noch ein kleiner Codeschnipsel, der entfernt werden musste:

$(document).ready(function() {
  $("input#meineCheckbox").click(function(){
    if($(this).is(":checked")){
      $("tr.ausgeblendeteZeile td").css("display", "");
      $("tr.ausgeblendeteZeile td").animate({opacity: 1}, 1000);
    }else{
      $("tr.ausgeblendeteZeile td").animate({opacity: 0}, 1000, function(){
        $("tr.ausgeblendeteZeile td").css("display","none");
      });
    }
  });
});

$(function(){
  $("tr.ausgeblendeteZeile td").css({display: 'none', opacity: 0});
});

Super Forum hier!