nicht angemeldet
GetElementByID: Etwas einblenden
Hallo,
ich möchte auf einer Seite bestimmte Textteile ein- und ausblenden. Ich arbeite mit einem vorgefertigten Script, das wiederum GetElementByID verwendet.
Nun, die ID muss ja im Body einem bestimmten Teil zugeordnet werden: z.B.: <div id="teil1">
Okay, das funktioniert mit einem Teil. Ich möchte aber, viele solcher Teile über viele Links einblenden lassen: Der erste Link den ersten Teil, der zweite den zweiten Teil usw. Nun meine Frage: Muss ich da für jeden Teil einen eigenen Code schreiben?
Bitte um eure Hilfe, Danke und Grüße
Der Code:
<script type="text/javascript" language="javascript">
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){obj.addEventListener(evType, fn, useCapture);
return true;
}
else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else {alert("Handler could not be attached");
}
}
function togglediv(e){
if (!e) return;
var container = document.getElementById(e);
var status= container.style.display;
if (status == 'none'){
container.style.display = 'block';
}
else {container.style.display = 'none';
}
}
function toggledidv(e){
if (!e) return;
var container = document.getElementByClass(e);
var status= container.style.display;
if (status == 'none'){
container.style.display = 'block';
}
else {container.style.display = 'none';
}
}
function addListeners(){
if(!document.getElementById) return;
var toggleButton = document.getElementById('togglebutton');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false);
}
addEvent(window, 'load', addListeners, false);
</script>
<style type="text/css" media="screen">
.togglediv {display:none}
</style>
</head>
-
Ah, sorry das war der falsche Code; hier der richtige:
<script type="text/javascript" language="javascript">
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){obj.addEventListener(evType, fn, useCapture);
return true;
}
else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
}
else {alert("Handler could not be attached");
}
}function togglediv(e){
if (!e) return;
var container = document.getElementById(e);
var status= container.style.display;
if (status == 'none'){
container.style.display = 'block';
}
else {container.style.display = 'none';
}
}function addListeners(){
if(!document.getElementById) return;
var toggleButton = document.getElementById('togglebutton');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false);
}
addEvent(window, 'load', addListeners, false);
</script>
<style type="text/css" media="screen">
#togglediv {display:none}
</style>
</head> -
Hallo,
Muss ich da für jeden Teil einen eigenen Code schreiben?
Könntest du das evtl. etwas genauer erklären? Was genau meinst du mit Code?
Meinst du…( ) dass du jew. eine extra Funktion erstellen musst?
( ) dass du mehrmals die gleiche Funktion, jedoch mit unterschiedlichen Parametern aufrufen musst?
( ) dass du jedem Element eine eigene ID geben musst?Gibt es evtl ein Code-Beispiel zum ausprobieren?
Oder: Wie sieht dein zugehöriges HTML aus?mfg. Daniel
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Show/Hide Divs using JavaScript</title> <script type="text/javascript" language="javascript"> function addEvent(obj, evType, fn, useCapture){ if (obj.addEventListener){ obj.addEventListener(evType, fn, useCapture); return true; } else if (obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; } else { alert("Handler could not be attached"); } } function togglediv(e) { if (!e) return; var container = document.getElementById(e); var status = container.style.display; if (status == 'none') { container.style.display = 'block'; } else { container.style.display = 'none'; } } function addListeners() { if(!document.getElementById) return; var toggleButton = document.getElementById('togglebutton'); addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false); } addEvent(window, 'load', addListeners, false); </script> </head> <style type="text/css" media="screen"> /* <![CDATA[ */ body { font: 0.7em/160% "Lucida Grande", Verdana, Helvetica, sans-serif; } #togglediv { background: #F9EE98; border: 1px solid #D9C589; display: none; padding: 0.5em 1em; } /* ]]> */ </style> <body> <p><a href="#" id="togglebutton">Toggle</a></p> <div id="togglediv"> A div which's visibility can be toggled using Javascript. </div> </body></html>
Sorry, das das so wirr aussieht. Das obige Problem konnte ich mittlerweile lösen. Hätte aber eine neue Frage: Wenn du dieses Codebeispiel ausprobieren könntest, dann merkst du, dass du auf Toggle doppelt klicken musst, damit was passiert.
Was muss ich ändern, damit alles mit einem gewöhnlichen Klick passiert?Danke und Grüße Mattikim
-
Hallo,
[jede Menge Code]
Sorry, das das so wirr aussieht.
Zum Glück hattest du das Script vorher schon mit den Zeilenumbrüchen geschickt, sonst hätte ich dir gar nicht helfen können.
Das obige Problem konnte ich mittlerweile lösen.
gut.
Hätte aber eine neue Frage: Wenn du dieses Codebeispiel ausprobieren könntest, dann merkst du, dass du auf Toggle doppelt klicken musst, damit was passiert.
In deinem Script steht:
if (status == 'none')Damit willst du abfragen, ob das Element angezeigt wird oder nicht. In Wirklichkeit prüfst du aber nur, ob das besagte Element ein style-Attribut hat, in dem „display:none“ steht. Wenn du jetzt das 1. Mal auf „Toggle“ klickst, fügst du eben dieses „style="display:none"“ hinzu.
Und erst jetzt kannst du dieses Attribut mit deiner if-Bedingung abfragen.Was muss ich ändern, damit alles mit einem gewöhnlichen Klick passiert?
Zuerst überprüfen, ob das „style“-Attribut bereits notiert ist und einen display-Wert hat. Das könntest du erreichen, indem du die if-Bedingung folgendermaßen erweiterst:
if (!status || status == 'none')
Falls das gewünschte Element also keinen display-style-Wert hat, wird die Funktion dann auch ausgeführt.
PS: Versuche die Seite auch ohne JavaScript zugänglich zu machen, indem du die Textboxen beispielsweise erst beim laden ausblendest. Als Links könntest du dann sinnvolle Verweise auf Textmarken verwenden, die mit JS natürlich genauso funktionieren, wie es jetzt der Fall ist.
mfg. Daniel
-
Wow, danke - das hat wunderbar geklappt!
Nur dein P.S. kann ich nicht ganz nachvollziehen. Soll ich das machen, damit Leute, die JS deaktiviert haben, auch etwas sehen können?
Und - wie würde ich das überhaupt machen müssen?
Danke und Gruß
-
Hallo,
Wow, danke - das hat wunderbar geklappt!
Nur dein P.S. kann ich nicht ganz nachvollziehen. Soll ich das machen, damit Leute, die JS deaktiviert haben, auch etwas sehen können?
Genau. JavaScript sollte möglichst optional sein. D.h. der Nutzer sollte dadurch Vorteile haben. Wer JS nicht aktiviert hat, für den ist die Navigation evtl. etwas komplizierter. Möglich muss es aber auf jeden Fall sein!
Und - wie würde ich das überhaupt machen müssen?
Du erstellt zuerst einmal eine normale Linkliste, mit der du auf die IDs der Links verweist (mit #Textmarke).
Darauf kannst du dann das JavaScript aufsetzen. Blende zuerst alle Felder aus, dann kannst du wie gewohnt die einzelnen Textfelder ausrufen.
Ich habe dir mal ein Beispiel erstellt. Allerdings mit einem eigenen Script ;-)
mfg. Daniel
-
Danke für dein Bemühen. Ich hätte da auch noch eine Idee. Dass ich am Anfang einer Seite eine Linkliste erstelle, die dann auf Textteile am unteren Ende der Seite verlinkt. Das wäre dann wohl eine ganz einfache Umsetzung, aber auch wirkungsvoll.
Hab' das zwar noch nie gemacht, aber das muss ja auch über ID und so laufen, oder!?<a href="http://www.8ung.at/manfredkimmel/projekt/index.htm">Hier meine Seite, an der ich zurzeit bastle!</a>
ie:) fl:) br:$ va:) ls:[ fo:| rl:? n4:~ ss:| de:] js:) ch:# sh:) mo:( zu:)
-
Hallo,
Danke für dein Bemühen.
Gern geschehen :)
Ich hätte da auch noch eine Idee. Dass ich am Anfang einer Seite eine Linkliste erstelle, die dann auf Textteile am unteren Ende der Seite verlinkt.
So war es eigentlich auch in deinem Beispiel. So wie jetzt ist es natürlich auch OK. Dann müsstest du das Ganze aber wieder so machen, dass alle Blöcke defaultmäßig offen sind und durch JavaScript ausgeblendet werden.
Die „Ausklappen“-Buttons sollten dagegen zuerst ausgeblendet sein (da sie für Nutzer ohne JS uninteressant sind). Alternativ kannst du sie natürlich auch per JS erzeugen, was aber etwas schwieriger wäre.Des Weiteren solltest du den Button-Text ändern, wenn die entspr. Box geöffnet ist. Das geht einfach mit firstChild.nodeValue = "neuer Text".
Und noch ein kleiner Tipp: wenn sich die Buttons ohnehin in der Box befinden, die eingeblendet werden soll, kannst du auch einfach mit „this“ arbeiten.
Also z.B.:
this.parentNode.style.display = "block";[jetzt wieder zur Linkliste]
Hab' das zwar noch nie gemacht, aber das muss ja auch über ID und so laufen, oder!?
Genau. Du kannst mit #ZielID jew. die richtige ID in deinem Dokument. ansteuern. D.h. der Browser springt an diese Stelle.
Auf meiner Beispielseite habe ich das übrigens auch gleich ausgenutzt, um dem JavaScript die ID mitzuteilen. Und zwar so:
onclick="show(this.href.split("#")[1]); return false"Mit
this.href.split("#")[1]kannst du also den Teil nach dem „#“ herausfiltern und ihn als Parameter an die Funktion weitergeben.
„return false“ sorgt dann noch dafür, dass der Link nicht ausgewählt wird, sodass du bedenkenlos ein sinnvolles Linkziel angeben kannst.<a href="http://www.8ung.at/manfredkimmel/projekt/index.htm">Hier meine Seite, an der ich zurzeit bastle!</a>
Links funktionieren in diesem Forum etwas anders als in HTML: dein Titel.
ie:) br:$ mo:(
Bist du dir da sicher? Bzw: du weißt, dass du gerade meinen Lieblingsbrowser schlecht machst?
mfg. Daniel
-
-
-
-
-
-