Ich blicke nicht mehr so richtig durch. Ich versuche mit einem Klick in eine Checkbox mehrere Zeilen einer bestimmten Klasse ein- bzw. auszublenden (wenn das Häkchen gesetzt ist soll eingeblendet werden und anders herum).

Leider verhalten sich anscheinend der IE 8 und der Firefox 3.5 ganz unterschiedlich.

Hier mal ein Beispielcode:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<style type="text/css"> tr.ausgeblendeteZeile{display:none} </style>   <script type="text/javascript">     /* <![CDATA[ */         $(document).ready(function() {             $("input#meineCheckbox").click(function(){                                      if($(this).is(":checked") == "true" || $(this).is(":checked") == "1") $("tr.ausgeblendeteZeile").fadeIn("slow");                                        else $("tr.ausgeblendeteZeile").fadeOut("slow");                                    });         });     /* ]]> */ </script>   <table> <tr> <td><input type="checkbox" id="meineCheckbox" name="meineCheckbox" /></td><td>Spalte 2</td> </tr> <tr class="ausgeblendeteZeile"> <td>Spalte 1</td><td>Spalte 2</td> </tr> <tr class="ausgeblendeteZeile"> <td>Spalte 1</td><td>Spalte 2</td> </tr> </table>

Und genau dieses fadeIn klappt nur im Firefox. Im IE passiert garnichts. Dann habe ich mir gedacht, ändere ich eben die css Eigenschaften und habe anstatt fadeIn einfach css("display","inline") verwendet. Das klappt auch prima im IE, allerdings nicht mehr im Firefox (er zeigt dann zwar die Zeilen, behält aber nicht die korrekten Spaltenbreiten bei).

fadeOut funktioniert dann seltsamerweise wieder in beiden Browsern korrekt.

Habt Ihr eine Idee wie man das am besten anstellt?

Dieses is(":checked") verhält sich übrigens auch je nach Browser unterschiedlich. Im IE wird nur "true" zurück gegeben im Firefox dagegen nur "1"...

Moin,

versuche es mal mit

Code :

1	css("display","")

zu dem :checked

So sollte es gleich gehen in allen Browsern:

Code :

1	if($(this).is(":checked"))

Vielen Dank für die schnelle Antwort!

Nur

Code :

1	if($(this).is(":checked"))

funktioniert schon mal prima.

Leider bewirkt

Code :

1	$("tr.ausgeblendeteZeile").css("display","");

nichts. An der Stelle möchte ich ja die Zeilen mit der Klasse "ausgeblendeteZeile" ja auch einblenden. Das geht im Firefox mit fadeIn("slow") und im IE mit css("display","inline"), aber leider nicht in beiden Browsern gleichzeitig.

Ich suche eine Variante für beide Browser.

Es geht mit

Code :

1	css("display","table-row")

Leider gibt es dann nicht mehr so eine schöne Animation wie bei fadeIn.

Und wieso klappt fadeOut mit Animation aber fadeIn nicht. Das verstehe ich nicht.

Gibts noch eine Variante mit Animation (slideUp und slideDown klappt ja auch nicht)?

Habs mal probiert, wenn du das ganze über die Zellen selbst machst, gehts in beiden gleichermaßen:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13

<style type="text/css"> tr.ausgeblendeteZeile td{display:none} </style> <script type="text/javascript">           $(document).ready(function() {             $("input#meineCheckbox").click(function(){                                      if($(this).is(":checked")) $("tr.ausgeblendeteZeile td").fadeIn("slow");                                        else $("tr.ausgeblendeteZeile td").fadeOut("slow");                                     });         });   </script>

Ja das blendet bei beiden die Zeilen ein. Allerdings im IE nur immer die 1. Spalte. Alle anderen Spalten werden leider nicht mit eingeblendet. Im Firefox werden alle Spalten mit eingeblendet.

In meinem IE8 wird alles eingeblendet...welche jQuery-Verion hast du denn eingebunden?

Müsste eigentlich aktuell sein:

jQuery v1.3.2
jQuery UI 1.7.2

Kompletter Testcode:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<style type="text/css"> tr.ausgeblendeteZeile td{display:none} </style> <script type="text/javascript">           $(document).ready(function() {             $("input#meineCheckbox").click(function(){                                      if($(this).is(":checked")) $("tr.ausgeblendeteZeile td").fadeIn("slow");                                        else $("tr.ausgeblendeteZeile td").fadeOut("slow");                                     });         });   </script>   <table> <tr> <td><input type="checkbox" id="meineCheckbox" name="meineCheckbox" /></td><td>Spalte 2</td> </tr> <tr class="ausgeblendeteZeile"> <td>Spalte 1</td><td>Spalte 2</td> </tr> <tr class="ausgeblendeteZeile"> <td>Spalte 1</td><td>Spalte 2</td> </tr> </table>

Hab Win7RC mit IE 8.0.7 am laufen.

Geht bei mir wie gesagt problemlos:


Oder meinst du etwas anderes?

Es liegt an den von mir gesendeten Headern:

Code :

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hier mal der komplette Quellcode, wobei die jQuery Bibliothek in Unterordner "js" liegt:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head xml:lang="de" lang="de"> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>   <style type="text/css"> tr.ausgeblendeteZeile td{display:none;background:#CCC;} </style> <script type="text/javascript">           $(document).ready(function() {             $("input#meineCheckbox").click(function(){                                      if($(this).is(":checked")) $("tr.ausgeblendeteZeile td").fadeIn("slow");                                        else $("tr.ausgeblendeteZeile td").fadeOut("slow");                                     });         });   </script> </head> <body> <table> <tr> <td><input type="checkbox" id="meineCheckbox" name="meineCheckbox" /></td><td>Setzen Sie ein Häkchen um die anderen Zeilen einzubenden.</td> </tr> <tr class="ausgeblendeteZeile"> <td>Spalte 1</td><td>Spalte 2</td> </tr> <tr class="ausgeblendeteZeile"> <td>Spalte 1</td><td>Spalte 2</td> </tr> </table> </body> </html>

Wenn ich die dtd nicht mitsende, schaltet der Browser automatisch in den alten Quirks Modus, oder? Dann muss irgendwas an diesem Dokument hier nicht XHTML 1.0 konform sein. Hast Du eine Idee?

PS: Vielen Dank für die wahnsinnig tolle Unterstützung hier!

EDIT: Ich habe es bei Validome getestet (auch XML) und bekomme keine Fehler angezeigt.

Zitat von NM78

Wenn ich die dtd nicht mitsende, schaltet der Browser automatisch in den alten Quirks Modus, oder? Dann muss irgendwas an diesem Dokument hier nicht XHTML 1.0 konform sein. Hast Du eine Idee?

Ohne Dokumenttyp-Definition (DTD) wird das Dokument weiterhin im standardkonformen Modus übergeben, und der W3C-Validator lässt das Markup als valides "XHTML 1.0 Transitional" passieren.

mfg Maik

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?

Zitat von NM78

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:

Code :

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

http://web-gazette.de/2008/tipps-und...zu-ie7-machen/

Einen Kommentar zu dieser MS-Erfindung spare ich mir lieber

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!

Hi,

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

Code :

1 2 3 4 5 6 7 8 9 10 11 12

$(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

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:

Code :

1 2 3 4 5 6 7 8 9

$(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...