Aufklappbares Menü mit Untermenü per Variablen

Seite 12 3

1 JDommi

Hallo zusammen!

Ich verzweifele grade daran ein Menü zu erstellen, welches meine Fernsehserien staffelweise aufklappen kann. Mein Problem besteht darin, daß ein bestimmter HTML-Code (mit Variablen) für jede Episode wiederholt wird. Der Teil zwischen  und .

<html>
<body>

<script type="text/javascript">
	function Un_Fold(x) {
	if(document.getElementById(x).style.display == "block") {
		document.getElementById(x).style.display = "none";
	} else {
		document.getElementById(x).style.display = "block";
	}}
</script>

<table border="0" width="100%">
<tr>
<td width="103%" height="16" class="style20">
<a href="#" onclick="Un_Fold('under1');return false;">
<img border="0" src="MyCollectionCard/FrecciaVerde2.bmp" width="16" height="16">&nbsp;<font size=2><b>EPISODES:</b></font></a>

<div style="display:none;" id="under1">
				
   <!--END_HEAD-->
				
   <b><font size="1"><img border="0" src="MyCollectionCard/FrecciaVerde.bmp" width="16" height="16">&nbsp;</font>
   </b><font size="1">(_EPISODE_SEASON_-_EPISODE_NUMBER_)<a href="" onclick="window.external.COLLECTION_EPISODE('_EPISODE_ID_');return false;">
   <b>_EPISODE_TITLE_</b></a><br> </font> 

   <!--END_EPISODES-->
	
</div>

</tr>
</table>

</body>
</html>

Wie bekomme ich es jetzt per javascript hin automatisch die einzelnen Staffeln ebenfalls auf- und zuklappen zu können?
Ich bekomme es einfach nicht hin, den variablen Parameter _EPISODE_SEASON_ zu übergeben und mit dem vorherigen Aufruf zu vergleichen, da der sich wiederholende Part dynamisch durch die realen Werte ersetzt wird.

Ich hoffe, daß ich mich einigermaßen verständlich ausgedrückt habe und mir geholfen werden kann.

Schon mal besten Dank vorab!

JDommi

2 Jörg Kruse

So ganz steige ich durch deinen Code noch nicht durch ;)

Was soll COLLECTION_EPISODE() machen?

Und wo befindet sich die Staffel, die ein- und ausgeblendet werden soll?

Ich bekomme es einfach nicht hin, den variablen Parameter _EPISODE_SEASON_ zu übergeben und mit dem vorherigen Aufruf zu vergleichen, da der sich wiederholende Part dynamisch durch die realen Werte ersetzt wird.

Wohin willst du den Parameter übergeben - an eine Aufklappfunktion wie das Un_Fold() in deinem Code?

Ganz allgemein kannst du auch mittels "this" auf ein Objekt selbst Bezug nehmen:

http://de.selfhtml.org/javascript/sprache/objekte.htm#this

3 JDommi

Hi Jörg!

Hab ich mir fast gedacht, daß ich mich mal wieder unklar ausgedrückt habe *lol*. Zur Erklärung: der HTML-Code ist ein Template für eine Filmverwaltung.

COLLECTION_EPISODE() ist einfach nur ein Link auf die Seite mit der Episodenbeschreibung.
Die Staffel befindet sich in der Variablen _EPISODE_SEASON_
Zur Zeit kann ich nur den kompletten Bereich Episoden ausblenden, aber es soll im Endeffekt zusätzlich noch Staffelweise ausgeblendet werden - siehe code unten.

<html>
<body>

<script type="text/javascript">
function Un_Fold(x) {
if(document.getElementById(x).style.display == "block") {
document.getElementById(x).style.display = "none";
} else {
document.getElementById(x).style.display = "block";
}}
</script>

<font face="Arial" size="5">&#9660;</font><a href="#" onclick="Un_Fold('seasons');return false;">Episodes</a><br>
<div style="display:none;" id="seasons">
	&nbsp;&nbsp;<font face="Arial">&#9660;</font><a href="#" onclick="Un_Fold('season1');return false;">Season 1</a><br>
	<div style="display:none;" id="season1">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 1<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 2<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 3<br>
	</div>
	&nbsp;&nbsp;<font face="Arial">&#9660;</font><a href="#" onclick="Un_Fold('season2');return false;">Season 2</a><br>
	<div style="display:none;" id="season2">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 1<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 2<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 3<br>
	</div>
	&nbsp;&nbsp;<font face="Arial">&#9660;</font><a href="#" onclick="Un_Fold('season3');return false;">Season 3</a><br>
	<div style="display:none;" id="season3">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 1<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 2<br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Episode 3<br>
	</div>
</div>
	
</body>

</html>

Dieses _EPISODE_SEASON_ ist nur ein Platzhalter, der vom Programm aus einer Datenbank heraus mit dem realen Wert zur Laufzeit ersetzt wird und kein konkreter Wert wie im obigen Beispiel 'season1'.

JDommi

4 JDommi

Bei näherer Betrachtung geht's eigentlich nur darum, daß ich die Variable _EPISODE_SEASON_ an das script übergebe und mit dem Inhalt aus dem vorherigen Aufruf vergleiche. Wenn der Inhalt neu ist, dann soll einfach die <div>-Routine eingefügt/ausgeführt werden...

JDommi

5 Jörg Kruse

Solange die ID des Divs und das Argument von Un_Fold() im dazugehörigen Link identisch sind, sollte es kein Problem geben.

&nbsp;&nbsp;<font face="Arial">&#9660;</font><a href="#" onclick="Un_Fold('season1');return false;">Season 1</a><br>
	<div style="display:none;" id="season1">

Die IDS der unterschiedlichen Episoden müssen sich natürlich voneinander unterscheiden.

Edit:

Bei näherer Betrachtung geht's eigentlich nur darum, daß ich die Variable _EPISODE_SEASON_ an das script übergebe und mit dem Inhalt aus dem vorherigen Aufruf vergleiche. Wenn der Inhalt neu ist, dann soll einfach die <div>-Routine eingefügt/ausgeführt werden...

Also soll der Inhalt nicht per onclick eingeblendet werden?

Was für ein Script meinst du, die Funktion Un_Fold()?

Und was ist mit "neu" gemeint - dass der User den Inhalt noch nicht gesehen hat oder dass der Inhalt serverseitig neu ist / sich geändert hat?

6 JDommi

Die IDS der unterschiedlichen Episoden müssen sich natürlich voneinander unterscheiden.

Das ist klar, nur wird der korrekte Ersatzwert für die Staffel korrekt übergeben? Oder bekommt das script immer nur als Namen _EPISODE_SEASON_ ?

Also soll der Inhalt nicht per onclick eingeblendet werden?
Was für ein Script meinst du, die Funktion Un_Fold()?

Definitiv JA! Zu beidem ;)

Und was ist mit "neu" gemeint - dass der User den Inhalt noch nicht gesehen hat oder dass der Inhalt serverseitig neu ist / sich geändert hat?

Letzteres, also wenn der Inhalt serverseitig verändert ist, eine neue Staffel beginnt.
Die einzelnen Episoden jeder Staffel werden ja per onclick in einem neuen Fenster geöffnet, müssen also staffelweise komplett ein- bzw. ausgeblendet werden.

7 Jörg Kruse

Zitat von JDommi

Die IDS der unterschiedlichen Episoden müssen sich natürlich voneinander unterscheiden.

Das ist klar, nur wird der korrekte Ersatzwert für die Staffel korrekt übergeben? Oder bekommt das script immer nur als Namen _EPISODE_SEASON_ ?

Das kannst du doch überprüfen anhand des HTML-Dokuments, welches ausgegeben wird?

Das Beispielscript in Beitrag 3 funktioniert ja. Besteht dein Problem jetzt darin, dass _EPISODE_SEASON_ nicht korrekt in die IDs umgewandelt wird? Wenn ja, wie werden die IDs denn erzeugt - wird das Dokument geparst und _EPISODE_SEASON_ etc. ersetzt? Wenn das nicht korrekt funktioniert, solltest du den Code des Scripts posten, welches für die Ersetzung verantwortlich ist

Also soll der Inhalt nicht per onclick eingeblendet werden?
Was für ein Script meinst du, die Funktion Un_Fold()?

Definitiv JA! Zu beidem ;)

Wenn die Episode nicht per onclick eingeblendet werden soll, wie dann? per Mouse Hover?

Und was ist mit "neu" gemeint - dass der User den Inhalt noch nicht gesehen hat oder dass der Inhalt serverseitig neu ist / sich geändert hat?

Letzteres, also wenn der Inhalt serverseitig verändert ist, eine neue Staffel beginnt.

Also muss eine Anfrage an den Server geschickt, ob sich der Inhalt geändert hat - wenn die Seite nicht neu geladen werden soll, wäre Ajax eine Möglichkeit

Die einzelnen Episoden jeder Staffel werden ja per onclick in einem neuen Fenster geöffnet, müssen also staffelweise komplett ein- bzw. ausgeblendet werden.

Jertzt verstehe ich noch weniger. Wo wird ein neues Fenster geöffnet - mit dem window.external.COLLECTION_EPISODE('_EPISODE_ID_')? und wo soll etwas ein-. oder ausgeblendet werden - in dem geöffneten oder dem öffnenden Fenster?

8 JDommi

Sorry, war noch nie gut im erklären :(

Um alles auf ein Minimum zu reduzieren, bevor ich dich komplett verwirre:

1. Wie vergleiche ich eine Variable in einem Javascript, das mehrfach aufgerufen wird? Aufruf 1: Var=1, Aufruf 2: Var=1, ... Aufruf 14: Var=2, ...
2. Wie übergebe ich vorab diese Variable korrekt an die Funktion Un_Fold?

Irgendwie müsste das doch so (ähnlich) funktionieren:
1. <script type=...>
if tempvar=_EPISODE_SEASON_ then
exit
else
tempvar=_EPISODE_SEASON_
call Un_Fold('_EPISODE_SEASON_')

2.
<a href="#" onclick="Un_Fold('_EPISODE_SEASON_');return false;">
...
<div style="display:none;" id="_EPISODE_SEASON_">

In Delphi oder VB wäre alles einfacher. Aber HTML und Javascript...

9 Jörg Kruse

1. Wie vergleiche ich eine Variable in einem Javascript, das mehrfach aufgerufen wird? Aufruf 1: Var=1, Aufruf 2: Var=1, ... Aufruf 14: Var=2, ...

D.h. du möchtet wissen, welchen Wert Var beim letzten Funktionsaufruf hatte? Du kannst Var außerhalb der Funktion initialisieren

<script type="text/javascript">
var tempvar = 0;
function Un_Fold(x) {
  if (tempvar == 'blabla') {
    /* ... */
  }
  tempvar = x;
}
</script>

Verstehen tue ich den Sinn dahinter jetzt nicht, aber vielleicht hilft es dir ja weiter

2. Wie übergebe ich vorab diese Variable korrekt an die Funktion Un_Fold?

[...]

2.
<a href="#" onclick="Un_Fold('_EPISODE_SEASON_');return false;">
...
<div style="display:none;" id="_EPISODE_SEASON_">

Ja, das sollte so funktionieren, wie ja auch dein Code-Beispiel in Beitrag 3 funktioniert. Oder wo liegt jetzt das Problem?

10 JDommi

1. tempvar wird also nicht jedesmal neu auf 0 gesetzt?
2. Das Problem ist eher eine Frage der Syntax. Wann wird das Apostroph genommen, wann die Anführungszeichen und bleibt das bei einer Textersetzung auch so bestehen. _EPISODE_SEASON_ ist ja nicht der Wert sondern quasi nur ein Parameter. Und ob die Syntax bei Strings bzw. Integerwerten identisch ist...

Seite 12 3

nach oben weiter >