Javascript: Text verbergen und anzeigen

Max123

Professional

Posts: 444

1

Tuesday, January 3rd 2006, 9:17pm

Hi!

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

Ich habe eine Memberliste:

	Source code
1 2 3 4 5	Member1 Punkt1 Punk2 Punkt3 Member2 Punkt1 Punk2 Punkt3 Member3 Punkt1 Punk2 Punkt3 Member4 Punkt1 Punk2 Punkt3 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:

Source code

Member1     Punkt1   Punk2   Punkt3
Member2     Punkt1   Punk2   Punkt3
Member3     Punkt1   Punk2   Punkt3
     Detailtext, Foto
     und weitere Inbformationen über Member3

Member4     Punkt1   Punk2   Punkt3
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

Torben Brodt

Administrator

Posts: 8,454

2

Wednesday, January 4th 2006, 12:37pm

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 ajax beispiele

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

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Max123

Professional

Posts: 444

3

Wednesday, January 4th 2006, 2:17pm

hmm, wenn ich Zeit hätte, würd ichs ja tun...

daher w#äre ich dir dankbar, wenn du mal so etwas für mich schreiben könntest, damit ich das grundgerüst shconmla habe.

Max123

Professional

Posts: 444

4

Wednesday, January 18th 2006, 4:25pm

So, habe mal was mit Javascript gemacht:
klick mich

HTML Code

<html><head>
 
<script type="text/javascript">
    function show (member) {
        if (document.getElementById) {
            if (document.getElementById(member).style.visibility == "visible") {
                document.getElementById(member).style.visibility = "hidden";
            } else {
                document.getElementById(member).style.visibility = "visible";
            }
        }
    }
</script>
 
</head><body>
 
    <a href="javascript:show('B')">B anzeigen</a>
    <div id="B" style="visibility:hidden">
        <i>B's Details</i>
    </div>
 
    <a href="javascript:show('C')">C anzeigen</a>
    <div id="C" style="visibility:hidden">
        <i>C's Details</i>
    </div>
 
    <a href="javascript:show('A')">A anzeigen</a>
    <div id="A" style="visibility:hidden">
        <i>A's Details</i>
    </div>
 
 
</body></html>

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!

Torben Brodt

Administrator

Posts: 8,454

5

Wednesday, January 18th 2006, 5:08pm

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

versuch doch statt

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

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

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Max123

Professional

Posts: 444

6

Wednesday, January 18th 2006, 5:49pm

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

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:

wcf.bbcode.html4strict.title

<html><head>
 
<script type="text/javascript">
    function show (member) {
        if (document.getElementById) {
            if (document.getElementById(member).style.visibility == "visible") {
                document.getElementById(member).style.visibility = "hidden";
            } else {
                document.getElementById(member).style.visibility = "visible";
            }
        }
    }
</script>
 
</head><body>
 
    <a href="javascript:show('B')">B anzeigen</a>
    <table id="B" style="visibility:hidden">
        <tr><td>B's Details</td></tr>
    </table>
 
    <a href="javascript:show('C')">C anzeigen</a>
    <table id="C" style="visibility:hidden">
        <tr><td>C's Details</td></tr>
    </table>
 
    <a href="javascript:show('A')">A anzeigen</a>
    <table id="A" style="visibility:hidden">
        <tr><td>A's Details</td></tr>
    </table>
 
 
</body></html>

Torben Brodt

Administrator

Posts: 8,454

7

Wednesday, January 18th 2006, 7:57pm

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

wie wärs mit einer unsichtbaren spalte?

wcf.bbcode.html4strict.title

<table>
        <tr><td><a href="javascript:show('B')">B anzeigen</a></td><td id="B" style="visibility:hidden">B's Details</td></tr>
    </table>
 
    <table>
        <tr><td><a href="javascript:show('C')">C anzeigen</a></td><td id="C" style="visibility:hidden">C's Details</td></tr>
    </table>
 
    <table>
        <tr><td><a href="javascript:show('A')">A anzeigen</a></td><td id="A" style="visibility:hidden">A's Details</td></tr>
    </table>

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

melwood

Professional

Posts: 343

8

Wednesday, January 18th 2006, 8:13pm

Quoted from ""d0nUt""

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

versuch doch statt

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

	wcf.bbcode.html4strict.title
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:

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

Bzw. zum Anzeigen:

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

melwood

Max123

Professional

Posts: 444

9

Wednesday, January 18th 2006, 8:23pm

Jetzt funktionierts!

Demo

wcf.bbcode.html4strict.title

<html><head>
 
<script type="text/javascript">
    function show (member) {
        if (document.getElementById) {
            if (document.getElementById(member).style.display == "block") {
                document.getElementById(member).style.display = "none";
            } else {
                document.getElementById(member).style.display = "block";
            }
        }
    }
</script>
 
</head><body>
 
    <a href="javascript:show('B')">B anzeigen</a><br>
    <table id="B" style="display:none">
        <tr><td>B's Details</td></tr>
    </table>
 
    <a href="javascript:show('C')">C anzeigen</a><br>
    <table id="C" style="display:none">
        <tr><td>C's Details</td></tr>
    </table>
 
    <a href="javascript:show('A')">A anzeigen</a><br>
    <table id="A" style="display:none">
        <tr><td>A's Details</td></tr>
    </table>
 
 
</body></html>

Danke!

wulfgang

Professional

Posts: 240

10

Thursday, January 19th 2006, 10:47pm

so ist es echt gut gelöst, denn die details werden auf diese weise selbst von der suchmaschine aufgenommen.

andere hätten die details womöglich erst mit javascript reingeschrieben in die seite.

Torben Brodt

Administrator

Posts: 8,454

11

Friday, January 20th 2006, 10:01am

Quoted from ""wulfgang""

so ist es echt gut gelöst, denn die details werden auf diese weise selbst von der suchmaschine aufgenommen..

die frage ist wie versteckter text interpretiert wird ;-)

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Max123

Professional

Posts: 444

12

Friday, January 20th 2006, 2:48pm

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!

wulfgang

Professional

Posts: 240

13

Tuesday, January 24th 2006, 8:29am

Quoted from ""d0nUt""

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.

Torben Brodt

Administrator

Posts: 8,454

14

Tuesday, January 24th 2006, 3:50pm

Quoted from ""wulfgang""

Quoted from ""d0nUt""

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)

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Max123

Professional

Posts: 444

15

Thursday, January 26th 2006, 10:21pm

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:

wulfgang

Professional

Posts: 240

16

Friday, January 27th 2006, 7:59pm

Quoted from ""d0nUt""

*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.

Max123

Professional

Posts: 444

17

Friday, January 27th 2006, 8:51pm

Hat wer ne gute Javascript Dokumentation, ich versteh ungefähr 0 davon...

wulfgang

Professional

Posts: 240

18

Saturday, January 28th 2006, 3:44pm

eine einfache suche bei selfhtml reicht doch schon:

http://de.selfhtml.org/javascript/objekte/array.htm

Torben Brodt

Administrator

Posts: 8,454

19

Saturday, January 28th 2006, 5:53pm

Quoted from ""wulfgang""

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

Quoted

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

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Tom

Beginner

Posts: 10

20

Monday, March 20th 2006, 10:54am

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.

JavaScript Code

/* allg. Wechselfunktion (show&hide) für Tags */
function swap(element_ID, tag, hot_ID) {
	var elements = document.getElementById(element_ID).getElementsByTagName(tag);
	var vis_mode = '';
 
	for(var i=0; i < elements.length; i++) {
		if(elements[i].id == hot_ID) { 
			vis_mode='block'; 
		} else { 
			vis_mode='none';
		}
		elements[i].style.display=vis_mode;	
	}
}

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

Beispiel :

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

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

HTML Code

1
2

<a href=javascript:swap('mother', 'span', 'child0');">show_child0</a>
<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 :
http://www.sergiopereira.com/articles/prototype.js.html

Coder Forum