Javascript: Text verbergen und anzeigen

  • Javascript: Text verbergen und anzeigen

    Hi!

    zu mienem aktuellen problem amche ich dann doch mal ne eigenen Topic auf ... :D

    Ich habe eine Memberliste:

    Quellcode

    1. Member1 Punkt1 Punk2 Punkt3
    2. Member2 Punkt1 Punk2 Punkt3
    3. Member3 Punkt1 Punk2 Punkt3
    4. Member4 Punkt1 Punk2 Punkt3
    5. Member5 Punkt1 Punk2 Punkt3


    Nun sollte das "MembrerX" jeweils ein Link sein, mit dem man sich die Details des Members anzeigen lassen kann.
    Wenn man auf den Namen klickt, öffnen sich die Details unterhalb der groben Übersicht:

    Quellcode

    1. Member1 Punkt1 Punk2 Punkt3
    2. Member2 Punkt1 Punk2 Punkt3
    3. Member3 Punkt1 Punk2 Punkt3
    4. Detailtext, Foto
    5. und weitere Inbformationen über Member3
    7. Member4 Punkt1 Punk2 Punkt3
    8. Member5 Punkt1 Punk2 Punkt3

    Bei einem erneuten Klich schließen sich die Details wieder.

    Hatte den Code dafür schonmal im Netz gefunden, aber erneutes googeln hat mir leider nicht nochmal geholfen... :(

    Güße,
    Max123
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • wie groß ist dein interesse eine neue "programmiersprache" zu lernen? :lol:

    für so sachen verwende ich AJAX...
    durch den klick auf den link wird eine php/sql anfrage an den server gesendet... das ergebnis wird dann per javascript im aktuellen dokument (also ohne refresh) eingebunden

    wenns für dich von interesse ist, kann ich morgen (heute keine zeit) mal so einen code erstellen

    im internet findest du auch beispiele.. suche nach [google]ajax beispiele[/google]

    z.B. hier
    http://openrico.org/rico/demos.page?demo=ricoAjaxInnerHTML.html

  • hmm, wenn ich Zeit hätte, würd ichs ja tun... :D
    daher w#äre ich dir dankbar, wenn du mal so etwas für mich schreiben könntest, damit ich das grundgerüst shconmla habe. ;)
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • So, habe mal was mit Javascript gemacht:
    klick mich

    Quellcode

    1. <html><head>
    3. <script type="text/javascript">
    4. function show (member) {
    5. if (document.getElementById) {
    6. if (document.getElementById(member).style.visibility == "visible") {
    7. document.getElementById(member).style.visibility = "hidden";
    8. } else {
    9. document.getElementById(member).style.visibility = "visible";
    10. }
    11. }
    12. }
    13. </script>
    15. </head><body>
    17. <a href="javascript:show('B')">B anzeigen</a>
    18. <div id="B" style="visibility:hidden">
    19. <i>B's Details</i>
    20. </div>
    22. <a href="javascript:show('C')">C anzeigen</a>
    23. <div id="C" style="visibility:hidden">
    24. <i>C's Details</i>
    25. </div>
    27. <a href="javascript:show('A')">A anzeigen</a>
    28. <div id="A" style="visibility:hidden">
    29. <i>A's Details</i>
    30. </div>
    33. </body></html>
    Alles anzeigen


    Allerdings gibts da noch einen großen Nachteil:
    Wenn die Details nicht angezeigt werden, dann soll an der Stelle auch kein freier weisser Platz sein.

    Hilfe! :D
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • naja, das <i> war jetzt nur ein Beispiel. Das soll anchher ja nicht alles kusiv sein. :D

    Aber mit einer Tablelle dürfste das vllt auch gehen, oder?

    edit:
    geht auch mit deinem tipp oder ner tabelle nicht, der platz bleibt weiss:

    Quellcode

    1. <html><head>
    3. <script type="text/javascript">
    4. function show (member) {
    5. if (document.getElementById) {
    6. if (document.getElementById(member).style.visibility == "visible") {
    7. document.getElementById(member).style.visibility = "hidden";
    8. } else {
    9. document.getElementById(member).style.visibility = "visible";
    10. }
    11. }
    12. }
    13. </script>
    15. </head><body>
    17. <a href="javascript:show('B')">B anzeigen</a>
    18. <table id="B" style="visibility:hidden">
    19. <tr><td>B's Details</td></tr>
    20. </table>
    22. <a href="javascript:show('C')">C anzeigen</a>
    23. <table id="C" style="visibility:hidden">
    24. <tr><td>C's Details</td></tr>
    25. </table>
    27. <a href="javascript:show('A')">A anzeigen</a>
    28. <table id="A" style="visibility:hidden">
    29. <tr><td>A's Details</td></tr>
    30. </table>
    33. </body></html>
    Alles anzeigen
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • naja, dass deine tabellenlösung nicht funktioniert ist logisch
    schließlich beginnt die tabelle eine neue Zeile

    wie wärs mit einer unsichtbaren spalte?

    Quellcode

    1. <table>
    2. <tr><td><a href="javascript:show('B')">B anzeigen</a></td><td id="B" style="visibility:hidden">B's Details</td></tr>
    3. </table>
    5. <table>
    6. <tr><td><a href="javascript:show('C')">C anzeigen</a></td><td id="C" style="visibility:hidden">C's Details</td></tr>
    7. </table>
    9. <table>
    10. <tr><td><a href="javascript:show('A')">A anzeigen</a></td><td id="A" style="visibility:hidden">A's Details</td></tr>
    11. </table>
    Alles anzeigen

  • "d0nUt" schrieb:

    ist aber logisch.. ein leeres div wird nunmal auch angezeigt

    versuch doch statt

    Quellcode

    1. <div id="B" style="visibility:hidden">
    2. <i>B's Details</i>


    Quellcode

    1. <i id="B" style="visibility:hidden"><br />B's Details</i>


    Falsch gedacht ;) Wäre schon richtig, aber Ihr verwendet die falsche Style Angabe! visibility macht zwar sichtbat/unsichtbar, aber mit Platzhalter!

    Was Ihr braucht ist display! Also:

    Quellcode

    1. <div id="B" style="display:none">
    2. <i>B's Details</i>


    Bzw. zum Anzeigen:

    Quellcode

    1. <div id="B" style="display:inline">
    2. <i>B's Details</i>


    70abc

  • Jetzt funktionierts!

    Demo

    Quellcode

    1. <html><head>
    3. <script type="text/javascript">
    4. function show (member) {
    5. if (document.getElementById) {
    6. if (document.getElementById(member).style.display == "block") {
    7. document.getElementById(member).style.display = "none";
    8. } else {
    9. document.getElementById(member).style.display = "block";
    10. }
    11. }
    12. }
    13. </script>
    15. </head><body>
    17. <a href="javascript:show('B')">B anzeigen</a><br>
    18. <table id="B" style="display:none">
    19. <tr><td>B's Details</td></tr>
    20. </table>
    22. <a href="javascript:show('C')">C anzeigen</a><br>
    23. <table id="C" style="display:none">
    24. <tr><td>C's Details</td></tr>
    25. </table>
    27. <a href="javascript:show('A')">A anzeigen</a><br>
    28. <table id="A" style="display:none">
    29. <tr><td>A's Details</td></tr>
    30. </table>
    33. </body></html>
    Alles anzeigen


    Danke!
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • Ich finde diese Lösung auch super, da sie codemäßig recht unaufwendig ist. Im Internet findet man direkt immer große Codebrocken, in denen man sich nicht zurechtfindet.

    Und obs ne Suchmaschiene mit aufnimmt ist mir egal, muss nicht sein, aber kann man ja mal testen, ob es so ist! Wenn die Seite online ist werd ich Google mal befragen! :)
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • "wulfgang" schrieb:

    "d0nUt" schrieb:

    die frage ist wie versteckter text interpretiert wird ;)


    ich glaube nicht, dass suchmaschinen css sprechen. und wenn doch, dann kann man attribut ja auch erst mit javascript reinschreiben lassen.


    *räusper* was denkst du wie suchmaschinen arbeiten?
    suchmaschinen können all das, was browser auch können..
    auch wenn sie javascript nicht mögen, können sie selbst verschlüsselten code interpretieren (der browser kanns ja auch)

  • Wäre es möglich, wenn ich einen Teil (z.B. id="b") aufklappe, dass sich dann alle anderen Teiel (id=a,c,d) schließen?
    Ich könnte ja alle ids in einem array speichern, dann die auszuklappende id aus dem array entfernen und dann das array komplett ausgeben lassen und dabei alle vorkommenden ids schließen.

    In PHP wärs kein Problem, nur wie mach ich das in Javascript? :mrgreen:
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • "d0nUt" schrieb:

    *räusper* was denkst du wie suchmaschinen arbeiten?
    suchmaschinen können all das, was browser auch können..


    sie könnten zwar schon, aber meines wissens überspringen sie javascript- und css-code einfach. vielleicht weißt du das aber auch besser.

    @Max123 habe deine vorgehensweise nicht ganz verstanden, aber javascript kann ja auch mit array arbeiten, sollte also dann auch so realisierbar sein.

  • "wulfgang" schrieb:

    sie könnten zwar schon, aber meines wissens überspringen sie javascript- und css-code einfach. vielleicht weißt du das aber auch besser


    wenn sie spammaßnahmen erkennen, dann ignorieren sie ihn doch nicht..

    ist ja auch egal..
    wollt nur noch antworten weil ich gerade einen "verwandten" beitrag bei heise gefunden habe

    Google analysiert Webseiten-Quellcode

    Das Projekt Google Code[1] hat den HTML-Quelltext von über einer Milliarde Webseiten aus dem Google-Cache statistisch untersucht. Hintergrund für die Arbeit ist Googles Engagement in der Arbeitsgruppe Web Hypertext Application Technology (WHAT WG[2]), die unabhängig vom W3C[3] an Entwürfen für Version 5 von HTML arbeitet. Aus dem Datenmaterial sollen Erkenntnisse über die Bedürfnisse der Webdesigner gewonnen werden, um sie in die Weiterentwicklung von HTML einfließen zu lassen.

    Die Projektgruppe stellte fest[4], dass die durchschnittliche Webseite 19 verschiedene HTML-Elemente enthält. Die überwiegende Mehrzahl der Webdesigner verwendet nach wie vor HTML für die Gestaltung: Tabellen fürs Layout gehörten ebenso wie das veraltete font-Tag zum Standard. Proprietäre Erweiterungen wie topmargin (IE-typisch) oder marginheight (Netscape; beide im body-Tag) sind um Größenordnungen populärer als Elemente zur semantischen Strukturierung von Inhalten.

    Sogar Tippfehler ließen sich statistisch erfassen: So hatten tausende von Webdesignern Probleme, das (ohnehin veraltete) language-Attribut im script-Tag korrekt zu schreiben. Auch die beliebtesten Web-Editoren hinterlassen ihre Marken im Quelltext, indem sie HTML eigenmächtig um Tags, Attribute oder Werte bereichern.

    Die Ergebnisse der Studie könnten in den Entwurf von HTML 5 eingehen, indem unpopuläre Attribute und Elemente aus der Spezifikation verschwinden und häufig genutzte proprietäre Erweiterungen oder Stylesheet-Klassennamen standardisiert werden. Das W3C betrachtet dagegen die Weiterentwicklung von HTML seit Version 4.01 als abgeschlossen und arbeitet derzeit an XHTML 2

    http://www.heise.de/newsticker/meldung/print/68922

  • Hab mir für solche Zwecke ne Funktion geschrieben.
    Ich glaub, das ist genau das was du suchst.

    Die Funktion blendet alle child-elements eines Elements aus, bis auf das aktive.

    Quellcode

    1. /* allg. Wechselfunktion (show&hide) für Tags */
    2. function swap(element_ID, tag, hot_ID) {
    3. var elements = document.getElementById(element_ID).getElementsByTagName(tag);
    4. var vis_mode = '';
    6. for(var i=0; i < elements.length; i++) {
    7. if(elements[i].id == hot_ID) {
    8. vis_mode='block';
    9. } else {
    10. vis_mode='none';
    11. }
    12. elements[i].style.display=vis_mode;
    13. }
    14. }
    Alles anzeigen


    Hierbei stellt die "element_ID" die ID des Elements dar, in der die childs liegen...

    Beispiel :

    Quellcode

    1. <div id="mother">
    2. <span id="child0">Child0</span>
    3. <span id="child1">Child1</span>
    4. </div>


    um hier zu switchen braucht man z.B. 2 links

    Quellcode

    1. <a href=javascript:swap('mother', 'span', 'child0');">show_child0</a>
    2. <a href=javascript:swap('mother', 'span', 'child1');">show_child1</a>


    Es gibt einige Möglichkeiten sowas zu lösen, mit ajax und der neuen $A() Function scheint das noch kürzer zu gehen.

    hier :
    sergiopereira.com/articles/prototype.js.html