Andreas: Warum funktioniert folgends Script nicht?

Hallo!
Ich habe mal ein wenig mit 'getElementByID' rumexperimentiert, ist ja ganz nett, nur wie kann ich per Javascript die Position verändern? Das folgende ist mein letzter Versuch, es geht letztendlich nicht darum, die Position absolut zu bestimmen, sondern relativ zu einem anderen Objekt, aber erstmal muß dazu folgendes funktionieren, nur wie? Ich denke, das 'posLeft' und 'posTop' falsch sind, aber was soll ich da nehmen, was auch die Mozillas und IE 5-6 verstehen?

with (document.getElementByID("Menue").style) {
      posLeft = 20;
      posTop = 20;
      visibility = 'visible';

2. Frage: So prüfe ich, ob es ein alter IE ist:

var ie = document.all ? true : false;

Wie könnte ich prüfen, ob es es ein Browser ist, der DOM versteht?
Ich werde das dann zuerst prüfen, danach die Netscape und alte IE Prüfung mit else if, da sollte dann auch nichts doppeltes passieren.

Viele Grüße
Andreas

  1. Hi,

    with (document.getElementByID("Menue").style) {

    alert(posLeft);
             alert(document.getElementByID("Menue").style);
             alert(document.getElementByID("Menue").style.posLeft);

    Und denk dran, dass JavaScript case-sensitive ist. Lass Dir auch

    alert(document.getElementByID("Menue"));
    und
    alert(document.getElementByID);

    anzeigen.

    1. Frage: So prüfe ich, ob es ein alter IE ist:
      var ie = document.all ? true : false;

    Damit prüfst Du auch, ob es ein neuer IE ist, oder ein Opera, oder irgendwas, das document.all kennt.

    Wie könnte ich prüfen, ob es es ein Browser ist, der DOM versteht?

    if (document.getElementById)

    Cheatah

    1. Hallo!

      with (document.getElementByID("Menue").style) {

      "Das Element unterschtützt diese Methode nicht"!?!?!

      Und denk dran, dass JavaScript case-sensitive ist. Lass Dir auch

      Was bedeutet das?

      1. Frage: So prüfe ich, ob es ein alter IE ist:
        var ie = document.all ? true : false;

      Damit prüfst Du auch, ob es ein neuer IE ist, oder ein Opera, oder irgendwas, das document.all kennt.

      Opera 6 kann doch auch 'getElementByID', dann würde ich damit ja nur noch Ebenen für IE 4 einblenden, wenn ich das nach

      if (document.getElementById)

      mit else if  prüfe, oder?

      Aber das obige habe ich einfach mal ohne with probiert:

      function show() {

      if(document.getElementById){

      document.getElementById("Menue").style.visibility = "visible";
           document.getElementById("Menue").style.posLeft = 50;
           document.getElementById("Menue").style.posTop = 50;
         }
      }

      Das klappt so super. Aber wie kann ich die Position relativ zu einem Bild zuweisen?

      Dazu müßte ich die Position von einem Bild ermitteln, dem Bild habe ich mit name="bild" einen Namen zugewiesen, ich habe das wie folgt probiert:

      var pos_left = document.getElementByName("bild").style.posLeft;
      var pos_top = document.getElementByName("bild").style.posLeft;

      Aber das scheint nicht zu gehen.

      Wie kann ich DOM-kompatibel die Position eines Objektes ermitteln??? Denn wenn ich die Position habe, kann ich die ja für mein Element "Menue" verwenden!

      Viele Grüße
      Andreas

      1. Hi,

        with (document.getElementByID("Menue").style) {
        "Das Element unterschtützt diese Methode nicht"!?!?!

        "ID" muß "Id" geschrieben werden. Eben das ist case-sensitive. Also die Unterscheidung zwischen GROSS- und kleinschreibung.

        getElementByID()
        getElementById() sind zwei unterschiedliche Funktionen...

        Opera 6 kann doch auch 'getElementByID', dann würde ich damit ja nur noch Ebenen für IE 4 einblenden, wenn ich das nach

        Das ändert ja nichts an der Tatsache, daß er auch (bei bestimmten Einstellungen) document.all kennt und mehr oder weniger kann.

        Ich hoffe, ich hab Dir ein wenig weitergeholfen...

        Alex :)

        1. Hi Alex!

          Vielen Dank!

          Aber kannst Du mir auch sagen, warum folgende Funktion im Alert-Fenster "0" ausgibt?

          function show() {
                alert(document.getElementById("bild").style.posLeft);
             }

          Im Body habe ich stehen:

          <img src="01.jpg" width="30" height="30" Id="bild">

          Wie komme ich an die tatsächliche Position des Bildes?

          Viele Grüße
          Andreas

          1. Moin!

            Aber kannst Du mir auch sagen, warum folgende Funktion im Alert-Fenster "0" ausgibt?

            function show() {
                  alert(document.getElementById("bild").style.posLeft);
               }

            Zunächst einmal: Die CSS-Eigenschaft zum Positionieren von links gerechten heißt "left", nicht "posLeft". Folglich solltest du ....style.left verändern und abfragen, nicht ....style.posLeft.

            Zweitens: Eigentlich alle derzeitigen Browser sind mit den Angaben der Position etwas zurückhaltend. Sofern du per Javascript noch keinen Wert zugewiesen hast, kriegst du eigentlich niemals vorher den Wert, der durch das CSS definiert wird.

            Also: Wertabfrage funktioniert i.d.R. erst, nachdem du vorher einmal einen Wert zugewiesen hast.

            Wichtig in diesem Zusammenhang: Du solltest nicht nur einfach eine Zahl zuweisen, sondern eine gültige CSS-Angabe: "15px" statt "15".

            - Sven Rautenberg

            1. Hi Sven!

              Na das ist je blöd! Also kann ich definitiv nicht mehr in einem Netscape >= 6 eine Ebene genau unter einem Bild, welches einfach in einer Tabelle steht anzeigen, oder? Aber selbst in der 4er Version hat das ja geklappt! Und der IE hat da auch keine Probleme. Nur mit dem getElementById scheint das nicht zu funktionieren. Oder gibt es da vielleicht einen anderen Weg? Aufgrund des Designs der Seite DARF es nicht passieren, das das Bild, woran ich die Ebene ausrichten will, nur ein Stück falsch ausgerichtet wird. Daher habe ich Tabellen zum Positionieren gewählt. Nach einiger Arbeit wird das jetzt in allen Browsern(die ich getestet habe) perfekt angezeigt. Nur wenn ich eine Ebene absolut positioniere, bezieht sich das auf eine bestimmte Auflösung, in einer anderen wird die Ebene dann genausoviele Pixel von links angezeigt, was leider falsch ist, da die Tabelle mit 800 Pixel Breite in der Mitte positioniert ist. Oder kannman irgendwie von der Mitte aus positionieren? Von 800 Pixel Auflösung an wird die Grafik immer an derselben Stelle von der Mitte aus angezeigt, kann man das vielleicht irgendwie verwenden?

              Viele Grüße
              Andreas

              1. Hallo nochmal.

                Ich habe in SELFHTML nochmal nachgelesen, und da steht zu position:absolute  = absolute Positionierung, gemessen am Rand des Elternelements.

                Was genau ist das Elternelement? Könnte man evtl ein anderes Elternelement zuweisen(link/Tabelle/Zelle/Grafik...)?
                Wenn ja wie, und in welchen Browsern funktioniert das dann noch?

                Nur nochmal allgemein: Ich könnte zwar auch alles mit CSS machen, das kpl. Layout, nur dann wird ei Seite miot bestimmten Browsern nicht mehr richtig benutzbar, bzw. sieht grausam aus. Daher die Tabellen. Ich möchte lediglich eine Ebene mit Links anzeigen können, halt so ein Auswahl Menü, ähnlich dem von M$. Nur das kann ja nur der IE verstehen. Das wäre auch nicht das Problem, nur möchte ich gerne mit Blick auf die Zukunft, das auch der Mozilla meine Ebene an der richtigen Stelle einblendet. Was nicht in meinen Kopf geht, ist das der NN 4 das kann, der NN 7 aber nicht!
                Oder muß ich doch zu so einer Variante - Auflösung auslesen und dann halt umrechnen? Nur wenn jemand das Fenster nicht ganz geöffnet hat, wird es falsch angezeigt! Also auch keine echte Alternative!
                Das mit "mittig" Positionieren kann ich mir glaube ich abschminken. Würde zwar meine Probleme weitgehend lösen, aber ich finde nirgendwo eine derartige Möglichkeit.

                Gibt es denn gar keine Möglichkeit, die Position irgendeines Objektes, welchem man keine CSS-Position zugewiesen hat, zu ermitteln?

                Viele Grüße
                Andreas

                1. Hallo nochmal.

                  Ich habe in SELFHTML nochmal nachgelesen, und da steht zu position:absolute  = absolute Positionierung, gemessen am Rand des Elternelements.

                  Was genau ist das Elternelement? Könnte man evtl ein anderes Elternelement zuweisen(link/Tabelle/Zelle/Grafik...)?
                  Wenn ja wie, und in welchen Browsern funktioniert das dann noch?

                  Das Elternelement ist die nächsthöhere, positionierte Ebene. Die oberste Ebene ist <body>, welches einen nennenswerten Teil des Browserfensters einnehmen dürfte (merke: Nicht 100% der Höhe, sondern nur soviel, wie zum Anzeigen des Inhalts nötig ist).

                  Daraus folgert man doch mal ganz schlicht: Du kannst Ebenen <div> ineinander verschachteln. Die äußerste Ebene richtest du gemäß deinen Wünschen zentriert oder wasweißich aus, und positionierst sie relativ ohne Verschiebung (left: 0px; top:0px;). Dadurch wird sie zu einem Elternelement für die inneren, positionierten Ebenen.

                  Und diese Ebenen positionierst du dann passend. Denk' nur an den NS4, der dann doppelte document.layers haben will, für den äußersten Layer eben auch einen.

                  http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm
                  http://selfhtml.teamone.de/css/eigenschaften/anzeige/position.htm

                  - Sven Rautenberg

                  1. Hallo!
                    Sven - das war ein guter Plan! Vielen Dank!!!
                    Jetzt geht es schonmal, bis auf einen kleinen Schönheitsfehler. Ich habe das jetzt so gemacht:

                    Eine Tabelle in die Mitte der Seite(die ist sowieso da), dann in ein bestimmtes Feld eine Ebene, und in die Ebene eine weitere, die ich dann relativ zur ersten positioniere - das geht super!

                    Der Schönheitsfehler: Wenn ich die relative Position der 2. Ebene auf 0:0 setzte, zeigt Netscape 7 die Ebene immer an der unteren linken Ecke der Zelle an, IE an der oberen linken Ecke der Zelle.

                    <td>
                          <div id="Layer1" style="position:absolute; width:1px; height:1px; z-index:2">
                            <div id="menue" style="position:absolute; width:200px; height:115px; z-index:3; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000; visibility: hidden"></div>
                          </div>
                        </td>

                    Zur Veranschaulichung habe ich das mal hochgeladen: http://www.knet-systems.de/test/ebenen.htm
                    Einmal mit IE 5/6 und einmal mit NN 6/7 angucken ( wenn möglich poste mal jemand, ob das im IE 5 auch geht, denn ich habe nur noch IE 6 zum testen!)
                    Vielen Dank!

                    Weiß jemand wie die beiden sich da einig werden könnten?

                    Viele Grüße
                    Andreas

                    PS: Netscape 4.x User müssen darauf leider verzichten, da mir für diesen Browser keine vernünftige Methode bekannt ist, diese Ebene bei onmouseout oder over verschwinden zu lassen, ist nur mit einem Link möglich, aber das soll "unsichtbar" durch eine etwas größere Ebene dahinter gehen, oder vergleichbares! Oder hat jemand ne andere Idee?