DIV visibilty wird nur partiell wiederhergestellt
0 0 0 0 
Detlef G.
DIV visibilty wird nur partiell wiederhergestellt
Hallo,
ich habe eine Javascript Funktion geschrieben, über welche ich die Sichtbarkeit eines Divs ein- und ausblenden kann. Im Mozilla läuft das auch, aber im IE werden Formularelemente etc. beim Wieder sichtbar mache nicht angezeigt. Habe es auch mit display anstelle von visibility probiert, hat nicht geholfen.
Hier die Quelle:
<html>
<head>
<script type="text/javascript">
function makeVisible (divid) {
document.getElementById(divid).style.visibility = "visible";
document.getElementById(divid).style.position = "relative";
}
function makeInVisible (divid) {
document.getElementById(divid).style.visibility = "hidden";
document.getElementById(divid).style.position = "absolute";
}
</script>
</head>
<body>
<table border='0' cellpadding='0' cellspacing='0'>
<tr>
<td align='left' valign='top'>
<b>test</b><br /><br />
<b>is this a test?</b><br />
bla bla bla
</td>
</tr>
<tr>
<td align='left' valign='top'>
<table border='0' cellpadding='0' cellspacing='0'>
<tr>
<td align='left' valign='top'><input type='radio' name='answers[]' value='__1' onClick='makeVisible("true_answer")'> pos_answer</td>
<td align='left' valign='top'><input type='radio' name='answers[]' value='__0' onClick='makeInVisible("true_answer")'> neg_answer</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align='left' valign='top'>
<div id='true_answer' name='true_answer' visibility:hidden;position:absolute'>
(In)visible Div-Content
<table border='0' cellpadding='0' cellspacing='0'>
<tr><td>bla blablabla <input type='text' name='test' size='10'></td></tr>
</table>
<div><input type='text' name='test' size='10'> test mit textboix</div>
</div>
</td>
</tr>
</table>
</body>
</html>
-
Hi,
document.getElementById(divid).style.visibility = "hidden";
document.getElementById(divid).style.position = "absolute";möchtest Du in Wirklichkeit nicht einfach die display-Eigenschaft verändern?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Wie meinst du das? Ich möchte folgendes (Der Source hier ist ein Dummy):
Ich habe eine Seite in welcher sich ein Div befindet, welches nicht immer sichtbar ist. Der Raum, den das Div einnimmt, wenn es sichtbar ist, soll auch nicht immer genutzt werden, bzw. nicht leer und weiss stehen bleiben, sondern, der restliche Inhalt soll nachrücken.
Der Teil funktioniert auch, nur werden verschachtelte Tabellen und Input-Felder innerhalb des Divs nicht mehr angezeigt, wenn man das Div visible macht.Grüße
Sasha
-
Lieber sasha,
Der Raum, den das Div einnimmt, wenn es sichtbar ist, soll auch nicht immer genutzt werden, bzw. nicht leer und weiss stehen bleiben, sondern, der restliche Inhalt soll nachrücken.
... also doch nur display. Du möchtest zwischen display:none und dem ursprünglichen display-Wert hin- und herschalten.
function an_aus(divid, wie) { if (!divid || wie != "an" || wie != "aus") // Funktion wurde falsch aufgerufen -> Ende! return false; var myDiv = document.getElementbyId(divid); if (!myDiv) // Ein solches Element existiert nicht! -> Ende! return false; // Anstatt "block" könnte hier auch der Wert stehen, den Du stattdessen benutzt myDiv.style.display = (wert == "an") ? "block" : "none"; return true; // Erfolgreich, alles hat geklappt -> Zurück! }Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Sorry, Fehler in einer Zeile. Ich benenne die Variable "wie" um in "schalter":
function an_aus(divid, schalter) { if (!divid || schalter != "an" || schalter != "aus") // Funktion wurde falsch aufgerufen -> Ende! return false; var myDiv = document.getElementbyId(divid); if (!myDiv) // Ein solches Element existiert nicht! -> Ende! return false; // Anstatt "block" könnte hier auch der Wert stehen, den Du stattdessen benutzt myDiv.style.display = (schalter == "an") ? "block" : "none"; return true; // Erfolgreich, alles hat geklappt -> Zurück! }Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Und noch ein Groß-/Kleinschreibungs-Fehler bei "getElementById":
function an_aus(divid, schalter) { if (!divid || schalter != "an" || schalter != "aus") // Funktion wurde falsch aufgerufen -> Ende! return false; var myDiv = document.getElementById(divid); // By nicht by if (!myDiv) // Ein solches Element existiert nicht! -> Ende! return false; // Anstatt "block" könnte hier auch der Wert stehen, den Du stattdessen benutzt myDiv.style.display = (schalter == "an") ? "block" : "none"; return true; // Erfolgreich, alles hat geklappt -> Zurück! }Heute bin ich für nix zu gebrauchen... :-(
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
gestern war wohl wirklich nicht dein Tag.
function an_aus(divid, schalter) {
if (!divid || schalter != "an" || schalter != "aus")
Also, wenn überhaupt kein Parameter übergeben wurde \_oder\_ der zweite Parameter nicht "an" lautet \_oder\_ der zweite Parameter nicht "aus" lautet, dann wurde die Funktion falsch aufgerufen? Nun erkläre mir mal, wie du sie gleichzeitig mit "an" und "aus" als zweiten Parameter aufrufen willst? ;) Meintest du vielleicht: ~~~javascript if (!divid || (schalter != "an" && schalter != "aus")) // Funktion wurde falsch aufgerufen -> Ende! return false;Heute bin ich für nix zu gebrauchen... :-(
Scheint wirklich so. ;)
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Lieber Detlef,
if (!divid || (schalter != "an" && schalter != "aus"))
// Funktion wurde falsch aufgerufen -> Ende!
return false;Danke! Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/), Felix Riesterer. -
hi,
Nun erkläre mir mal, wie du sie gleichzeitig mit "an" und "aus" als zweiten Parameter aufrufen willst? ;)
Noch nie was von Quantencomputern gehört?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
Danke für die Mühe Felix, aber mein Problem ist folgendes:
Das Ganze funktioniert nur partiell. Egal ob mit display oder visibility, werden im IE die gleichen Sachen nicht angezeigt.
Beim wieder einblenden über mein MakeVisible oder auch über Deine an_aus Funktion, wird im IE alles wieder angezeigt, ausser die input Felder.
Meine Frage also: warum verschwindet das input-Feld unwiderbringlich?
Und wie kann ich dafür sorgen, dass es angezeigt wird?-
Lieber sasha,
Meine Frage also: warum verschwindet das input-Feld unwiderbringlich?
Und wie kann ich dafür sorgen, dass es angezeigt wird?Tja, ohne einen Link zu einer Testseite kann zumindest ich Dir nicht weiterhelfen. Eine letzte Vermutung ist der Guillotine-Bug des IE. Du schreibst aber leider mit keiner Silbe, _welchen_ IE Du verwendest...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
-
visibility (Anzeige bzw. Nichtanzeige mit Platzhalter): http://de.selfhtml.org/css/eigenschaften/positionierung.htm#visibility
display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter): http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
-
-
-
Hi,
Habe es auch mit display anstelle von visibility probiert, hat nicht geholfen.
display ist hier besser, aber nicht das Problem. Ich gehe mal davon aus, Du redest von den IE-Darstellungsproblemen: hier schlägt "hasLayout" wieder zu. Füge diese Conditionals ein:
<!--[if lte IE 7]>
<style>
#true_answer {min-height:1px;}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style>
#true_answer {height:1px;}
</style>
<![endif]-->Gruesse, Joachim
--
Am Ende wird alles gut.-
Hallo Joachim,
das nützt leider auch nichts, aber danke
Sasha
-
-
Hi,
Habe es auch mit display anstelle von visibility probiert, hat nicht geholfen.
Wie Cheatah schon sagte, solltest Du nur zwischen display:block und display:none umschalten:
function makeVisible (divid) { document.getElementById(divid).style.display = "block"; } function makeInVisible (divid) { document.getElementById(divid).style.display = "none"; }Also sowohl von visibility, als auch von position die Finger weg lassen. Dann werden auch nachfolgende Elemente:
<div id='true_answer' name='true_answer'> (In)visible Div-Content <table border='0' cellpadding='0' cellspacing='0'> <tr><td>bla blablabla <input type='text' name='test'></td></tr> </table> <div><input type='text' name='test' size='10'> test mit textboix</div> </div> <p>nachrückender Text</p> <!-- <============================= -->wie gewünscht nachgerückt.
Btw., wenn schon inline-Styling, dann nicht so:
<div id='true_answer' name='true_answer' visibility:hidden;position:absolute'>sondern so!
Und da ich gerade so schön am meckern bin: Du beschäftigst Dich ja lobenswerterweise mit CSS, also kannst Du auf solche HTML-Attribute:
<table border='0' cellpadding='0' cellspacing='0'>doch sehr gut verzichten!
Shepard
-
Hallo sasha
Hier die Quelle:
<html>
<head>
<script type="text/javascript">
[code lang=javascript]function makeVisible (divid) {
document.getElementById(divid).style.display = "block";
}
function makeInVisible (divid) {
document.getElementById(divid).style.display = "none";
}> > </script> > </head> > <body> > ... > <div id='true\_answer' name='true\_answer' visibility:hidden;position:absolute'>[/code] ^---------------------------------^ Ich würde allerdings diesen Müll noch rausschmeißen. So funktionierts bei mir im IE 6, wie auch die berichtigte Version von Felix. Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!