DOM und Mozilla

[Christian]

Hallo, Gemeinde!

Ich hab ein seltsames Problem mit FireFox 3.0.4 und DOM.

Ich möchte ein dynamisches Menü aufbauen, wobei die einzelnen Menüs ULs und die Einträge LI-Elemente sind.

Wenn ein LI-Eintrag nun ein Untermenü hat, ist im LI eine weitere UL definiert.

Über die OnClick-Routine des LI-Elements wird dann die untergeordnete UL ein- und ausgeblendet.

Das ist so sicher schon tausendmal gemacht worden und funktioniert auch in allen mir bekannten Umgebungen.

Jetzt will ich aber die einzelnen Elemente nicht, wie oft gesehen per document.write zuerst zusammenbasteln und dann schreiben, ich will die Elemente direkt in den Elementbaum von DOM reinhängen.

Genau das quittiert der FF damit, dass, abhängig von der Art der Anzeige (block, inline, etc.), das Untermenü entweder unter dem bestehenden Listenelementen oder über diese drüber gezeichnet wird. Das heisst, die Elemente unter dem Untermenü werden beim Anzeigen nicht verschoben.

Bis jetzt hab ich in keinem Forum oder Tutorial irgend eine Hilfe darauf finden können.

Weiss hier vielleicht jemand, an was das liegen kann?

Vielen Dank im Voraus!

[gast42]

Weiss hier vielleicht jemand, an was das liegen kann?

nein, denn so ohne deinen Quellcode zu kennen ist das doch etwas schwierig

[Christian]

nein, denn so ohne deinen Quellcode zu kennen ist das doch etwas schwierig

Gerne.

Das Objek oMen ist ein Eintrag aus einem Objekt-Array oMenu[], in dem alle Menüs eingelesen werden (oMen = oMenu[x];).

Auf diese Weise kann die Funktion DrawMenu beliebig oft iterativ aufgerufen werden.

Weiters gibt es noch ein CSS  für die Formatierung der Elemente.

Hier die Routine:

function DrawMenu(oMen, BY, x, y) {
 if (!BY) {
  BY = document.getElementsByTagName('body')[0];
  BY.style.background = 'transparent';
 }
 var UL = document.createElement('ul');

UL.className = 'Navigation';
 UL.id = oMen.Id;

with(UL.style) {margin = 0; padding = 0;}
 if (oMen.popup) {
  UL.style.display = 'none';
  UL.style.marginLeft = oMen.indent;
 }
 else {
  if (oMen.men_base == 'top')
   UL.style.top=y;
  else
   UL.style.bottom=y;
  UL.style.position = men_posArt;
  UL.style.left = x;
 }

UL.style.width = oMen.men_width;
 UL.borderColor = BY.style.backgroundColor;
 BY.appendChild(UL);

if (oMen.popup) {
  BY.onclick = function() {
   if (UL.style.display == 'none') {
   UL.style.display = '';
   }
   else {
    UL.style.display = 'none';
    BY.style.border = '1px';
    BY.style.borderStyle = 'solid';
   }
  }
 }

var i;
 var TmpArray = oMen.sMenu.split('|');
 var MenArray = new Array(TmpArray.length);
 for (i = 0; i < TmpArray.length; i++)
  MenArray[i] = TmpArray[i].split(';');

for (i = 0; i < MenArray.length; i++) {
  var LI = document.createElement('li');
  LI.id = MenArray[i][0];
  LI.style.borderColor = 'transparent';
  LI.style.backgroundColor = 'transparent';
  LI.style.width = oMen.men_width;
  LI.style.height = oMen.men_height;
  LI.style.align = 'right';

var LI_Txt = document.createTextNode(MenArray[i][1]);
  var AH = document.createElement('A');
  AH.style.fontWeight = oMen.font_Weight;
  AH.style.fontSize = oMen.font_Size;
  AH.style.fontFamily = oMen.font_Face;
  AH.style.width = oMen.men_width;
  AH.style.backgroundImage = oMen.bk_url;
  AH.appendChild(LI_Txt);
  LI.appendChild(AH);

if (MenArray[i][2].substr(0,1) != '$') {
   AH.href =  MenArray[i][2];
  }
  else {
   AH.href = 'javascript:dummy();';
   DrawMenu(oMenu[MenArray[i][2].substr(1)], LI, 0, 0);
  }
  UL.appendChild(LI);
 }

[ChrisB]

Hi,

Das Objek oMen ist ein Eintrag aus einem Objekt-Array oMenu[], in dem alle Menüs eingelesen werden (oMen = oMenu[x];).
[...]
Weiters gibt es noch ein CSS  für die Formatierung der Elemente.

Und bevor wir uns jetzt Daten und CSS zusammenraten, stellt Christian bitte einfach ein vollstaendiges, auf's Wesentliche reduziertes, valides Online-Beispiel bereit.

MfG ChrisB

[Christian]

Und bevor wir uns jetzt Daten und CSS zusammenraten, stellt Christian bitte einfach ein vollstaendiges, auf's Wesentliche reduziertes, valides Online-Beispiel bereit.

MfG ChrisB

No Problem, das CSS ist ziemlich genau das von der SELFHTML-Seite zum Formatieren von dynamischen Menüs.
Geändert ist nur, daß nicht die IDs sondern die Klassen formatiert werden, bzw. Vorgabebreiten.

ul.Navigation {
    width: 13em;
    margin: 0; padding: 0.8em;
    background-color: transparent;
  }
  * html ul.Navigation {  /* Korrekturen fuer IE 5.x */
    width: 14.6em;
    w\idth: 13em;
    padding-left: 0;
    padd\ing-left: 0.8em;
  }
  ul.Navigation li {
    list-style: none;
    margin: 0.0em; padding: 0;
    border: 1px solid black;
  }

ul.Navigation li ul {
    margin: 0 0 0 1em; padding: 0;
  }
  ul.Navigation li ul li {
    margin: 0.1em 0;
  }
  * html ul.Navigation li ul li {  /* Korrektur fuer IE 5.x */
    margin-left: 1em;
    ma\rgin-left: 0;
  }

ul.Navigation a {
    display:block;
    padding: 0.2em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul.Navigation a {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 12em;  /* Breitenangabe fuer IE 6 */
  }
  * html ul.Navigation li ul li a {
    width: 100%;    /* Breitenangabe fuer IE 5.x */
    w\idth: 12em;  /* Breitenangabe fuer IE 6 */
  }
  ul.Navigation a:hover {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: maroon; /*background-color: gray;*/
  }

Die Daten hab ich auf zwei Menüs (ein Haupt- und ein Untermenü) beschränkt.

var oMenu = new Array;

oMenu[0] = new Object();
oMenu[0].Id = "Main";
oMenu[0].Name = "Hauptmenü";
oMenu[0].bk_url = "url('../assets/images/style/btn1.gif')";
oMenu[0].sMenu = "home;Home;./html/body_index.html|dl;Dienstleistungen;$1|srv;Servicleistungen;./html/body_service.html|agb;AGBs;./html/body_agb.html|about;Über WeSoft;./html/body_about.html|kon;Kontakt;./html/body_kontakt.html";
oMenu[0].men_direction = "hor";
oMenu[0].nam_direction = "center";
oMenu[0].men_x = 10;
oMenu[0].men_y = 30;
oMenu[0].men_width = 150;
oMenu[0].men_height = 20;
oMenu[0].men_base = "top";
oMenu[0].font_Face = "arial";
oMenu[0].font_Weight = "bold";
oMenu[0].font_Size = 14;
oMenu[0].indent = 0;
oMenu[0].popup = false;

oMenu[1] = new Object();
oMenu[1].Id = "DLMenu";
oMenu[1].Name = "Dienstleistungen";
oMenu[1].bk_url = "url('../assets/images/style/btn1.gif')";
oMenu[1].sMenu = "kon;Kontakt;./html/body_kontakt.html|dl;Dienstleistungen;./html/body_dl.html";
oMenu[1].men_direction = "vertical";
oMenu[1].nam_direction = "left";
oMenu[1].men_x = 180;
oMenu[1].men_y = 0;
oMenu[1].men_width = 140;
oMenu[1].men_height = 14;
oMenu[1].men_base = "bottom";
oMenu[1].font_face = "arial";
oMenu[1].font_Weight = "bold";
oMenu[1].font_Size = 12;
oMenu[1].indent = 20;
oMenu[1].popup = true;

var men_posArt;
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion.substr(0,1)) < 7))
 men_posArt = "absolute";
else
 men_posArt = "fixed";

[Struppi]

Und bevor wir uns jetzt Daten und CSS zusammenraten, stellt Christian bitte einfach ein vollstaendiges, auf's Wesentliche reduziertes, valides Online-Beispiel bereit.

MfG ChrisB

No Problem,

da fehlt immer noch die Hälfte. So läßt sich dir einfach nicht weiterhelfen.

Struppi.

[Christian]

da fehlt immer noch die Hälfte. So läßt sich dir einfach nicht weiterhelfen.

Da fällt mir nur noch die Seite mit den zwei JS-Dateien und der CSS-Einbindung, bzw. dem Aufruf im Body-onload ein.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>

<TITLE>Untitled</TITLE>
<META NAME="GENERATOR" CONTENT="">
</HEAD>
<LINK REL=STYLESHEET TYPE="text/css" HREF="../menu/menu.css">
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript1.5" SRC="../menu/menu_def.js"></SCRIPT>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript1.5" SRC="../menu/menu.js"></SCRIPT>
<BODY id="BOD" onload="DrawMenu(oMenu[0],null,10,30);">

</BODY>
</HTML>

Sonst hab ich nix mehr an Source.
Wichtig ist, daß die Def-Datei (die mit dem Array) vor dem eigentlichen Code eingebunden wird.

Ach ja, die Definition der Dummy-Funktion:

function dummy() {}

gehört noch in die code-Datei hinein.

Christian

Christian

[ChrisB]

Hi,

Da fällt mir nur noch die Seite mit den zwei JS-Dateien und der CSS-Einbindung, bzw. dem Aufruf im Body-onload ein. [...]
Wichtig ist, daß die Def-Datei (die mit dem Array) vor dem eigentlichen Code eingebunden wird.

Ach ja, die Definition der Dummy-Funktion:

Und aus all diesen Stueckchen basteln wir uns jetzt per Copy&Paste was zusammen, um uns das ganze anschauen zu koennen.

(Falsch geraten. Ich fragte nicht umsonst nach einem Online-Beispiel. Wenn du Hilfe willst, dann mache es denen, die dir vielleicht helfen koennen, so einfach und nicht so schwer wie moeglich.)

MfG ChrisB

[Struppi]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Keine wunder, dass du keine Warnungen bekommst, deine Seite ist im Quirksmodus, das solltest du ändern.

Struppi.

[Matze]

Hallo!

agb;AGBs;./html/body_agb.html

"AGBs" gibt es nicht. Nur "AGB" wäre korrekt.
"AGB" ist schon der Plural -> Allgemeine Geschäftsbedingung_EN_
Allgemeine Geschäftsbedingungen_S_ ist falsch!
Nur wenn "AGB" die Kurzform des Singular -> Allgemeine Geschäftsbedingung wäre, wäre "AGBs" richtig.

Hat nur leider nichts mit deinem Problem zu tun.

Grüße, Matze

[Christian]

Hallo!

agb;AGBs;./html/body_agb.html

"AGBs" gibt es nicht. Nur "AGB" wäre korrekt.

Steht ja auch nicht online!
Wäre mit dem, was dahinter ist, lustig!

Christian

[Auge]

Hallo

Ich möchte ein dynamisches Menü aufbauen, wobei die einzelnen Menüs ULs und die Einträge LI-Elemente sind.

Wenn ein LI-Eintrag nun ein Untermenü hat, ist im LI eine weitere UL definiert.

Über die OnClick-Routine des LI-Elements wird dann die untergeordnete UL ein- und ausgeblendet.

Jetzt will ich aber die einzelnen Elemente nicht, wie oft gesehen per document.write zuerst zusammenbasteln und dann schreiben, ich will die Elemente direkt in den Elementbaum von DOM reinhängen.

Dir ist klar, dass bei beiden Methoden das Problem besteht, dass die Untermenüs ohne JavaScript nicht erreichbar sind? Wie wäre es alternativ damit, die Untermenüs ganz normal im HTML-Quelltext zu notieren und sie beim Laden der Seite, so JavaScript verfügbar ist, auszublenden?

Genau das quittiert der FF damit, dass, abhängig von der Art der Anzeige (block, inline, etc.), das Untermenü entweder unter dem bestehenden Listenelementen oder über diese drüber gezeichnet wird. Das heisst, die Elemente unter dem Untermenü werden beim Anzeigen nicht verschoben.

Du fügst sie an der Stelle in das DOM ein, an der sie auch als purer HTML-Schnipsel stünden (wie es sich gehört ;-))? Wenn ja, bleibt doch nur noch die Aufgabe, Position (was jetzt noch fraglich ist) und Aussehen per CSS zu definieren. Oder verstehe ich dich falsch oder gar garnicht?

Tschö, Auge

[Christian]

Dir ist klar, dass bei beiden Methoden das Problem besteht, dass die Untermenüs ohne JavaScript nicht erreichbar sind? Wie wäre es alternativ damit, die Untermenüs ganz normal im HTML-Quelltext zu notieren und sie beim Laden der Seite, so JavaScript verfügbar ist, auszublenden?

Ja, weiss ich. Aber da kommt noch eine Weiche mit einem einfachen Menü.
Die brauch' ich aber noch nicht, da es im Mozilla eh nicht geht.

Du fügst sie an der Stelle in das DOM ein, an der sie auch als purer HTML-Schnipsel stünden (wie es sich gehört ;-))? Wenn ja, bleibt doch nur noch die Aufgabe, Position (was jetzt noch fraglich ist) und Aussehen per CSS zu definieren. Oder verstehe ich dich falsch oder gar garnicht?

Ich hab den Code der Routine als Antwort auf Gast42 gepostet.
Eigentlich will ich keine 'HTML-Schnipsel', daher generiere ich ja die Objekte direkt über DOM (was das Problem im FF ja erzeugt, denn im IE, bzw als 'Schnipsel' im FF funktioniert eh alles).

Tschüss
Christian

[ChrisB]

Hi,

Wie wäre es alternativ damit, die Untermenüs ganz normal im HTML-Quelltext zu notieren und sie beim Laden der Seite, so JavaScript verfügbar ist, auszublenden?

Ja, weiss ich. Aber da kommt noch eine Weiche mit einem einfachen Menü.

Wozu willst du doppelten AUfwand betreiben?
Auch ein "normales" Menue zeichnest du sinnvoller Weise als verschachtelte Liste aus.
Und wenn diese eh schon vorhanden ist, dann kannst du anschliessend "unobstrusive" JavaScript-Events daran haengen, und die initiale Aublendung vornehmen.

Die brauch' ich aber noch nicht, da es im Mozilla eh nicht geht.

Andersherum zu Entwickeln, halte ich fuer sinnvoller.
Erst mal die HTML-Version, die ganz einfach "funktioniert" - und dann ggf. mit JavaScript "pimpen".

MfG ChrisB

[Christian]

Andersherum zu Entwickeln, halte ich fuer sinnvoller.
Erst mal die HTML-Version, die ganz einfach "funktioniert" - und dann ggf. mit JavaScript "pimpen".

MfG ChrisB

Ja, das ist schon richtig, es war nur wegen dem relativ einfachen Definieren und Einlesen der Daten, bzw. dem einfachen Portieren des Menüs auf andere Seiten.
Und da man fürs Ein- und Ausblenden sowieso JS braucht (onclick-Ereignis), hab ich mir gedacht, mach ichs gleich ganz in JS.

Trotzdem danke, wenn's für den FF keine Lösung gibt, muß ich die Sache eh kübeln.

[Matze]

Hallo!

Und da man fürs Ein- und Ausblenden sowieso JS braucht(..)

Nicht unbedingt. Mit CSS kannst du das ganze wesentlich einfacher lösen.
hover, display und position würden dir sicher gern helfen.

Grüße, Matze

[Auge]

Hallo

Du fügst sie an der Stelle in das DOM ein, an der sie auch als purer HTML-Schnipsel stünden (wie es sich gehört ;-))?

Eigentlich will ich keine 'HTML-Schnipsel', daher generiere ich ja die Objekte direkt über DOM

Damit wird aber (browserseitig) genau der HTML-Quelltext erzeugt, den du nicht willst. Und diesen zu positionieren, ist Aufgabe von CSS (das du gegebenenfalls auch per JavaScript erzeugen kannst). Dies nurmal zum Verständnis.

Tschö, Auge

[Struppi]

Genau das quittiert der FF damit, dass, abhängig von der Art der Anzeige (block, inline, etc.), das Untermenü entweder unter dem bestehenden Listenelementen oder über diese drüber gezeichnet wird. Das heisst, die Elemente unter dem Untermenü werden beim Anzeigen nicht verschoben.

Hast du mal in die Fehlerkonsole geschaut? Soweit ich das seh', solltest du da eine Menge Warnungen bekommen.

Struppi.

[Christian]

Hast du mal in die Fehlerkonsole geschaut? Soweit ich das seh', solltest du da eine Menge Warnungen bekommen.

Struppi.

In der Fehlerkonsole steht gar nix.
Dort werden nur die CSS-Fehler der Mozilla-Seite angezeigt, auf der ich vorher war

Tschüss
Christian

[Struppi]

In der Fehlerkonsole steht gar nix.
Dort werden nur die CSS-Fehler der Mozilla-Seite angezeigt, auf der ich vorher war

Auch nicht das du keine Einheiten verwendest?

Struppi.

[Christian]

In der Fehlerkonsole steht gar nix.
Dort werden nur die CSS-Fehler der Mozilla-Seite angezeigt, auf der ich vorher war

Auch nicht das du keine Einheiten verwendest?

Nö, war ein leeres Feld nachdem ich die alten Fehler rausgeschmissen hab und die Seite mit dem Menü noch ein- zweimal aufgerufen habe (inkl. Bedienung des Menüs).

[Struppi]

In der Fehlerkonsole steht gar nix.
Dort werden nur die CSS-Fehler der Mozilla-Seite angezeigt, auf der ich vorher war

Auch nicht das du keine Einheiten verwendest?

Nö, war ein leeres Feld nachdem ich die alten Fehler rausgeschmissen hab und die Seite mit dem Menü noch ein- zweimal aufgerufen habe (inkl. Bedienung des Menüs).

Ich rede nicht von Fehlern, ich rede von Warnungen, läßt du dir diese auch anzeigen?

Struppi.

[Christian]

Ich rede nicht von Fehlern, ich rede von Warnungen, läßt du dir diese auch anzeigen?

Struppi.

War immer auf 'alle' gestellt.
Hab's aber jetzt noch mal dezidiert mit 'Warnungen' probiert, kein 'Erfolg'.

Christian