nicht angemeldet
Zeigen-Verstecken-Buttons
Hallo!
Weiss jemand wie man Knöpfe erstellen kann, dass wenn man sie klickt, einen Teil der Site angezeigt wird. Zum Beispiel kann nach einer Aufgabe einen Button *Lösung zeigen*, dann kann man drauf klicken und die Lösung erscheint (mit interpretierten HTML-Tags). Man sollte dann wieder auf *Verstecken* klicken können und es sieht wieder aus wie vorher.
Ich habe bereits probiert, allerdings werden die HTML-Tags nur ausgegeben und nicht interpretiert... :-S
<html>
<head>
<script type="text/javascript">
function showhide(where,what) {
document.getElementById(where).firstChild.data = what;
}
</script>
</head>
<body>
<div class="showhide" id="sh1" onClick="javascript:showhide('sh1','<b>Hallo</b>')">Zeigen!</div>
</body>
</html>
Kann mir jemand helfen?
Gruss,
Adrian
-
Hi,
document.getElementById(where).firstChild.data = what;
document.getElementById(where).innerHTML = what;
<div class="showhide" id="sh1" onClick="javascript:showhide('sh1','<b>Hallo</b>')">Zeigen!</div>
"javascript:"? Davon kann man ausgehen. Da aber "javascript:" kein JavaScript ist: Weg damit ;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! -
Hi Adrian Kousz,
Weiss jemand wie man Knöpfe erstellen kann, dass wenn man sie klickt, einen Teil der Site angezeigt wird. Zum Beispiel kann nach einer Aufgabe einen Button *Lösung zeigen*, dann kann man drauf klicken und die Lösung erscheint (mit interpretierten HTML-Tags). Man sollte dann wieder auf *Verstecken* klicken können und es sieht wieder aus wie vorher.
Du schreibst die Lösung in ein div (oder was du willst).
Du versteckst das div (siehe unten).
Wenn die Lösung angezeigt werden soll, zeigst du das div per JavaScript wieder an.
Wenn es dann wieder angezeigt werden soll, machst du das Gegenteil.Du solltest aber dran denken, dass das nur funktioniert, wenn JavaScript aktiviert ist. Wenn es immer angezeigt werden soll, musst du das div standardmäßig angezeigt lassen und per onload verstecken, wenn man es lieber garnicht sehen können soll (was in_ diesem_ Fall auch ganz sinnvoll wäre), musst du es direkt mit style="" verstecken.
<div class="showhide" id="sh1" onClick="javascript:showhide('sh1','<b>Hallo</b>')">Zeigen!</div>
Das ist Mist.
Viele Grüße aus Freiburg,
Marian-
Hi,
Wenn es immer angezeigt werden soll, musst du das div standardmäßig angezeigt lassen und per onload verstecken,
Immer besser: Nicht per onload, sondern sobald das zu Versteckende existiert, oder wenigstens am Ende der Seite (sofern, dank Tabellen-Design, der Rendervorgang nicht angezeigt wird), oder die Seite selbst im wesentlichen mit JS verstecken, und dann komplett im onload sichtbar machen.
Diese Laden-Anzeigen-Weg-Geruckel ist IMHO grausam. %-)
wenn man es lieber garnicht sehen können soll (was in_ diesem_ Fall auch ganz sinnvoll wäre),
Hmm, IMHO auch nicht in diesem Fall.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi Cybaer,
Wenn es immer angezeigt werden soll, musst du das div standardmäßig angezeigt lassen und per onload verstecken,
Immer besser: Nicht per onload, sondern sobald das zu Versteckende existiert, oder wenigstens am Ende der Seite (sofern, dank Tabellen-Design, der Rendervorgang nicht angezeigt wird), oder die Seite selbst im wesentlichen mit JS verstecken, und dann komplett im onload sichtbar machen.
Aber dann kann es sein, dass man die Lösung wenn auch nur kurz sieht - wenn da nur "Antwort c ist richtig" steht, reicht das...
wenn man es lieber garnicht sehen können soll (was in_ diesem_ Fall auch ganz sinnvoll wäre),
Hmm, IMHO auch nicht in diesem Fall.
Wenn man die Lösung schon sieht ist, ja auch blöd.
Viele Grüße aus Freiburg,
Marian-
Hi,
Aber dann kann es sein, dass man die Lösung wenn auch nur kurz sieht
Wenn das vermieden werden muß, dann kann man ja eben das "Drumrum" auch verstecken. Das geht frühestens direkt hinter dem BODY-Tag - und somit vor dem Content. :-)
Also vereinfacht:
<body onload="document.body.style.visibility='visible';">
<script>
document.body.style.visibility="hidden";
</script>Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
So, vielen Dank für die Antworten!
Ich habe das Problem schlussendlich so gelöst, wie ihr unten sieht. Falls jemand noch einen Verbesserungsvorschlag hat, kann er/sie gerne nochmals schreiben!Grüsse,
Adrian<html>
<head>
<title>Informaticus Komplettlösung</title>
<style type="text/css">
.showhide {
border: 1px solid #CCC;
width: 80%;
cursor: pointer;
padding: 10px;
}
div.showhide:hover { border-color: red }
.showhide div { display: none }
</style>
<script type="text/javascript">
function showhide(where) {
if (document.getElementById(where).style.display != "block") {
document.getElementById(where).parentNode.firstChild.replaceData(0,7,"Verstecken!");
document.getElementById(where).style.display = "block";
}
else {
document.getElementById(where).parentNode.firstChild.replaceData(0,11,"Zeigen!");
document.getElementById(where).style.display = "none";
}
}
</script>
</head><body>
<div class="title">
<span style="font-family:'Courier New','Lucida Console'">Informaticus</span> Komplettlösung
</div><br>(...)<br><br>
(Man kann auch alle Kombinationen ausprobieren, wenn man Pech hat, kann es aber lange gehen: Es gibt 5<sup>3</sup> = 125 Möglichkeiten.) Die richtige Lösung ist folgende:
<div class="showhide" onClick="showhide('logical')">Zeigen!
<div id="logical">
<table border="1">
<tr><th>Apsis</th><th>Beschäftigung der Gilde</th><th>Gildenhaus</th><th>Standort</th></tr>
<tr><td>3</td><td>Datenkommunikation</td><td>Turm des Schweigens</td><td>Titanengebirge</td></tr>
<tr><td>4</td><td>Bildverarbeitung</td><td>Analogitenkloster</td><td>westlicher Gipfel der Zwillingsberge</td></tr>
<tr><td>5</td><td>Programmierung</td><td>alte Mühle</td><td>Ba-it-Wälder</td></tr>
<tr><td>6</td><td>Wissensverarbeitung</td><td>Monolithobservatorium</td><td>Kaah-ih Hochebene</td></tr>
<tr><td>8</td><td>Technische Informationssysteme</td><td>Kontor</td><td>Zwillingstal</td></tr>
</table>
<b>alte Mühle: Ba-it-Wälder<br>6. Apsis: Wissensverarbeitung<br>Haus der Gilde mit Techn. Info-Systemen: Kontor</b>
</div></div></body>
</html>-
Hi,
Falls jemand noch einen Verbesserungsvorschlag hat, kann er/sie gerne nochmals schreiben!
Außer daß ich, wie geschrieben, statischen HTML-Code immer auch mit JS verstecken würde (bei JS-only-Seiten würde ich den HTML-Code auch erst mit JS schreiben), sollte man IMHO prinzipiell darauf testen, ob der Browser das überhaupt kann. Also ...
function showhide(where) {
if (document.getElementById) {
if (document.getElementById(where).style.display != "block") {
Wobei es in diesem Fall ohnehin ziemlich sinnlos ist, denn bei einer diesbezügl. Reaktion ("Browser zu alt" bzw. "Bitte JavaScript einschalten") ist hier, da ja eben auch statischer HTML-Code, das Kind bereits in den Brunnen gefallen. ;-) Ist also eher eine Anmerkung fürs Archiv - getestet habe ich den Code auch nicht. ;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
