martin_____: offsetHeight im Firefox = Problem

SELF-Forum

offsetHeight im Firefox = Problem

martin_____
– Informationen zu den Bewertungsregeln

Hallo:

Ich bin gerade dabei eine Bildervorschau in JS in meine Seite zu schreiben.
Dabei lasse ich die .src des Bildes per Script ändern und möchte dieses danach dynmisch je nach der Größe des jeweiligen Bildes ausrichten. dazu nutze ich folgenden Code:

#gal {
position:absolute;
height:100%;
width:100%;
z-index:10;
background-image:url('trans.png');
text-align:center;
visibility:hidden;
}
#galct {
position:absolute;
top:50%;
margin:0px;
}
#galnav {
visibility: hidden;
}

--></style>

<script>
function pos(bild2) {
document.getElementById("galct").style.margin = "-" + bild2.offsetHeight/2 + "px 0px 0px " + "-" + bild2.offsetWidth/2 + "px";
alert("-" + bild2.offsetHeight/2 + "px 0px 0px " + "-" + bild2.offsetWidth/2 + "px");
}
function showgal(file,count,type) {
document.getElementById("gal").style.visibility = "visible";
document.getElementById("galimg").src =bild = "content/img/" + file + "." + type;
bild = document.getElementById("galimg")
pos(bild);
}

</script>

</head>
<body>
<!--- GALERY -->
<div id="gal">
<div id="galct">
<img src="blank.gif" id="galimg" alt="" border="0"><br>
<div id="galnav">Navigation</div>
</div>
</div>
<!-- --->

Im IE funktioniert alles, nur der Firefox muckt: Er bindet das bild ein, nutzt dann zum Ausrichten aber die Breite und Höhe (offsetHeight bzw. offsetWidth) der "blank.gif" und nicht die des neuen Bildes.

Wisst Ihr Rat?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. offsetHeight im Firefox = Problem

    plan_B
    – Informationen zu den Bewertungsregeln

    Hallo,

      

> document.getElementById("galimg").src =bild = "content/img/" + file + "." + type;  
> bild = document.getElementById("galimg")  
> pos(bild);

    hier tust du so, als ob das neue Bild gleich zur Verfügung stünde und du die Werte auslesen könntest. Die Werte hast du aber erst, wenn das Bild geladen ist. ( zufällig scheint es bei dir im IE gleich im Cache zur Verfügung zu stehen)

    ein onload-Eventhandler wäre nützlich ...

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. offsetHeight im Firefox = Problem

    martin_____
    – Informationen zu den Bewertungsregeln

    Das macht Sinn. Doch wie müsste das ausssehen?
    mit einem

    function pos(bild2) {
    document.getElementById("galct").style.margin = "-" + bild2.offsetHeight/2 + "px 0px 0px " + "-" + bild2.offsetWidth/2 + "px";
    alert("-" + bild2.offsetHeight/2 + "px 0px 0px " + "-" + bild2.offsetWidth/2 + "px");
    }
    function showgal(file,count,type) {
    document.getElementById("gal").style.visibility = "visible";
    document.getElementById("galimg").src =bild = "content/img/" + file + "." + type;
    bild = document.getElementById("galimg");
    document.getElementById("galimg").onload = pos(bild); // <---HIER
    }

    funktioniert es nicht...
    Wäre toll, wenn ihr mir helfen könntet.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. offsetHeight im Firefox = Problem

      plan_B
      – Informationen zu den Bewertungsregeln

      Hallo,

      bild = document.getElementById("galimg");
      document.getElementById("galimg").onload = pos(bild); // <---HIER
      }

      funktioniert es nicht...

        
function showgal(file,count,type) {  
 document.getElementById("gal").style.visibility = "visible";  
 var bild = document.getElementById("galimg");  
 bild.onload = function() {  // anonyme Funktion  
  pos(this);    // this zeigt auf bild, das <img>-Objekt  
  }  
 bild.src = "content/img/" + file + "." + type;  
 }

      wichtig, bild.src als letztes zu definieren. Sonst kann es evtl passieren, dass die Definition des Eventhandlers zu spät kommt.

      Gruß plan_B

      --
           *®*´¯`·.¸¸.·
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln