Inhalt einer Zelle dynamisch anzeigen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absender
angabe
annehmen
betreff
blocken
code
date
display
eigenschaft
gleiche code
gut umsetzen
http
index
inhalt
komplette inhalt
tabelle
umgekehrt funktionieren
url
zeile
zelle
-
ich habe eine Tabelle:
<table> <tr> <th>Betreff</th> <th></th> <th>Empfangen</th> <th>Absender</th> </tr> <tr> <td>Ein Betreff</td> <td>Noch nicht gelsen</td> <td>1.1.2012 12:23</td> <td>Ein Absender</td> </tr> <tr style="display: none"> <td collspan="4" style="height:0">Ein Inhalt</td> </tr> //Nächste 2 Zeilen
Beim Klicken auf Betreff, soll nun die Zeile darunter mit dem Inhalt angezeigt werden, mit hilfe von Jquery animate(), mein Problem ist nur, dass ich nicht weiß welche Höhe die Zeile haben muss, damit der Komplette Inhalt zu sehen ist -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
das könnte dir helfen:
http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout -
Und wenn Du einfach die Zelle von
aufdisplay: none;
stellst? Dann müsste der Inhalt sich selbst die passende Höhe verschaffen.display: block;
Oder Du setzt den Inhalt erst per jQuery, dann ist die Zelle also vorher leer und das selbe passiert. -
ich möchte aber nicht, dass der Inhalt plötzlich erschient, sondern in einem Div erscheint, welches so langsam größer wird, bis es passend zum Inhalt ist.
-
<tr style="display: none">
<td collspan="4" style="height:0">Ein Inhalt</td>
</tr>
das gehört aber zu einer Tabelle.
DIV oder TABELLE, das ist hier die Frage. -
sorry, meinte mit div, die Tabellenzelle mit collspan="4", divs und tds sind in css und javascript ja fast das gleiche.
-
<table style="width:50px;"> <tr> <td style="word-break:break-all;word-wrap:break-word"> Donaudampfschifffahrtkapitänspatentinhaber </td> </tr> </table>
funkt im FF und IE -
glaube ich habe mich nicht verständlich genug ausderückt.
Also ich habe eine Zelle, die einen je nach Breite einen Inhalt hat der eine bestimmte Höhe verbrauchen würde. Nur ist diese Zelle mit display:none versteckt, aber ich brauche die Höhe die es verbrauchen würde, um mit animate die Zelle wachsen zu lassen. -
Schau mal hier, Dein Anliegen lässt sich mit meinem Vorschlag gut umsetzen: http://api.jquery.com/animate/.
-
aber dann hat die zeile doch erst die richtige Größe und erst danach könnte ich animate benutzen.
Es muss aber eigentlich umgekehrt funktionieren.
Gibt es keine Möglcihkeit die höhe eines Elemtns zu bestimmten, die es ohne weitere angaben annehmen würde? -
Gib uns mal Deinen Code bis jetzt. Dann zeige ich Dir, wie ich denke, dass es funktioniert.
-
hab jetzt einen einigermaßen funktionerendem Code(IE will nicht):
function view_mail(id) { var inhalt=document.getElementById('mail_'+id); inhalt.style.display="block"; var hohe=inhalt.offsetHeight; inhalt.style.height=0; $('#mail_'+id).animate({height: hohe},'slow', function(){}); }
<tr> <td onclick="view_mail(<?=$index['id']?>)"><?=$index['betreff']?></td> <td><img src="bilder/<?if($index['gelesen']==1){echo "ok";}else{echo "no";}?>.png"></td> <td><?=date(DATUM, $index['wann'])?></td> <td><a href="game.php?screen=profil&user=<?=$index['absender']?>"><?=user_name($index['absender'])?></a></td> </tr> <tr> <td style="display: none;" id="mail_<?=$index['id']?>"><?=$index['inhalt']?></td> </tr> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
