JavaScript Show/Hide

Doktor Smile · Beitrag von **Doktor Smile** » 28.01.2009 14:39

Liebe Community,
ich komm einfach nicht weiter.

Es regt mich schon seit Tagen auf.

Ich habe einmal in einem vBulletin diese super geile Show/Hide Funktion gesehen.

Nun ist mein Problem:
Ich weiß nicht, wie ich das hinbekomme.

Ich möchte es an allen möglichen Stellen:
Man soll die "Wer ist Online?" Leiste ein und ausblenden können.

Es soll aber wie im vBulletin sein:
In der einen Tabellenzeile findet man so ein Open/Close Icon. klickt man auf dieses Icon wird die
Zeile DARUNTER geclosed.
Es verschwindet nicht die ganze "Wer ist Online?" Box, sondern eben nur die Spalten, wo Inhalt drin ist.
Das bedeutet man sieht dann quasi nurnoch die leere Box "Wer ist Online?"

Ich denke die meisten werden vBulletin kennen.
Hier zum Beispiel:
http://forum.chip.de/

Es gibt unten die eine Spalte, wo ein Link ist "Zurzeit aktive Benutzer". da rechts außen ist das [ externes Bild ]-Icon.
Klickt man auf dieses, dann wird darunter die Tabellenspalte ausgeblendet.

Ich bekomme es einfach nicht hin.
Dieser doofe MOD "Collapsible Categories" funktioniert nicht. Außerdem wirkt der nur für die forumlist_body,
das ist mir zu wenig.

Ich möchte es unbedingt wie in vBulletin haben, da ich diese Funktion so mega mega geil finde.
Kann aber kein JavaScript und komme absolut nicht weiter.

Ich habe es schonmal mit Show/Hide Codes versucht.
Aber es funktioniert nicht,
ich weiß auch garnicht, ob ich mitten in einer Tabelle zwischen
</tr> und <tr> ein DIV setzen kann,
also ob das hier geht:

Code: Alles auswählen

.........
.........
hier ist die Spalte, wo das Open/Close Icon ist
........
........
</tr>
<div id"showhide">
<tr>
............
dies ist die Zeile, die ausgeblendet werden soll, wenn man auf das Open/Close Icon klickt, was in der Zeile da drüber ist.
............................

Danke schonmal ganz herzlich.

John Doe · Beitrag von **John Doe** » 28.01.2009 17:52

Benutze so etwas in einem phpbb2 Forum.

Hab einfach mal den Code zusammengekürzt und zur Demo in eine Html Datei gepackt.

Code: Alles auswählen

<html>
<head>
<script type="text/javascript">
<!--
function _dom_toggle()
{
	return this;
}
	_dom_toggle.prototype.objref = function(id)
	{
		return document.getElementById ? document.getElementById(id) : (document.all ? document.all[id] : (document.layers ? document.layers[id] : null));
	}

	_dom_toggle.prototype.cancel_event = function()
	{
		if ( window.event )
		{
			window.event.cancelBubble = true;
		}
	}

	_dom_toggle.prototype.toggle = function(id, close_id, open_icon, close_icon)
	{
		var open_object = this.objref(id);
		var close_object = this.objref(close_id);

		if ( open_object && open_object.style )
		{
			open_object.style.display = (open_object.style.display == 'none') ? '' : 'none';
			if ( close_object && close_object.style )
			{
				close_object.style.display = (open_object.style.display == 'none') ? '' : 'none';
			}
			if ( close_object && close_object.src )
			{
				close_object.src = (open_object.style.display == 'none') ? open_icon : close_icon;
			}
		}
		this.cancel_event();
	}

// instantiate
dom_toggle = new _dom_toggle();
//-->
</script>

</head>
<body>

<div id="info_display" style="display:none;">
<table>
  <tr>
	<td>
	Inhalt der aufgeklappt wird
  </td>
	  </tr>
	</table>
</div>

<div id="info_close" style="display:visible;">
<table>
  <tr>
	<td>
	Inhalt der normalerweise angezeigt wird
	</td>
  </tr>
</table>
</div>

<table>
  <tr>
	<td align="right" valign="top" nowrap="nowrap">Aufklappen
		<a href="javascript:dom_toggle.toggle('info_display','info_close');">Hier kann auch ein Bild/Icon hin</a>
	</td>
  </tr>
</table>


</body>
</html>

Doktor Smile · Beitrag von **Doktor Smile** » 29.01.2009 19:24

Danke, klappt soweit,
nur wie füge ich da nun eine Grafik ein?

Ich hab den Code so geändert:

Code: Alles auswählen

<a href="javascript:dom_toggle.toggle('info_display','info_close');"><img alt="" src="http://forum.chip.de/images/buttons/collapse_thead.gif"></a>

In meinem Editor gibts eine Vorschaufunktion.
Schaue ich mir das ganze dort an geht alles.
In phpBB selbst wird die Grafik aber garnicht angezeigt.

Warum?

In der Vorschau von der Datei allein (index_body.html) wird es so angezeigt wies sein soll - Grafik ist da, alles richtig. Warum zeigt phpBB sie dann aber im Index nicht an?
Cache undso hab ich alles ja schon geleert. Mit Text geht das auch alles, aber mit der Grafik nicht.

Desweiteren: wie mache ich die Grafik nach rechts außen? Momentan ist sie links.
Habe da folgende Tags um den Code gesetzt:

Code: Alles auswählen

<div align="right">CODE</div>

Auch das ging soweit.
Allerdings hat sich der Inhalt zwischen diesen Tags dann um 3 Pixel oderso noch unten bewegt.

Es ist ja so:
Links ist Text und rechts soll diese Funktion da sein mit dem Icon. Nun ist es aber halt so:
Der Text links ist nicht mit dem rechts (wo später das Icon hin soll) auf einer höhe.

Anstatt dem Icon habe ich da nun stehen "SH". Dieses "SH" ist aber nicht genau auf einer Linie mit "Wer ist Online?" - dem Text links außen.

Das ganze soll aber eben genau in einer Zeile sein und nicht, dass das Icon da bzw. jetzt noch der Text nach unten rutscht.

Beitrag von **Boecki91** » 29.01.2009 22:21

Welchen Klick Bunt Editor benutzt du den?
Du müsstest ihm klarmachen wie der Header vor der Datei aussieht, erst dann kannst du von echte Bedingungen ausgehen.

Und wie kann eine Grafik auf der einen Seite sein wenn sie gar nicht da ist?

John Doe · Beitrag von **John Doe** » 30.01.2009 09:56

Doktor Smile hat geschrieben:Es ist ja so:
Links ist Text und rechts soll diese Funktion da sein mit dem Icon. Nun ist es aber halt so:
Der Text links ist nicht mit dem rechts (wo später das Icon hin soll) auf einer höhe.

Anstatt dem Icon habe ich da nun stehen "SH". Dieses "SH" ist aber nicht genau auf einer Linie mit "Wer ist Online?" - dem Text links außen.

Sollte vom Prinzip her so gehen:

Code: Alles auswählen

<table width"100%">
<tr>
<td align="left">Der Text</td>
<td align="right">Der Code zum Ausklappen</td>
</tr>
</table>

Doktor Smile · Beitrag von **Doktor Smile** » 30.01.2009 15:58

Ja, eigentlich schon.

Nur kann ich in meiner Situation an der Stelle nicht mit "<td>" arbeiten,
daher habe ich es mit DIVs gemacht. Nur war es dann verschoben, aber keine Ahnung weshalb.

Liebe Grüße
Jan

John Doe · Beitrag von **John Doe** » 30.01.2009 16:25

Code: Alles auswählen

<div style="text-align:left; float:left;">Der Text</div>
<div style="text-align:right;">Der Code zum Ausklappen</div>

Doktor Smile · Beitrag von **Doktor Smile** » 30.01.2009 19:43

John Doe hat geschrieben:

Code: Alles auswählen

<div style="text-align:left; float:left;">Der Text</div>
<div style="text-align:right;">Der Code zum Ausklappen</div>

So ist es leider genauso verschoben

John Doe · Beitrag von **John Doe** » 30.01.2009 21:20

Also sowas

Code: Alles auswählen

<html>
<head>
<script type="text/javascript">
<!--
function _dom_toggle()
{
	return this;
}
	_dom_toggle.prototype.objref = function(id)
	{
		return document.getElementById ? document.getElementById(id) : (document.all ? document.all[id] : (document.layers ? document.layers[id] : null));
	}

	_dom_toggle.prototype.cancel_event = function()
	{
		if ( window.event )
		{
			window.event.cancelBubble = true;
		}
	}

	_dom_toggle.prototype.toggle = function(id, close_id, open_icon, close_icon)
	{
		var open_object = this.objref(id);
		var close_object = this.objref(close_id);

		if ( open_object && open_object.style )
		{
			open_object.style.display = (open_object.style.display == 'none') ? '' : 'none';
			if ( close_object && close_object.style )
			{
				close_object.style.display = (open_object.style.display == 'none') ? '' : 'none';
			}
			if ( close_object && close_object.src )
			{
				close_object.src = (open_object.style.display == 'none') ? open_icon : close_icon;
			}
		}
		this.cancel_event();
	}

// instantiate
dom_toggle = new _dom_toggle();
//-->
</script>

</head>
<body>


<div style="text-align:left; float:left;">Text</div>
  <div style="text-align:right;"><a href="javascript:dom_toggle.toggle('info_display','info_close');">Ausklappen</a>
</div>


<div id="info_display" style="display:none;">
<table>
  <tr>
	<td>
	"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </td>
	  </tr>
	</table>
</div>

<div id="info_close" style="display:visible;">
<table width="100%">
  <tr>
	<td>Inhalt der normalerweise angezeigt wird</td>
  </tr>
</table>
</div>


</body>
</html>

wird korrekt auf einer Zeile angezeigt.
Kann eigentlich auch gar nicht anders sein.

phpBB.de

JavaScript Show/Hide

JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide

Re: JavaScript Show/Hide