Hallo!
Ich bin gerade beim Programmieren meiner Homepage.
Ich möchte nun auf einer Seite dynamisches HTML anwenden, um auf Mausklick in einem Text verschiedene "versteckte" Elemente einzublenden. Also, der Text besteht aus mehreren Absätzen, die von verschiedenen Leuten stammen, und auf Mausklick sollen (am besten rechts daneben in einer extra-Spalte) sämtliche Namen der Leute eingeblendet werdne, ohne dass die Seite neu geladen werden muss.
Leider kenne ich mich mit Dynamischem HTML nicht aus. Kann mir jemand sagen, wie ich das bewerkstelligen kann?
Dynamisches HTML - versteckte Absätze einblenden
-
-
Würde ich mit Javascript machen, weiss nicht obs ne einfachere Möglichkeit gibt.
-
Aber wie mache ich das dann, für jeden Absatz separat? Ich möchte ja auf einen Mausklick alle versteckten Absätze einblenden!
-
Einfach alles, was per Mausklick eingebunden wird, dort einfügen.
Ob da Absätze drin sind, ist egal.EDIT: <span> musst du du dann zu <p> (oder einem anderen Blockelement) machen.
-
Klar, versteh ich schon, aber die Absätze sollen dann ja nicht alle untereinander angezeigt werden, sondern im Text verteilt sein. Da mal ein (versteckter) Absatz, dann ein paar Zeilen drunter einer... Wie geht das?
-
ich hab sowas mal verwendet.
die eizelnen bereiche hab ich in aber in nen div-container verpackt, und den per javascript auf/zumachen zu könnenif(document.getElementById(personID).style.display=="block")
{
document.getElementById(detailID).style.display="none";
document.getElementById(detailID).style.height=0;
}
else
{
document.getElementById(detailID).style.display="block";
document.getElementById(detailID).style.height="auto";
} -
Häh, tut mir Leid, das versteh ich nicht!
-
schreib anstelle des <span> mal ein <div>, dann sollte deine javascript-funktion richtig sein
-
Dazu wäre mir jetzt folgende Idee gekommen, die bei einem kurzen Test auch geklappt hat.
JS Code bleibt gleich, aber:
HTML
Alles anzeigen<a href="#" onclick="javascript: anzeigen('bezeichnung'), anzeigen('bezeichnung2')">Anzeigen</a> <span id="bezeichnung" style="display: none;"> HIER DER VERSTECKTE TEXT </span> <p> Hier ein Text, der immer erscheint. </p> <span id="bezeichnung2" style="display: none;"> HIER DER VERSTECKTE TEXT 2 </span>
-
Lautet die Funktion dann korrekterweise:
HTML<script type="text/javascript"> function anzeigen(id){ div = document.getElementById(id).style.display; if(div == "none"){ document.getElementById(id).style.display = ""; }else{ document.getElementById(id).style.display ="none"; } } </script>
So funktioniert's nicht. Wenn ich die obigen beiden "div"s zu "span" ändere, geht's auch nicht. Es wird immer nur der erste Absatz eingeblendet, ne Fehlermeldung kommt aber auch nicht!!
Ich hab das Ganze in einer Tabelle drin, aber ich glaub nicht, dass das einen Unterschied macht, oder? -
Oh, hab's grad probiert - wenn das Ganze nicht in eine Tabelle eingepackt ist, funktioniert's!! Aber ich hätte es schon gerne in einer Tabelle, weil mir dann die versteckten Namen in der Spalte rechts angezeigt werden könnten!
-
edit:
hab mir die zeit genommen nochmal alles zu lesen...
also ich hab zwar keinen link für dich, dafür kannste aber auf die tabelle klicken....
styles musste anpassen und es is ratsam jquery in deinen eigenen webspace zu packen, statt ihn wie ich es mache von googlecode zu sucken....lange rede gar kein sin hier der code.... (jquery is zwar gewöhnungsbedürftig, aber wenn mans mal kapiert hat fruchtet die sau ohne zu mucken)
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>scratchFile</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $('#mytable').ready(function(){ $('#mytable').click(function(){ $('.hidden').toggle(); }); }); /* ]]> */ </script> <style type="text/css"> #mytable{ cursor:pointer; } #mytable tr td{ width:200px; padding:10px; } .hidden{ display:none; } </style> </head> <body> <table id="mytable" border="1"> <tr> <td> <div> hier steht ein text<br /> bla blubb...<br /> hier noch wat blubber </div> </td> <td> <div class="hidden"> gustav gans<br /> bernhard bürzel<br /> vater frost </div> </td> </tr> <tr> <td> <div> hier steht ein text<br /> bla blubb...<br /> hier noch wat blubber </div> </td> <td> <div class="hidden"> peter pan<br /> jürgen jarolin <br /> detlef damenklo </div> </td> </tr> </table> </body> </html>
das ganze sieht dann fertig so aus: http://home.arcor.de/olewat/einblenden.html
-
Hallo!
Wow, warum gibt's Leute wie dich ( synaptic), die sich für andere Leute so viel antun? Wahnsinn! Vielen, vielen Dank!
Aber (tut mir Leid, da ist trotzdem ein "aber") es geht immer noch nicht. Es wird wieder nur der erste versteckte Absatz einggeblendet...
Außerdem wär's mir lieber, ich hätte einen Link um all versteckten Elemente anzuzeigen, und müsste nicht nur auf den Text klicken wie in deinem Beispiel. (Denn dann machen das sicher viele Leute sofort beim Durchlesen, und dann ist der Überraschungseffekt weg...)
Ich glaube ich Mach's einfach ohne Tabelle, irgendwie. Anscheinend geht's ja anders nicht... -
mach mal deinen quelltext fertig(ruhig mit dummytexten oder anderen beispielinhalt), wenn ich dann heute abend daheim bin, nehm ich den und werd das script entsprechend anpassen.
denke ich bin gegen 19 uhr daheim (hoffe du kannst noch bis dahin warten)
vorher klappts leider net, da ich heut nen arsch voll zu programmieren hab -
Wow, toll, danke
Ich hab dir die eine Seite mit der css-Datei angehängt. -
Machs sonst mal lieber so:
HTML<script type="text/javascript"> function anzeigen(id){ span = document.getElementById(id).style.display; if(span == "none"){ document.getElementById(id).style.display = "block"; }else{ document.getElementById(id).style.display ="none"; } } </script>
Es kann sein, dass du mit dem Leerlassen des display: Fehler erhältst.
Wenn du die Funktion nur für Block-Elemente, wie divs oder Absätze brauchst, dann ist die obige Lösung besser.
Ansonsten bräuchtest du etwas, womit du sagst, ob es inline oder block ist. -
Ändert auch nix. Es wird immer nur der erste Absatz eingeblendet.
-
Hab mich mal für dich drangesetzt.
Demo: http://hid.white-tiger.ch/show.htmlHTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Javascript Funktion show()</title> <script type="text/javascript"> //<![CDATA[ function show(obj, style_display){ // obj = ID des Objektes, welches angezeigt werden sollte. // style_display = Zeigt, wie es dargestellt werden sollte (block, inline, etc.). var el = document.getElementById(obj).style; if(el.display != 'none') { el.display = 'none'; } else { el.display = style_display; } } //]]> </script> </head> <body> <div> <a id="a" href="javascript:show('testid','block')">Anzeigen/Verstecken 1. Absatz</a><br /> <p id="testid" style="display: none">Ich bin nicht da..</p><br /> <a href="javascript:show('nixda','block')">Anzeigen Verstecken von zweitem Absatz</a><br /> <p id="nixda" style="display: none">Ich bin auch nicht da..</p><br /> <a href="javascript:show('inline','inline')">Anzeigen Verstecken von Inline-Element</a><br /> <span id="inline" style="display: none">Ich bin auch nicht da..</span> </div> </body> </html>
-
Ist ja toll, danke, aber (leider) - ich möchte ja alle Elemente auf einmal mit einem separaten Link anzeigen lassen! Schaffst du das auch?
-
Na klar:
http://tools.white-tiger.ch/standalone/show.html
Hab einfach gepröbelt, bis es ging, aber dadurch lerne ich dazu :D.. Brauchte ca. 30 Minuten.
-