Tolonath: IE streikt mal wieder

Servus,
hab gestern ein Grundloyaut gebastelt.
Ein div (orange) wird beim onclick über 90% der Fläche gestreckt.
Die anderen divs werden beim onclick wieder hervorgehoben.
Soweit funktioniert das in allen Browsern bis auf den IE.

Könnte mir ein JS-Profi nen Tip geben an was es liegt?

gruß
Tolonath

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title></title>  
<style type="text/css">  
<!--  
html, body {  
background-color: black;  
margin: 0;  
padding: 0;  
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */  
}  
.game {  
position:absolute; top:0%; right:60%; bottom:90%; left:0%;  
background-color: orange;   z-index:1;  
}  
.game:hover {  
background-color: white;  
}  
.links {  
position:absolute; top:10%; right:60%; bottom:30%; left:0%;  
background-color: red;  
}  
.mitte {  
position:absolute; top:0%; right:40%; bottom:30%; left:40%;  
background-color: blue;  
}  
.rechts {  
position:absolute; top:0%; right:0%; bottom:30%; left:60%;  
background-color: green;  
}  
.unten {  
position:absolute; top:70%; right:0%; bottom:0%; left:0%;  
background-color: yellow;  
}  
-->  
</style>  
  
  
<script language="JavaScript">  
<!--  
function vor (was) {  
    var ind=0;  
    var indo=0;  
  
       for (i=0; i<5;i++)  
       { indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));  
         if (ind <= indo) {  
          ind = indo;  
         }  
       }  
    ind=ind+1;  
    document.getElementsByName(was)[0].style.zIndex = ind;  
}  
  
  
function game () {  
    vor ("game");  
    document.getElementsByName("game")[0].style.width = "90%";  
    document.getElementsByName("game")[0].style.height = "90%";  
    document.getElementsByName("game")[0].style.right = "0%";  
    document.getElementsByName("game")[0].style.left = "0%";  
    document.getElementsByName("game")[0].style.bottom = "";  
    document.getElementsByName("game")[0].style.marginLeft = "auto";  
    document.getElementsByName("game")[0].style.marginRight = "auto";  
    document.getElementsByName("game")[0].style.top = "0%";  
    document.getElementsByName("links")[0].style.top = "0%";  
}  
//-->  
</script>  
</head>  
<body style="background-color:blue" bgcolor="red" >  
  
<div id="game" class="game" name="game" onclick='game()'>Game</div>  
<div id="links" class="links" name="links" onclick="vor('links')">links</div>  
<div id="mitte" class="mitte" name="mitte" onclick="vor()">mitte</div>  
<div id="rechts" class="rechts" name="rechts" onclick="vor('rechts')">rechts</div>  
<div id="unten" class="unten" name="unten" onclick="vor('unten')">unten</div>  
  
</body>  
</html>
  1. Soweit funktioniert das in allen Browsern bis auf den IE.

    http://forum.jswelt.de/javascript-faq/48897-finde-fehlerkonsole.html

    Struppi.

  2. Hi,

    Könnte mir ein JS-Profi nen Tip geben an was es liegt?

    { indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));

    Daran, dass der IE getPropertyValue nicht kennt ...?

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
  3. Hi,

    die Fehlerkonsole des IE sagt mir:
    Details zum Fehler auf der Webseite

    Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
    Zeile: 47
    Zeichen: 10
    Code: 0
    URI: file:///C:/projects$/foo.html

    Der IE kennt .getPropertyValue nicht und man muss stattdessen .currentStyle verwenden.

    ~dave

    1. Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
      Zeile: 47
      Zeichen: 10

      An dieser Stelle ist die Variable, muss die anders definiert werden?

      Der IE kennt .getPropertyValue nicht und man muss stattdessen .currentStyle verwenden.

      Bekomme die zusammenfügung nicht, wie wird es geordnet?
      document.meinElement.currentStyle.getExpression('zIndex');

      und thx für die Fehlerkonsole -:)
      Gruß
      Tolo

      1. Hi,

        Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
        Zeile: 47
        Zeichen: 10
        An dieser Stelle ist die Variable, muss die anders definiert werden?

        An dieser Stelle ist die Zuweisung eines Wertes zu der Variable.
        Und bei der Zuweisung tritt der Fehler auf, weil .getPropertyValue unbekannt ist.

        Der IE kennt .getPropertyValue nicht und man muss stattdessen .currentStyle verwenden.
        Bekomme die zusammenfügung nicht, wie wird es geordnet?
        document.meinElement.currentStyle.getExpression('zIndex');

        Ich habe noch nie damit gearbeitet, aber ich glaube nach dieser Lektüre das sollte einfach über .currentStyle.zIndex gehen?

        ~dave

        1. Das funktioniert ausschließlich im IE -:(
          http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/currentStyle2.htm

          Gibt es auch bei JS die Möglichkeit bestimmte Codes nur von IE lesen zu lassen so wie es bei CSS der Fall ist?

          1. Man kann in navigator.userAgent den Browser auslesen. Allerdings gibt es auch ältere Opera-Versionen, die sich als IE ausgeben und neuere IEs bekommen das, was Du machen willst, vielleicht auch hin, weswegen sich ganz klar eine Feature Detection anbietet.

            Allerdings stehen in Deinem Fall, wenn ich ihn richtig verstanden habe, die Werte ohnehin vorher fest, woraus sich die Frage ergibt, warum Du sie dann nochmal aus dem CSS lesen willst, obwohl Du sie selbst dort hineingeschrieben hast - speichere sie im JS zwischen!

            Gruß, LX

            --
            RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
            1. @@LX:

              nuqneH

              Man kann in navigator.userAgent den Browser auslesen.

              Vergiss das gleich wieder!

              Das kann sonstwas für Hausnummern liefern, aber nichts sicheres.

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. Den Wert brauch ich aber um den höchsten zu ermitteln.
                Oder gibt es da ne bessere Lösung für sowas? ö.ö

                Hab erstmal mit ne IF gelöst ... die Links waren doch nützlich.

                 var ind=0;  
                    var indo=0;  
                  
                       for (i=0; i<5;i++)  
                       {  
                         if (navigator.appName == "Microsoft Internet Explorer") {  
                           indo = eval(document.getElementsByTagName("div")[i].currentStyle.zIndex);  
                         } else {  
                           indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));  
                                }  
                  
                         if (ind <= indo) {  
                          ind = indo;  
                         }  
                       }  
                    ind=ind+1;  
                    document.getElementsByName(was)[0].style.zIndex = ind;  
                }
                
                1. So, und Feature detection würde jetzt bedeuten, statt

                  if (navigator.appName == "Microsoft Internet Explorer") {
                             indo = eval(document.getElementsByTagName("div")[i].currentStyle.zIndex);
                           } else {
                             indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));
                                  }

                  doch lieber

                  var node=document.getElementsByTagName('div')[i];
                  indo = (window.getComputedStyle ? window.getComputedStyle(node,'') : node.currentStyle).zIndex;

                  Zu verwenden, das ist in jedem Fall sicherer; außerdem solltest Du noch sichergehen, dass Du Number und nicht String vergleichst:

                  "20" > "100" // true
                  20 > 100 // false

                  Einfach den jeweiligen Wert durch Number(indo) in eine Zahl konvertieren.

                  Gruß, LX

                  --
                  RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
                  1. Jetzt bin ich bei den Beiträgen total durcheinander gekommen xD
                    also ...

                    var node=document.getElementsByTagName('div')[i];
                    indo = (window.getComputedStyle ? window.getComputedStyle(node,'') : node.currentStyle).zIndex;

                    if (foo.feature1)
                    var bar = foo.feature1.baz;
                    else if (foo.feature2)
                    var bar = foo.feature2(quz);
                    oder als Einzeiler
                    var bar = foo.feature1 ? foo.feature1.baz : (foo.feature2 ? foo.feature2(quz) : undefined);

                    und das ? und : bedeutet ...
                    if foo.feature1
                    then foo.feature1.baz
                    else foo.futute2(quz)

                    wobei die Anfrage if foo.future1 ein true oder false ausgibt
                    je nach nach dem ob der Browser diesen Befehl kennt oder nicht.
                    Jooo ich weiß ... sind Grundlagen, die ich noch nicht ganz beherrsche -:(
                    Viel schlimmer sind dabei die ganzen Befehle die es zu lernen gibt ... kennt ihr die alle Auswendig? ö.ö

                    gruß
                    Tolonath

                    1. Hallo, Tolonath:

                      Variable = Bedingung ? Ja : Nein

                      ist in JavaScript (und vielen anderen Sprachen) eine Abkürzung für

                      if (Bedingung)  
                          Variable = Ja  
                      else  
                          Variable = Nein;
                      

                      Jooo ich weiß ... sind Grundlagen, die ich noch nicht ganz beherrsche -:(

                      Immerhin versuchst Du nicht, Deine Kenntnisse auf der Basis von nicht vorhandenem Wissen aufzubauen - damit hast Du einen großen Vorteil gegenüber den Leuten, die das tun und über die wir uns hier auf dem Forum regelmäßig aufregen.

                      Viel schlimmer sind dabei die ganzen Befehle die es zu lernen gibt ... kennt ihr die alle Auswendig? ö.ö

                      Nein, nur die wichtigsten Dinge weiß ich auswendig. Bei allen anderen habe ich aber bereits entsprechende Codestellen geschrieben, so dass ich weiß, wo ich im Zweifel nachsehen muss.

                      Das alles ist ein langjähriger Lernprozess und dank des Umstands, dass immer neue Standards und Browserversionen veröffentlicht werden, bleibt unser Beruf schön spannend :-)

                      Gruß, LX

                      --
                      RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
                      1. Moin moin,
                        zumindest hab ich endlich das lesen eines JS-Skripts begriffen.
                        Dennoch verstehe ich eine Sache mit den Variablen noch nicht ganz.

                        var a = "global";
                        b= "global";
                        var c = "lokal";

                        Wird global in der "ersten Ebene" definiert muss immer ein "var" ?
                        (erste Ebene mein ich wie das var a = "global"; also in keiner Funktion)

                        Dürfen locale Variablen in unterschiedlichen Funktionen den selben Namen haben?
                        Angenommen 3 Funktionen und in jeder haben wir eine var c = "lokal";
                        Oder werden sich diese auf irgend einer Weise "beißen"?

                        <script type="text/javascript">  
                          
                              var a = "global";  
                          
                              function ausgabe_1() {  
                                b= "global";  
                                var c = "lokal";  
                                document.write("ausgabe_1<br> A: " + a + "; B: " + b + "; C: " + c + "<br><br>");  
                                ausgabe_2();  
                              }  
                          
                              function ausgabe_2() {  
                                document.write("ausgabe_2<br> A: " + a);  
                                document.write(" B: " + b);  
                                document.write(" C: " + c); // Fehlermeldung!  
                              }  
                            </script>  
                          </head>  
                          <body>  
                            <script type="text/javascript">  
                              //Funktionsaufrufe  
                              ausgabe_1();  
                              ausgabe_2();  
                              document.write(" B: " + b);  
                              document.write(" C: " + c); // Fehlermeldung!  
                            </script>    
                        

                        Und nebenbei, irgendwie bin ich auf einen Artikel hier gestoßen
                        und komme mit dem geschriebenem nicht ganz klar,
                        zumindest ist es irgendwie konfus der SELFHTML Ideologie.
                        Oder bin ich hier doch im falschem Film? ö.ö

                        http://aktuell.de.selfhtml.org/artikel/humor/suchmaschinen/index.htm#

                        Gruß
                        Tolonath

                        1. Hi, Tolonath!

                          Die "Sache mit den Variablen" nennt sich übrigens "Scope" und beschreibt, was der Javascript-Interpreter macht, wenn ihm ein Variablennamen unterkommt:

                          Am Anfang des Scripts befindet sich der Interpreter im globalen Scope (bezogen auf window), daher hat var keine Auswirkungen:

                          var test='global';
                          test2='global';

                          Eine Funktion (auch wenn sie anonym bleiben will) hat ihren eigenen Scope:

                          (function(){
                              // test == 'global'
                              test='global überschrieben';
                              // test == 'global überschrieben'
                              var test='lokal';
                              // test == 'lokal'
                          })();
                          // test = 'global überschrieben'

                          Der JavaScript-Interpreter sucht immer zuerst im lokalen und dann im globalen Scope. Deswegen ist in Deinem Beispiel c auch nicht innerhalb der Funktion, in der ein Fehler auftritt, definiert.

                          Sobald Du Scopes begriffen hast, empfehle ich einen Blick auf die Objektorientierung in Javascript, insbesondere das Konzept von "this" (das gegenwärtige Objekt), "new" (erstelle ein neues Abbild des Prototyp-Objekts) und "prototype" (definiere prototypische Eigenschaften, die dynamisch vererbt werden, also auch nachdem zig Objekte mit "new" erschaffen wurden, mit einem Schritt geändert werden können).

                          (...) Oder bin ich hier doch im falschem Film? ö.ö

                          http://aktuell.de.selfhtml.org/artikel/humor/suchmaschinen/index.htm#

                          Ganz unten auf der Seite steht doch extra: SelfHTML > Artikel > Humor...

                          Gruß, LX

                          --
                          RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
              2. Hallo, Gunnar!

                Hast Du den Rest meines Postings eigentlich gelesen oder direkt allergisch auf "navigator.userAgent" reagiert?

                Gruß, LX

                --
                RFC 2324, Satz 7 (Sicherheit): Jeder, der zwischen meinem Kaffee und mir steht, gilt als unsicher.
                1. @@LX:

                  nuqneH

                  Hast Du den Rest meines Postings eigentlich gelesen […]?

                  Ja.

                  Qapla'

                  --
                  Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                  (Mark Twain)
          2. @@Tolonath:

            nuqneH

            Das funktioniert ausschließlich im IE -:(

            Dann benutze es ausschließlich im IE^W^W in den Browsern, in denen es funktioniert. Für die anderen hast du ja die andere Variante.

            Gibt es auch bei JS die Möglichkeit bestimmte Codes nur von IE lesen zu lassen so wie es bei CSS der Fall ist?

            Ja: conditional compilation.

            Das ist aber meist nicht das, was man will. Nicht den Browser abfragen, sondern dessen Möglichkeiten (feature detection):

            if (foo.feature1)  
              var bar = foo.feature1.baz;  
            else if (foo.feature2)  
              var bar = foo.feature2(quz);
            

            oder als Einzeiler

            var bar = foo.feature1 ? foo.feature1.baz : (foo.feature2 ? foo.feature2(quz) : undefined);

            Wobei LX mit seinem Allerdings sicher recht hat.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
  4. Hallo,

    Könnte mir ein JS-Profi nen Tip geben an was es liegt?

    das hast du ja nun schon. Trotzdem:

    <style type="text/css">
    <!--

    Das Auskommentieren von style-Abschnitten ist Unfug. Browser, die das style-Element nicht kennen, dürften nur nur in theoretischer Archäologie existieren.

    .game {
    position:absolute; top:0%; right:60%; bottom:90%; left:0%;
    background-color: orange;   z-index:1;
    }

    Welche IEs möchtest du noch unterstützen? IE6 wohl nicht, denn der ist zu doof, die Breite eines Elements anhand seiner left/right-Koordinaten zu bestimmen (oder die Höhe anhand top und bottom).

    Außerdem: Willst du wirklich so eine Orgie absoluter Positionierung veranstalten? Das kann nicht gesund sein.

    <script language="JavaScript">

    Fehler: Das erforderliche type-Attribut fehlt. Das language-Attribut ist dagegen für die Tonne.

    <!--

    Für das Auskommentieren von Script-Code mit HTML-Kommentaren gilt dasselbe, was ich oben schon über Kommentare im style-Block gesagt habe.

    { indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));

    Was zum Geier hat das eval() hier für einen Sinn? Weg damit!

    document.getElementsByName("game")[0].style.width = "90%";
        document.getElementsByName("game")[0].style.height = "90%";
        document.getElementsByName("game")[0].style.right = "0%";
        document.getElementsByName("game")[0].style.left = "0%";
        document.getElementsByName("game")[0].style.bottom = "";
        document.getElementsByName("game")[0].style.marginLeft = "auto";
        document.getElementsByName("game")[0].style.marginRight = "auto";
        document.getElementsByName("game")[0].style.top = "0%";
        document.getElementsByName("links")[0].style.top = "0%";

    Du willst nicht ernsthaft achtmal das komplette DOM nach demselben Element durchsuchen?
    Bestimme *einmal* eine Referenz auf das gesuchte Element und verwende die dann.
    Außerdem sind die gesuchten Elemente divs, die sowieso kein name-Attribut haben dürfen (siehe unten). Aber dafür haben sie alle eine ID. Warum suchst du nicht danach?

    <body style="background-color:blue" bgcolor="red" >

    Och wie süß! Soll der Hintergrund nun blau, rot, violett, gestreift oder was auch immer sein? ;-)

    <div id="game" class="game" name="game" onclick='game()'>Game</div>
    <div id="links" class="links" name="links" onclick="vor('links')">links</div>
    <div id="mitte" class="mitte" name="mitte" onclick="vor()">mitte</div>
    <div id="rechts" class="rechts" name="rechts" onclick="vor('rechts')">rechts</div>
    <div id="unten" class="unten" name="unten" onclick="vor('unten')">unten</div>

    Diesen Elementen außer einer ID auch noch eine jeweils gleichnamige Klasse zu verpassen, sieht *sehr* unüberlegt aus. Und div hat kein name-Attribut. Wozu auch? AFAIK ist der IE in diesem Punkt der konsequenteste Browser; er ignoriert das name-Attribut hier tatsächlich. Die anderen (Opera, Firefox) tun einfach mal so, als wäre das erlaubt.

    So long,
     Martin

    --
    Ich wollt', ich wär ein Teppich.
    Dann könnte ich morgens liegenbleiben.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(