DOM (Firefox): Elemente dynamisch einbinden/ändern

[enrico]

Hallo,

nachdem ich es gestern, mit freundlicher Unterstützung von Christian S. und eddi, geschafft
habe, die Scrollhöhe/Scrollweite per Javascript beim Firefox auszulesen, will ich nun die
Einbindung der Scrollgrafiken dynamisch gestalten.

Der Aufbau des Frames "Scrolling" ist wie folgt:

+--------------+
   | Seitenanfang |
   +--------------+

+--------------+
   | Hochscrollen |
   +--------------+

+----------------------+
   | Schnell hochscrollen |
   +----------------------+

+------------------------+
   | Schnell runterscrollen |
   +------------------------+

+----------------+
   | Runterscrollen |
   +----------------+

+------------+
   | Seitenende |
   +------------+

Diese Schaltflächen steuern den Frame "Anzeige".

Nun möchte ich die Schaltflächen über das Document Object Model (DOM) dynamisch einbinden, so
dass beispielsweise die Links "Seitenanfang", "Hochscrollen" und "Schnell hochscrollen" nur als
reine Grafiken, also ohne Definierung als Links, dargestellt werden, wenn die Seite zum ersten
Mal aufgerufen wird, also noch kein Scrolling stattgefunden hat, oder ich zum Anfang der Seite
gescrollt habe:

var Seitenlaenge = parent.Anzeige.document.body.offsetHeight;
   var Anzeigebereich = parent.Anzeige.document.body.clientHeight;
   var Scrollposition = parent.Anzeige.document.body.scrollTop;

var DIV_Seitenanfang = window.document.getElementById ("DIV_Seitenanfang");
   var DIV_Hochscrollen = window.document.getElementById ("DIV_Hochscrollen");
   var DIV_Hochscrollen_schnell = window.document.getElementById ("DIV_Hochscrollen_schnell");
   var DIV_Runterscrollen_schnell = window.document.getElementById ("DIV_Runterscrollen_schnell");
   var DIV_Runterscrollen = window.document.getElementById ("DIV_Runterscrollen");
   var DIV_Seitenende = window.document.getElementById ("DIV_Seitenende");

if (Scrollposition == 0)
   {
      DIV_Seitenanfang.className = "Seitenanfang_inaktiv";
      DIV_Hochscrollen.className = "Hochscrollen_inaktiv";
      DIV_Hochscrollen_schnell.className = "Hochscrollen_schnell_inaktiv";

if (Seitenlaenge != 0)
      {
         DIV_Runterscrollen_schnell.className = "Runterscrollen_schnell";
         DIV_Runterscrollen.className = "Runterscrollen";
         DIV_Seitenende.className = "Seitenende";

var A_Runterscrollen_schnell = window.document.createElement ("a");
             A_Runterscrollen_schnell.setAttribute ("href","javascript:void (0);");
             A_Runterscrollen_schnell.setAttribute ("onMouseover", "Runterscrollen_starten (10);");
             A_Runterscrollen_schnell.setAttribute ("onMouseout","Scrollen_stoppen ();");
             A_Runterscrollen_schnell.setAttribute ("onClick", "this.bur();");

var A_Runterscrollen = window.document.createElement ("a");
             A_Runterscrollen.setAttribute ("href","javascript:void (0);");
             A_Runterscrollen.setAttribute ("onMouseover", "Runterscrollen_starten (1);");
             A_Runterscrollen.setAttribute ("onMouseout","Scrollen_stoppen ();");
             A_Runterscrollen.setAttribute ("onClick", "this.bur();");

var A_Seitenende = window.document.createElement ("a");
             A_Seitenende.setAttribute ("href","javascript:void (0);");
             A_Seitenende.setAttribute ("onClick", "Seitenende();this.blur();");

DIV_Runterscrollen_schnell.appendChild (A_Runterscrollen_schnell);
         DIV_Runterscrollen.appendChild (A_Runterscrollen);
         DIV_Seitenende.appendChild (A_Seitenende);

DIV_A = window.document.createElement ("div");

A_Runterscrollen_schnell.appendChild (DIV_A);
         A_Runterscrollen.appendChild (DIV_A);
         A_Seitenende.appendChild (DIV_A);
      }
      else
      {
         DIV_Seitenende.className = "Seitenende_inaktiv";
         DIV_Runterscrollen.className = "Runterscrollen_inaktiv";
         DIV_Runterscrollen_schnell.className = "Runterscrollen_schnell_inaktiv";
      }
   }

Die Anzeige der inaktiven Grafiken bzw. der Grafiken mit den jeweiligen css-Klassen funktioniert.

Was noch nicht klappt, ist die Einbindung des Tags "a" und des darin enthaltenen leeren Div's, damit
der MouseOver-/MouseOut-Effekt auch "greift".

Letztendlich soll folgender Aufbau erzeugt werden (Beispiel):

<div id="Seitenanfang" class="Seitenanfang_inaktiv">
      <a href="../PHP/Anzeige.php#Seitenanfang" target="Anzeige" onClick="Seitenanfang();this.blur();">
         <div></div>
      </a>
   </div>

<div id="Hochscrollen" class="Hochscrollen_inaktiv">
      <a href="javascript:void(0)" onMouseover="Hochscrollen_starten (-1);" onMouseout="Scrollen_stoppen ();">
         <div></div>
      </a>
   </div>

Die Fehler-Konsole von Firefox gibt mir keine Warnungen oder Fehlermeldungen aus, so der Fehler (?) vermutlich
an anderer Stelle liegt.

Leider komme ich aber nicht dahinter, _wo_ ich etwas falsch gemacht haben oder etwas vergessen haben sollte.

Ich hoffe, Ihr könnt mir weiterhelfen.

Schon mal vielen lieben Dank im Voraus.

Gruß
enrico

[Felix Riesterer]

Lieber enrico,

nachdem ich es gestern, mit freundlicher Unterstützung von Christian S.
und eddi, geschafft habe, die Scrollhöhe/Scrollweite per Javascript beim
Firefox auszulesen

warum bleibst Du dann nicht in dem Thread, von dem Du gerade sprichst?

will ich nun die Einbindung der Scrollgrafiken dynamisch gestalten.

Der Aufbau des Frames "Scrolling" ist wie folgt:

Gehe ich recht in der Annahme, dass Du UI-Elemente nachbilden möchtest, die der Browser an sich bereits zur Verfügung stellt?

Diese Schaltflächen steuern den Frame "Anzeige".

Warum benutzt Du Frames? Ist Deine Seite nicht ohne Frames sinnvoller realisierbar? Und wenn Du schon Frames einsetzt, wozu dann diese Scroll-Schaltflächen, wenn doch Browser solche Funktionalitäten selbst bereitstellen - gerade bei Frames (wenn man das nicht unterdrückt)!

dass beispielsweise die Links "Seitenanfang", "Hochscrollen" und "Schnell
hochscrollen" nur als reine Grafiken, also ohne Definierung als Links,
dargestellt werden, wenn die Seite zum ersten Mal aufgerufen wird, also
noch kein Scrolling stattgefunden hat, oder ich zum Anfang der Seite
gescrollt habe:

Ich bin der Meinung, dass eine Umsetzung Deines Seitenkonzepts keine wirklich gute Idee ist, da man anscheinend ohne JavaScript diese Seite nicht mehr vernünftig handhaben können wird. Was spricht denn dagegen, Deine Seite komplett ohne Frames aufzubauen und die Handhabung mit den üblichen UI-Elementen der Browser und deren gewohnten Verfügbarkeit und Benutzungsweise dem User anzubieten?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[enrico]

Hallo Felix,

warum bleibst Du dann nicht in dem...

Hier hat sich ein neues Thema für mich ergeben, das mit dem ursprünglichen
Problem so nichts mehr zu tun hat.

Deswegen habe ich ein neues Posting erstellt.

dass Du UI-Elemente nachbilden möchtest

Die Navigation habe ich per css und der Klassifizierung (?) "hover" erstellt,
ist es das, was Du meinst ?

Warum benutzt Du Frames?

Ich habe meine Seite deswegen in Frames unterteilt, da ich zuvor etliche
unterschiedliche PHP-Dateien hatte, die, je nach Bedarf, in einen oder
mehrere Frames geladen wurden und ich so, dies war zumindest mein Denkansatz,
einiges an Performance gewinnen würde, weil ich nicht immer alles laden musste.

Nun schwenke ich mehr und mehr auf Javascript über, da ich hier noch schneller
"reagieren" kann, die Frames habe ich der Einfachheit so belassen.

wozu dann diese Scroll-Schaltflächen

Ich stand vor dem Problem, dass ich bei meinem Anzeigeframe, je nach Länge
der Seite, Scrollbalken hatte oder eben nicht, wenn sie entsprechend "kurz"
war.

Hatte ich Scrollbalken, so wäre es, ebenfalls wieder meiner Meinung nach,
schwieriger gewesen, den Scrollbalken entsprechend zu formatieren, die Abstände
des Scrollbalkens zum rechten Rand der Seite, den Abstand des Inhaltes der Seite
zum Scrollbalken dynamisch einzurichten, als wenn ich die Navigation einfach
in einen eigenen Frame auslagere und das browser-eigene Scrolling unterbinde.

deren gewohnten Verfügbarkeit und Benutzungsweise dem User anzubieten?

Die Seite wird nur lokal auf meinem Rechner laufen, somit brauche ich hier
auf niemanden Rücksicht nehmen (klingt blöd, ist aber so ;-)

Gruß
enrico

[Christian S.]

Hi,

ein paar Anmerkungen zum Code Stil:

A_Runterscrollen_schnell.setAttribute ("onMouseover", "Runterscrollen_starten (10);");

Attribute wie "onmouseover" werden in XHTML kleingeschrieben. In HTML 4.0 ist es egal, aber tendeziell sollte man eher nach vorne schauen (also XHTML konform schreiben.

Auch würde ich EventHandler lieber auch als solche an das Element binden, anstatt über Attribute und Strings zu gehen. Aber es geht natürlich auch so.

Was noch nicht klappt, ist die Einbindung des Tags "a" und des darin enthaltenen leeren Div's, damit
der MouseOver-/MouseOut-Effekt auch "greift".

Ein A Element darf KEINE Block Elemente wie DIV enthalten! Evtl. ist das schon der Fehler? Wofür brauchst du das leere div? Was hat das mit dem mouseover zu tun?

Letztendlich soll folgender Aufbau erzeugt werden (Beispiel):

<div id="Seitenanfang" class="Seitenanfang_inaktiv">
      <a href="../PHP/Anzeige.php#Seitenanfang" target="Anzeige" onClick="Seitenanfang();this.blur();">
         <div></div>
      </a>
   </div>

DIV im A = nicht erlaubt, s.o.

Gruß!