Crossbrowsing, offset & client

[-=]SquweeZ[=-]

Guten Tag allerseits.

Nach langem Rumprobieren und Überlegen stehe ich mehr oder weniger am Ende meines Horizontes und meiner Ideen...

Es geht darum, eine "Animation" in mehreren Browser zum Funktionieren zu bringen. So weit so gut, wäre da neben FF, SM, Chrome, Opera und Safari nicht auch noch der IE :/

Die "Animation" besteht darin einen div-container größer bzw kleiner werden zu lassen. Damit er sich bei dieser veränderung nicht nur nach rechts unten vergrößert/links oben verkleinert wird der Abstand nach oben und links verkleinert/vergrößert.
Anmerkung: Es wird mehr in die Höhe vergrößert als in die Breite.

Wie aus meinem Post bis jetzt hervorgeht funktioniert es nicht im IE.

Problem: Beim Internet Explorer beginnt in dem Moment wo die Breite den gewünschten Wert erreicht hat, die größe sich nicht mehr zu ändern, allerdings der Abstand von oben weiterhin zu verkleinern, obwohl diese beiden Änderungen mit der gleichen IF-Bedingung "kontrolliert" werden.

        //höhe
        if(height < 230 && this.expandation_status == 'expanding') {
            height += 4;
            top -= 2;
            this.object.style.height = height;
            this.object.style.top = top;
        }//höhe 

Meine vorest beste Lösung für das Problem war, dass ich die Abfrage der Höhe und der Breite von clientHeight/clientWidth auf offsetHeight/offsetWidth geändert habe. Das Problem dabei ist, dass sich bei jedem Funktionsaufruf der div-container etwas nach rechts verschiebt (Jap, er hat einen Rahmen... -.-).

Da ich mehrere div-conatainer auf die gleiche Art verarbeiten muss, ist das Ganze - mehr oder weniger - Objektorientiert (soweit es in JS möglich ist..).

object ist ein Attribut des Objekts und ist - so zu sagen - der div-container.

function expand(){
        var height = this.object.clientHeight;
        var width = this.object.clientWidth;
        var left = this.object.offsetLeft;
        var top = this.object.offsetTop;


        //breite
        if(width < 170 && this.expandation_status == 'expanding') {
            width += 2;
            left--;
            this.object.style.width = width;
            this.object.style.left = left;
        }//breite

        //höhe
        if(height < 230 && this.expandation_status == 'expanding') {
            height += 4;
            top -= 2;
            this.object.style.height = height;
            this.object.style.top = top;
        }//höhe

        //bildgröße
        if(width <= 170) {
            this.object.getElementsByTagName('img')[0].style.height = width;
            this.object.getElementsByTagName('img')[0].style.width = width;
        }//bildgröße


        //rekursions_check
        if((width < 170 || height < 230) && this.expandation_status == 'expanding')
            window.setTimeout("cat_objects["+this.id+"].expand()", 0);
    }//expand 

Bei der Rekursion findet Ihr "cat_objects[]...", welches ein Array ist, dass die besagten Objekte speichert.

Fehlerkonsole: Leider leer. :/

Hoffentlich könnt ihr mir helfen,
Martin

[kkapsner]

Was machst du da?

//bildgröße
if(width <= 170) {
this.object.getElementsByTagName('img')[0].style.height = width;
this.object.getElementsByTagName('img')[0].style.width = width;
}//bildgröße

Hast du einen Testlink? HTML?

PS: diese CSS-Eigenschaften erwarten eigentlich alle eine Einheit!

[-=]SquweeZ[=-]

Testlink: http://squweez.sq.funpic.de/ca/index.html

Die Bildgröße ist in keinem Browser ein Problem...

siehs dir einfach im Firefox an, und anschließend im IE, dann wirst du sehn, wie schön divs davonfliegen können xD

Woran das liegt weiß ich eben nicht,..

Der erste Codesnip ist der einzige wo top negativ verändert wird (gibt das Gegenteil (bei mouse-out) wo top positiv verändert wird..)

Danke für die Hilfe,
Martin

[-=]SquweeZ[=-]

Hab nun mittels einem Popup mir die Werte height und top ausgeben lassen.

Das ergebnis weicht natürlich im IE vom FF/Opera ab. (Aus Zeitgründen spar ich mir hier Chrome & Safari) Da der IE aus der Rekursion nicht rauskommt, musste ich das Popup während dieser aufrufen.

So und jetzt zu den Ergebnissen:

Firefox/Opera
Height: 104px Top: 225
,Height: 108px Top: 223
,Height: 112px Top: 221
...
...
,Height: 172px Top: 191
,Height: 176px Top: 189
,Height: 180px Top: 187
...
...
,Height: 224px Top: 165
,Height: 228px Top: 163
,Height: 232px Top: 161

Internet Explorer
Height: 104px Top: 225
,Height: 106px Top: 223
,Height: 108px Top: 221
...
...
,Height: 170px Top: 159
,Height: 172px Top: 157
,Height: 174px Top: 155
,Height: 174px Top: 153
,Height: 174px Top: 151
,Height: 174px Top: 149
,Height: 174px Top: 147
,Height: 174px Top: 141

Was mir sofort aufgefallen ist, ist dass der IE nur +2 Pro durchlauf macht, was daran liegt, dass ich mit clientHeight abfrage.

Viel schlauer machen mich diese Ergebnisse aber auch nicht. Das einzige was ich jetzt weiß, ist, dass im IE 7 & 8 window.open nicht funktioniert...

Hab ihr vielleicht eine Idee?

e: Hab das ganze nun mit px-Angaben versucht... keine Änderung.
e2: Hab nun die komplette Ausgabe (außer IE (da die endlos wäre)) angehängt.

Hoffe ich/wir lösen bald das Problem,
Martin

[kkapsner]

Wieso liest du nicht style.height mit einem parseInt aus?

[-=]SquweeZ[=-]

Hab ich eben probiert. Resultat: NaN

Wenn ich mir style.height mittels alert ausgeben, bekommen ich '' als String, obwohl das eigentlich per CSS gesetzt ist.

e: Das mit NaN hab ich jetzt so gelöst, dass ich im Constructor der Klasse einfach this.object.style.height = 100 und das gleiche auch für width gesetzt hab.
Resultat: Ich lächelnd bis über beide Ohren und 8 verschiedene Browser, in denen ich es bis jetzt getestet habe, und wo es funktioniert hat (FF, SM, Opera, Chrome, Safari, IE8, IE7, IE6).

Danke für die Hilfe !
Martin

[ein schlauer]

e: Das mit NaN hab ich jetzt so gelöst, dass ich im Constructor der Klasse einfach this.object.style.height = 100 und das gleiche auch für width gesetzt hab.
Resultat: Ich lächelnd bis über beide Ohren und 8 verschiedene Browser, in denen ich es bis jetzt getestet habe, und wo es funktioniert hat (FF, SM, Opera, Chrome, Safari, IE8, IE7, IE6).

Lass dir die Seite mal im Standard Modus anzeigen, anstatt dem nicht empfehlenswerten Quirksmodus den du verwendest.

[kkapsner]

Und das mit den Einheiten gilt immer noch.

[-=]SquweeZ[=-]

Lass dir die Seite mal im Standard Modus anzeigen, anstatt dem nicht empfehlenswerten Quirksmodus den du verwendest.

Was ist bitte der Quirksmodus und wie stell ich den aus? Websitestyle: Default is wohl nicht der Standardmodus...

Jap, das mit den px hab ich eh im Code, und lediglich im Post vergessen.

e: Da hab ich mir wohl selbst ein Ei gelegt xD... der Quirksmode.. hab jz Strict als dtd.. thx fürs hinweisen