Javascript: Doppelte Einträge in Drop-Down / CSS: ul scrollen

[Enrico]

Hallo,

ich hoffe, dass ich jetzt nicht bald Gefahr laufe, aus diesem Forum verbannt zu werden,
weil ich euch immer bei doch so einigen Problemen und Fragen bemühen muss.

Ich muss schon sagen, dass es mir langsam fast unangenehm wird, Fragen zu stellen, aber
dieses Forum ist eines der wenigen Foren, wo einem _wirklich_ weitergeholfen wird.

Vor lauter Freude, dass ich mein Drop-Down-Menü nun endlich so hinbekommen habe, wie ich
es mir vorgestellt habe, habe ich übersehen, dass die Untermenüs doppelte Einträge haben.

Zudem plagt mich das Problem, wie ich mein Drop-Down-Menü mit einem Scrollbalken versehen
kann, so dass alle Auswahlpunkte erreichbar sind.

Aber erst einmal zu meinem Problem mit den doppelten und nicht sortierten Einträgen:

Nachdem ich festgestellt habe, dass das Einlesen der Textdatei mit den Filmdetails und der
nachfolgenden Umwandlung des php-Arrays in ein Javascript-Array mehr Probleme als Nutzen
mit sich bringt, habe ich mich dazu entschlossen, die ganzen Filmdetails in einer js-Datei
mit folgendem Aufbau unterzubringen (mySQL bekomme ich, aus welchen Gründen auch immer,
einfach nicht zum Laufen):

var Film = new Array ();

Film[0] = new Object ();
   Film[0]["Nr"]          = "1";
   Film[0]["Titel"]       = "DER HERR DER RINGE - TEIL 1 - DIE GEFÄHRTEN";
   Film[0]["Inhalt"]      = "Der kleine Hobbit Frodo erhält von seinem Onkel Bilbo kurz vor...";
   Film[0]["Genre"]       = "Fantasy";
   Film[0]["FSK"]         = "12";
   Film[0]["Darsteller"]  = new Array ("WOOD, Elijah", "McKELLEN, Ian", "TYLER, Liv", ...);
   Film[0]["Produzenten"] = new Array ("OSBORNE, Barrie M.", "JACKSON, Peter", "WALSH, Frances", "SANDERS, Tim");
   Film[0]["Regisseure"]  = new Array ("JACKSON, Peter");

Film[1] = new Object ();
   Film[1]["Nr"]          = "2";
   Film[1]["Titel"]       = "DER HERR DER RINGE - TEIL 2 - DIE ZWEI TÜRME";
   Film[1]["Inhalt"]      = "Frodo und Sam begeben...";
   ...usw...

Wie bei meiner letzten Frage "(CSS) Oberpunkt bei angezeigtem Untermenü in anderer Farbe anzeigen"
hat mein Drop-Down-Menü folgende Struktur:

<ul class="navmenu">
      <li><a>Oberpunkt</a>
         <ul>
            <li><a href="...">Unterpunkt</a></li>
            <li><a href="...">Unterpunkt</a></li>
            <li><a href="...">Unterpunkt</a></li>
         </ul>
      </li>
      <li><a>Oberpunkt</a>
         <ul>
            <li><a href="...">Unterpunkt</a></li>
            ...usw...
         </ul>
      </li>
      ...usw...
   </ul>

Genauer formuliert sieht die Struktur wie folgt aus, da ich die Untermenüs über Javascript dynamisch
erzeugen lasse:

<ul class="navmenu">
      <li><a>Anfangsbuchstabe</a>
         <ul id="Auswahl_Anfangsbuchstabe"></ul>
      </li>
      <li><a>Genre</a>
         <ul id="Auswahl_Genre"></ul>
      </li>
      <li><a>FSK</a>
         <ul id="Auswahl_FSK"></ul>
      </li>
      <li><a>Darsteller</a>
         <ul id="Auswahl_Darsteller"></ul>
      </li>
      <li><a>Produzent</a>
         <ul id="Auswahl_Produzent"></ul>
      </li>
      <li><a>Regisseur</a>
         <ul id="Auswahl_Regisseur"></ul>
      </li>
   </ul>

Nachfolgende Funktion sorgt für die Erzeugung der Menüpunkte der Untermenüs und sollte auch die Eindeutigkeit
der Einträge sicherstellen und keine doppelten Einträge aufnehmen:

function Auswahllisten_aufbauen (Film)
   {
      var Array_Anfangsbuchstaben = new Array ();
      var Array_Genres            = new Array ();
      var Array_FSK               = new Array ();
      var Array_Darsteller        = new Array ();
      var Array_Produzenten       = new Array ();
      var Array_Regisseure        = new Array ();

var Liste_Anfangsbuchstaben = "";
      var Liste_Genres            = "";
      var Liste_FSK               = "";
      var Liste_Darsteller        = "";
      var Liste_Produzenten       = "";
      var Liste_Regisseure        = "";

for (var i = 0; i < Film.length; i++)
      {
         var Neuer_Eintrag = Film[i]["Titel"].substring(0,1);

if (is_numeric (Neuer_Eintrag))
         {
            Neuer_Eintrag = "#";
         }

if (! Array_Anfangsbuchstaben.in_array (Neuer_Eintrag))
         {
            Array_Anfangsbuchstaben.push(Neuer_Eintrag);
         }

if (! Array_Genres.in_array (Film[i]["Genre"]))
         {
            Array_Genres.push(Film[i]["Genre"]);
         }

if (! Array_FSK.in_array (Film[i]["FSK"]))
         {
            Array_FSK.push(Film[i]["FSK"]);
         }

for (var j = 0; j < Film[i]["Darsteller"].length; j++)
         {
            if (! Array_Darsteller.in_array (Film[i]["Darsteller"][j]))
            {
               Array_Darsteller.push(Film[i]["Darsteller"][j]);
            }
         }

for (var j = 0; j < Film[i]["Produzenten"].length; j++)
         {
            if (! Array_Produzenten.in_array (Film[i]["Produzenten"][j]))
            {
               Array_Produzenten.push(Film[i]["Produzenten"][j]);
            }
         }

for (var j = 0; j < Film[i]["Regisseure"].length; j++)
         {
            if (! Array_Regisseure.in_array (Film[i]["Regisseure"][j]))
            {
               Array_Regisseure.push(Film[i]["Regisseure"][j]);
            }
         }
      }

Array_Anfangsbuchstaben.sort (Sortierung_alphabetisch);
      Array_Genres.sort (Sortierung_alphabetisch);
      Array_FSK.sort (Sortierung_numerisch);
      Array_Darsteller.sort (Sortierung_alphabetisch);
      Array_Produzenten.sort (Sortierung_alphabetisch);
      Array_Regisseure.sort (Sortierung_alphabetisch);
   }

Hier die Funktionen zu den Aufrufen "is_numeric" und "in_array":

function is_numeric (Wert)
   {
      return !isNaN (Wert);
   }

Array.prototype.in_array = function (needle)
   {
      for (var i = 0; i < this.length; i++)
      {
         if (this [i] === needle)
         {
            return true;
         }
         else
         {
            return false;
         }
      }
   }

Letztendlich werden die Untermenüs über "innerHTML" hinzugefügt.

1. Was muß ich ändern/richtigstellen, damit ich keine doppelten Einträge mehr habe?

2. Wie kann ich sicherstellen, dass ein überlanges Untermenü gescrollt werden kann?

Über die Ergänzung "overflow: scroll;" bekomme ich zwar einen Scrollbalken angezeigt,
dieser reicht aber über den Bildschirmbereich hinaus und ist deaktiviert.

Vielen, vielen, vielen lieben Dank für eure Hilfe.

Gruß
Enrico

[Enrico]

So, das Problem mit den doppelten Einträgen habe ich jetzt endlich lösen
können, was noch bleibt, ist die Angelegenheit mit der Möglichkeit, eine
überlange ul-Liste scrollen zu können.

Hier konnte ich leider (noch) nichts finden...

Gruß
Enrico

[minicrispie]

Hallo,

was noch bleibt, ist die Angelegenheit mit der Möglichkeit, eine überlange ul-Liste scrollen zu können.

Pake sie in ein Div, was eine feste höhe besitzt und formatiere dies mit overflow:scroll; ... dann solltest du einen scrollbalken sehen...

MfG. Christoph

[Enrico]

Hallo Christoph,

habe die Lösung gefunden, wurde auch Zeit:

.navmenu li:hover > ul
   {
      display:    block;
      height:     350px;
      overflow-x: hidden;
      overflow-y: auto;
   }

Danke für Deinen Ansatz, evtl. ist meine Lösung auch für andere hilfreich.

Gruß
Enrico

[Enrico]

Hmmmm, jetzt habe ich zwar das Problem mit dem Scrollbalken gelöst, dafür ist
ein anderes aufgetaucht:

Der Scrollbalken verdeckt einen kleinen Teil des längsten <li>-Elementes.

Deshalb dachte ich mir, ich könnte den <ul>-Elementen doch auch  einfach einen
zusätzlichen Abstand spendieren, so wie ich es auch bei meinem Anzeige-div
umgesetzt habe:

function Zusaetzlicher_Abstand (Objekt)
{
var Objekt    = window.document.getElementById (Objekt);

var div_Hoehe    = Objekt.clientHeight;
var Seitenlaenge = Objekt.scrollHeight;

if (Seitenlaenge > div_Hoehe)
{
Objekt.setAttribute("style", "padding-right: 7px;");
}
}

Leider funktioniert es aber nicht, wie leider befürchtet.

Ich kann die <li>-Elemente aber nicht in einen div-Bereich packen, da mir sonst die
Elemente nicht mehr angezeigt werden.

Welche Möglichkeiten habe ich, hier, je nach Bedarf, <ul>-Elementen einen zusätzlichen
Abstand zu spendieren?

Vielen Dank :-)

Gruß
Enrico