Höhe eines <ul>-Elementes ermitteln

[Enrico]

Hallo,

erstmal bitte ich um Entschuldigung, dass ich mich "vorgedrängelt" habe, aber ich
komme einfach nicht weiter und es macht wenig Sinn, an einer anderen Stelle an
meiner DVD-Verwaltung weiterzumachen, wenn vorher etwas nicht so funktioniert, wie
ich es mir vorstelle.

Das Problem mit der Ausgabe eines Scrollbalkens habe ich lösen können.

Nun habe ich aber das Problem, dass der Scrollbalken einen kleinen Teil des längsten
<li>-Elementes überdeckt und damit "abschneidet".

Ich hatte an anderer Stelle schon mal das Problem, wie ich es umsetzen könnte, dass
ein <div>-Bereich eine zusätzlichen Abstand ("padding-right") bekommt, sobald ein
Scrollbalken angezeigt wird.

Dieses Problem konnte ich lösen, hier aber renne ich mit dem Kopf gegen die Wand.

Ich kann meine Drop-Down-Struktur weder in einen <div>-Bereich fassen, noch in einen
<span>-Bereich, um so evtl. an die Höhe des Untermenüs zu gelangen, da mir sonst die
Untermenüs nicht mehr angezeigt werden.

Hier nochmal die Struktur:

<ul class="Auswahllisten">
      <li><a>Anfangsbuchstabe</a>
         <ul id="Auswahl_Anfangsbuchstabe"></ul>
      </li>
      <li><a>Genre</a>
         <ul id="Auswahl_Genre"></ul>
      </li>
      ...usw...
   </ul>

Die <li>-Elemente der Untermenüs werden dynamisch über Javascript eingebaut.

Über folgende Anweisung wollte ich die Höhe des Untermenüs auslesen, hier wird
mir aber für die Höhe des Untermenüs nur der Wert "0" ausgegeben:

Zusaetzlicher_Abstand ("Auswahl_Anfangsbuchstabe");

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

if (Menuelaenge > 350)
      {
         Objekt.setAttribute("padding-right", "7px");
      }
   }

Ich komme und komme einfach nicht weiter...

Könnt ihr mir hier weiterhelfen ?

Wäre mehr als nur super, denn dann steht meine DVD-Verwaltung kurz vor ihrem Abschluss.

Vielen Dank und Gruß
Enrico

[suit]

<ul class="Auswahllisten">
      <li><a>Anfangsbuchstabe</a>
         <ul id="Auswahl_Anfangsbuchstabe"></ul>
      </li>
      <li><a>Genre</a>
         <ul id="Auswahl_Genre"></ul>
      </li>
      ...usw...
   </ul>

Die <li>-Elemente der Untermenüs werden dynamisch über Javascript eingebaut.

ist aber nicht valide, wenn keine li-elemente drinnen sind (auch, wenn die nachträglich von javascript geschrieben werden)

ergo kann und wird dich der http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=quirksmode heimsuchen

[Struppi]

ist aber nicht valide, wenn keine li-elemente drinnen sind (auch, wenn die nachträglich von javascript geschrieben werden)

ergo kann und wird dich der http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=quirksmode heimsuchen

Naja, Validität und Quirksmodus haben nichts miteinander zu tun.

Struppi.

[Enrico]

Danke für Eure Rückantworten.

D.h. also, dass ich mittels DOM die <li>-Elemente in den html-Baum einhängen
muss, um so validen Code zu erhalten und die Höhe DANN auslesen zu können?

Enrico

[suit]

D.h. also, dass ich mittels DOM die <li>-Elemente in den html-Baum einhängen muss, um so validen Code zu erhalten und die Höhe DANN auslesen zu können?

prinzipiell ist es egal ob die listen-elemente durch javascript eingehängt werden oder nicht - die höhe kannst du jedenfalls mit http://de.selfhtml.org/javascript/objekte/all.htm#offset_height@title=offsetHeight auslesen

[Enrico]

Hallo Struppi,

und das klappt nicht:

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

alert ("Objekt_ID = " + Objekt_ID + " | Höhe: " + div_Hoehe + " | Seitenlaenge: " + Seitenlaenge);

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

ich bekomme bei Seitenlaenge immer nur den Wert "0", obwohl die Seite
bzw. das Untermenü definitiv länger als 350px ist, da ich einen
Scrollbalken habe.

Struppi, ich versteh's nicht... Ich komm einfach nicht dahinter, warum das
nicht klappt...

Gruß
Enrico

[Struppi]

ich bekomme bei Seitenlaenge immer nur den Wert "0", obwohl die Seite
bzw. das Untermenü definitiv länger als 350px ist, da ich einen
Scrollbalken habe.

Glaub ich nicht.

Struppi.

[Enrico]

Leider ist dem aber wirklich so und ich versteh's einfach nicht, ich flipp' noch aus...

Ich definiere zunächst mein Drop-Down-Menü:

<ul class="Auswahllisten">
      <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>

Fülle dann die einzelnen Untermenüs:

<script type="text/javascript" language="javascript">

Auswahllisten_aufbauen (Film);

Und prüfe dann, ob die Länge der Untermenüs größer als 350px ist:

// Zusaetzlicher_Abstand ("Auswahl_Anfangsbuchstabe");
      // Zusaetzlicher_Abstand ("Auswahl_Genre");
      // Zusaetzlicher_Abstand ("Auswahl_FSK");
      Zusaetzlicher_Abstand ("Auswahl_Darsteller");
      // Zusaetzlicher_Abstand ("Auswahl_Produzent");
      // Zusaetzlicher_Abstand ("Auswahl_Regisseur");

// Ladeanzeige_anzeigen ('Container_Wartescreen', 0);

</script>

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

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

Wenn ich mir nun mit "alert (Seitenlaenge)" den Wert ausgeben lasse,
ist er "0"...

Gruß
Enrico

[Struppi]

Ich definiere zunächst mein Drop-Down-Menü:

Das ist leer und die Höhe ist null.

Fülle dann die einzelnen Untermenüs:

Wenn ich mir nun mit "alert (Seitenlaenge)" den Wert ausgeben lasse,
ist er "0"...

dann hast du diese nicht richtig "gefüllt".

Struppi.

[Enrico]

Hallo Struppi,

Das heisst, ich mich dann doch auf DOM zurückgreifen, da "innerHTML" nicht
ausreicht?

Das mit dem Befüllen funktioniert aber, da die Auswahllisten korrekt und
ohne Fehler in der Firefox-Fehlerkonsole am Monitor ausgegeben werden.

Gut, dann mach ich mal auf den Weg nach DOM ;-)

Enrico

[Struppi]

Das heisst, ich mich dann doch auf DOM zurückgreifen, da "innerHTML" nicht
ausreicht?

Nein, das heißt es nicht.

Das mit dem Befüllen funktioniert aber, da die Auswahllisten korrekt und
ohne Fehler in der Firefox-Fehlerkonsole am Monitor ausgegeben werden.

Das muss nichts heißen. So wie es aussieht befüllst du eben nicht die Liste.

Gut, dann mach ich mal auf den Weg nach DOM ;-)

prinzipiell ist das bestimmt besser, aber für dein Problem nicht relevant.

Struppi.

[Enrico]

Ach, Struppi ;-)

Woran liegt es denn genau?

Was ist Deiner Meinung nach für mein Problem relevant?

Gruß
Enrico

[Struppi]

Woran liegt es denn genau?

kein Ahnung.

Was ist Deiner Meinung nach für mein Problem relevant?

wie du die Liste befüllst.

Struppi.

[Enrico]

Was wäre denn Deiner Meinung nach der richtige Weg zum Befüllen der Listen?

Aktuell erledige ich das über folgende Funktion:

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.contains (Neuer_Eintrag))
         {
            Array_Anfangsbuchstaben.push(Neuer_Eintrag);
         }

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

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

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

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

for (var j = 0; j < Film[i]["Regisseure"].length; j++)
         {
            if (! Array_Regisseure.contains (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);

for (var i = 0; i < Array_Anfangsbuchstaben.length; i++)
      {
         Liste_Anfangsbuchstaben += '<li><a onclick="Tabelle_filtern (Film, 'Anfangsbuchstabe', '' + Array_Anfangsbuchstaben[i] + '')">' + Array_Anfangsbuchstaben[i] + '</a></li>';
      }

for (var i = 0; i < Array_Genres.length; i++)
      {
         Liste_Genres += '<li><a onclick="Tabelle_filtern (Film, 'Genre', '' + Array_Genres[i] + '')">' + Array_Genres[i] + '</a></li>';
      }

for (var i = 0; i < Array_FSK.length; i++)
      {
         Liste_FSK += '<li><a onclick="Tabelle_filtern (Film, 'FSK', '' + Array_FSK[i] + '')">' + Array_FSK[i] + '</a></li>';
      }

for (var i = 0; i < Array_Darsteller.length; i++)
      {
         Liste_Darsteller += '<li><a onclick="Tabelle_filtern (Film, 'Darsteller', '' + Array_Darsteller[i] + '')">' + Array_Darsteller[i] + '</a></li>';
      }

for (var i = 0; i < Array_Produzenten.length; i++)
      {
         Liste_Produzenten += '<li><a onclick="Tabelle_filtern (Film, 'Produzenten', '' + Array_Produzenten[i] + '')">' + Array_Produzenten[i] + '</a></li>';
      }

for (var i = 0; i < Array_Regisseure.length; i++)
      {
         Liste_Regisseure += '<li><a onclick="Tabelle_filtern (Film, 'Regisseure', '' + Array_Regisseure[i] + '')">' + Array_Regisseure[i] + '</a></li>';
      }

var Auswahl_Anfangsbuchstabe = window.document.getElementById ("Auswahl_Anfangsbuchstabe");
      var Auswahl_Genre            = window.document.getElementById ("Auswahl_Genre");
      var Auswahl_FSK              = window.document.getElementById ("Auswahl_FSK");
      var Auswahl_Darsteller       = window.document.getElementById ("Auswahl_Darsteller");
      var Auswahl_Produzent        = window.document.getElementById ("Auswahl_Produzent");
      var Auswahl_Regisseur        = window.document.getElementById ("Auswahl_Regisseur");

Auswahl_Anfangsbuchstabe.innerHTML = Liste_Anfangsbuchstaben;
      Auswahl_Genre.innerHTML            = Liste_Genres;
      Auswahl_FSK.innerHTML              = Liste_FSK;
      Auswahl_Darsteller.innerHTML       = Liste_Darsteller;
      Auswahl_Produzent.innerHTML        = Liste_Produzenten;
      Auswahl_Regisseur.innerHTML        = Liste_Regisseure;
   }

Wobei Film mein assoziatives Array mit Unter-Arrays ist.

Gruß
Enrico

[Struppi]

Aktuell erledige ich das über folgende Funktion:

Soweit ich das sehe ist das ok und so solltest du auch die Höhe zurück kriegen. Besser wäre es, wenn du ein funktionierendes Beispiel zeigen würdest, weil so ist es weiterhin nur rumraterei.

Struppi.

[Enrico]

Hallo Struppi,

nachfolgende Funktion sorgt für die Ausgabe der Filmdateien inkl. zusätzlichem Abstand, falls notwendig:

function Tabelle_ausgeben ()
   {
      var Tabelle_Kopf    = "<table><tr><th>Nr.</th><th>Cover</th><th>Titel</th><th>Inhalt</th><th>Genre</th><th>FSK</th></tr>";
      var Tabelle_Koerper = "";

for (var i = 0; i < Filmliste_Ansicht.length; i++)
      {
         Tabelle_Koerper += '<tr>';
         Tabelle_Koerper += '<td>' + Filmliste_Ansicht[i]["Nr"] + '</td>';
         Tabelle_Koerper += '<td>&nbsp;</td>';
         Tabelle_Koerper += '<td nowrap>' + Filmliste_Ansicht[i]["Titel"] + '</td>';
         Tabelle_Koerper += '<td width="100%">' + Filmliste_Ansicht[i]["Inhalt"] + '</td>';
         Tabelle_Koerper += '<td nowrap>' + Filmliste_Ansicht[i]["Genre"] + '</td>';
         Tabelle_Koerper += '<td><img src="GRAFIKEN/LAYOUT/FSK_' + Filmliste_Ansicht[i]["FSK"] + '.png" width="51" height="20"></td>';
         Tabelle_Koerper += '</tr>';
      }

var Tabelle_Filmtitel = Tabelle_Kopf + Tabelle_Koerper + '</table>';

var Anzeigebereich = window.document.getElementById ("Anzeigebereich");

Anzeigebereich.innerHTML = Tabelle_Filmtitel;

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

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

Und hier klappt es, hier verwende ich aber einen div als Container.

Vielleicht liegt es aber auch an der nachfolgenden Funktion, die die Untermenüs gegebenenfalls um den Scrollbalken ergänzen sollen:

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

if (Menuelaenge > 350)
      {
         Objekt.className = "Zusaetzlicher_Abstand";
      }
   }

Ich habe auch ausprobiert, die Überprüfung direkt in die Funktion zum Erzeugen der Auswahllisten zu integrieren, aber mit gleichem,
nämlich keinem Erfolg, aber auch keinem Fehler in der Firefox-Fehlerkonsole:

var Auswahllisten = new Array ("Auswahl_Anfangsbuchstabe","Auswahl_Genre","Auswahl_FSK","Auswahl_Darsteller","Auswahl_Produzent","Auswahl_Regisseur");

for (var i = 0; i < Auswahllisten.length; i++)
   {
      var Menuelaenge = Auswahllisten[i].scrollHeight;

if (Menuelaenge > 350)
      {
         Auswahllisten[i].className = "Zusaetzlicher_Abstand";
      }
   }

Das Menü in einen div zu packen bzw. auch nur die Untermenüs klappt nicht, weil mir hier die Untermenüs sonst nicht mehr angezeigt werden.

Gruß
Enrico

[[ERGÄNZUNG] Enrico]

Nachdem ich in der eben angesprochenen Funktion zum Erzeugen der Auswahllisten bereits die Objekte angesprochen habe...

var Auswahl_Anfangsbuchstabe = window.document.getElementById ("Auswahl_Anfangsbuchstabe");
   var Auswahl_Genre            = window.document.getElementById ("Auswahl_Genre");
   var Auswahl_FSK              = window.document.getElementById ("Auswahl_FSK");
   var Auswahl_Darsteller       = window.document.getElementById ("Auswahl_Darsteller");
   var Auswahl_Produzent        = window.document.getElementById ("Auswahl_Produzent");
   var Auswahl_Regisseur        = window.document.getElementById ("Auswahl_Regisseur");

...habe ich dies in der Schleife natürlich nicht mehr getan.

Gruß
Enrico

[Struppi]

nachfolgende Funktion sorgt für die Ausgabe der Filmdateien inkl. zusätzlichem Abstand, falls notwendig:

Wie gesagt, ohne eine Beispiel, wo man sich dein Problem anschauen kann, kann man dir nicht helfen. Die Codefragmente nützen hier nichts.

Struppi.