Opera spinnt bei JavaScript

[Harry_Potter]

Hallo!
Ich nutze folgendes JavaScript, um Objekte ab einer bestimmten Auflösung zu zentrieren. Im IE, Firefox & Safari funktioniert das auch perfekt, lediglich bei Opera haut irgendwas nicht hin. Komischerweise wird auch nur ein Teil der Objekte innerhalb des mit dem Script positionierten Containers falsch angezeigt...
Wird ein Teil des Scriptes evtl. von Opera nicht richtig verstanden?? Danke im Voraus!

SCRIPT:

function center_object()
{
 if((screen.availWidth > 1024) || (screen.availHeight > 768))
  {
    var pageX = (document.all)?document.body.offsetWidth:window.innerWidth;
    var pageY = (document.all)?document.body.offsetHeight:window.innerHeight;
        var objRef = document.getElementById("tabelle");
        var objW = 1004;
        var objH = 642;
        objRef.style.left = ((pageX/2)-(objW/2))+"px";
        objRef.style.top = ((pageY/2)-(objH/2))+"px";
 }
}
window.onload=center_object;

[Andreas Kampitsch]

Servus,

window.onload=center_object;

Versuchst Du auf die Variable „center_object“ zuzugreifen, oder auf die Funktion „center_object()“?
Meiner Meinung liegt hier der Fehler...

mit freundlichen Grüßen,

Andreas Kampitsch

[Cheatah]

Hi,

window.onload=center_object;
Versuchst Du auf die Variable „center_object“ zuzugreifen, oder auf die Funktion „center_object()“?

er will sicher nicht die Funktion ausführen, bevor die darin referenzierten Objekte existieren, also bei der Zuweisung zu window.onload. Die Rückgabe des Scripts ist auch nichts, was man einem window.onload sinnvollerweise zuweisen könnte.

Meiner Meinung liegt hier der Fehler...

Meiner Meinung nach liegt er in der Fehlerbeschreibung: Sie existiert nicht.

Cheatah

[Harry_Potter]

Hi!

er will sicher nicht die Funktion ausführen, bevor die darin referenzierten Objekte existieren, also bei der Zuweisung zu window.onload. Die Rückgabe des Scripts ist auch nichts, was man einem window.onload sinnvollerweise zuweisen könnte.

Verstehe ich es richtig, dass Du meinst, diese Funktion wäre bei window.onload sinnlos??

Meiner Meinung nach liegt er in der Fehlerbeschreibung: Sie existiert nicht.

Das deute ich so, dass Dir meine Fehlerbeschreibung nicht deutlich genug war. Hole ich dann mal nach, obwohl die meiner Meinung nach bei diesem Problem nicht so wichtig ist...

Also, alles bezieht sich nur auf Opera in Auflösungen, die höher als 1024x768 sind: Ich habe eine Tabelle mit Header, Body & Footer, welche von einem Div-Container umschlossen sind, der die ID "tabelle" hat, so dass sich das Script auf ihn auswirkt. Header & Content werden nun beim Aufruf korrekt zentriert angezeigt, nur der Footer nicht. Der Rahmen im Footer (ein gif) wird gar nicht angezeigt, und die Links (mit :hover-Effekt) erst wenn man über sie rüber fährt...

[Cheatah]

Hi,

Verstehe ich es richtig, dass Du meinst, diese Funktion wäre bei window.onload sinnlos??

nein. Ich versuchte deutlich zu machen, was bei

window.onload = funktion();

im Gegensatz zu

window.onload = funktion;

passiert. In beiden Fällen wird die Funktion aufgerufen - im ersten Fall nämlich sofort.

Das deute ich so, dass Dir meine Fehlerbeschreibung nicht deutlich genug war.

Richtig. Sie enthält beispielsweise nicht Deine Problemanalyse.

Hole ich dann mal nach, obwohl die meiner Meinung nach bei diesem Problem nicht so wichtig ist...

Wie wichtig etwas ist, kann nur der entscheiden, der das jeweilige Problem zu lösen in der Lage ist.

Also, alles bezieht sich nur auf Opera in Auflösungen, die höher als 1024x768 sind:

Nichts in Deinem Code bezieht sich auf Auflösungen. Glücklicherweise, denn das wäre Unsinn.

Ich habe eine Tabelle mit Header, Body & Footer,

In der richtigen Reihenfolge, hoffe ich: <tfoot> steht vor dem (oder den) <tbody>.

Header & Content werden nun beim Aufruf korrekt zentriert angezeigt, nur der Footer nicht.

Sondern? Und warum? Deiner Beschreibung fehlen wesentliche Teile.

Der Rahmen im Footer (ein gif) wird gar nicht angezeigt, und die Links (mit :hover-Effekt) erst wenn man über sie rüber fährt...

Ist dies von der Dynamik durch JavaScript abhängig, oder passiert das gleiche bei rein statischem Code?

Cheatah

[Harry_Potter]

nein. Ich versuchte deutlich zu machen, was bei

window.onload = funktion();

im Gegensatz zu

window.onload = funktion;

passiert. In beiden Fällen wird die Funktion aufgerufen - im ersten Fall nämlich sofort.

Ok, alles klar - danke!

Wie wichtig etwas ist, kann nur der entscheiden, der das jeweilige Problem zu lösen in der Lage ist.

Da hast Du natürlich Recht! Werde dies in Zukunft beherzigen!

Ich habe eine Tabelle mit Header, Body & Footer,

In der richtigen Reihenfolge, hoffe ich: <tfoot> steht vor dem (oder den) <tbody>.

Öhm...also die Struktur ist wie folgt:
<head>
 (per include wird die head.php aufgerufen)
</head>
<body>
 (per include wird die header.php aufgerufen)
 (Content)
 8per include wird die footer.php aufgerufen)
</body>
Wurde zumindest vom CMS so erstellt...

Sondern? Und warum? Deiner Beschreibung fehlen wesentliche Teile.

Die Daten im Footer (rahmen.gif sowie die textuellen Links mit :hover-Effekt) werden nicht dargestellt. Erst, wenn man über die Stellen mit der Maus fährt, wo die Links sein sollten, erscheinen sie...

Ist dies von der Dynamik durch JavaScript abhängig, oder passiert das gleiche bei rein statischem Code?

Also die Links sind per css gestaltet und positioniert. Per JS sollte nur die Position des Containers verändert werden... Wenn ich also das JS weg lasse, ist alles so wie es sein soll, nur ohne die Zentrierung...

Ich hoffe, ich konnte alle Fragen beantworten...

[wahsaga]

hi,

Also die Links sind per css gestaltet und positioniert.

Wie?

gruß,
wahsaga

[Harry_Potter]

Hi!

Also die Links sind per css gestaltet und positioniert.

Wie?

Wie folgt gestaltet in einer css-datei:

.textMenue           {font-family:verdana, arial, sans-serif;font-size:14px;color:#9DB3D1;font-weight:bold;text-decoration:none;margin:0px;padding:0px}
.textMenue:hover     {font-family:verdana, arial, sans-serif;font-size:14px;color:#b2600b;font-weight:bold; text-decoration:none;margin:0px;padding:0px}

Und so positioniert:

.systemNaviBottom        {padding:0px;position:absolute;top:610px;left:10px;width:1004px;}

[Harry_Potter]

Hallo!

Also daran liegt es leider nicht. Wenn ich es so mache, wie Du vorschlägst, dann wird komischerweise die Funktion gar nicht aufgerufen...

Was mir aber grade aufgefallen ist: (Wie bereits erwähnt, werden ja nur einige Objekte nicht mit zentriert.)Wenn ich den Fokus von der fehlerhaft angezeigten Seite auf ein anderes Fenster lege, sprich ein anderes Fenster in den Vordergrund hole und danach wieder das Fenster mit der fehlerhaften Seite in den Vordergrund hole, wird die Seite korrekt angezeigt...obwohl sie nicht neu geladen wurde....
Strange!!! Hat jemand ne Erklärung??

[Struppi]

function center_object()
{
if((screen.availWidth > 1024) || (screen.availHeight > 768))
  {
    var pageX = (document.all)?document.body.offsetWidth:window.innerWidth;
    var pageY = (document.all)?document.body.offsetHeight:window.innerHeight;
        var objRef = document.getElementById("tabelle");
        var objW = 1004;
        var objH = 642;
        objRef.style.left = ((pageX/2)-(objW/2))+"px";
        objRef.style.top = ((pageY/2)-(objH/2))+"px";
}
}

Vielleicht hilft es bei der Problemlösung wenn du dir mal die Werte ausgeben läßt ob überhaupt das was du erwartest bekommst.

Struppi.

[Harry_Potter]

Vielleicht hilft es bei der Problemlösung wenn du dir mal die Werte ausgeben läßt ob überhaupt das was du erwartest bekommst.

Hi!
Die Werte habe ich mir schon mal ausgeben lassen...das passt alles. Wie gesagt, in den anderen Browsern läuft ja auch alles perfekt...

[Struppi]

Die Werte habe ich mir schon mal ausgeben lassen...das passt alles. Wie gesagt, in den anderen Browsern läuft ja auch alles perfekt...

Naja, das läßt aber darauf schliessen das es auf jeden Fall nicht am Skript liegt, sondern dass du wohl eher ein CSS Problem hast.

Struppi.

[Harry_Potter]

Naja, das läßt aber darauf schliessen das es auf jeden Fall nicht am Skript liegt, sondern dass du wohl eher ein CSS Problem hast.

Aber wie kann es dann sein, dass ohne Scriptaufruf alles 100%ig ist??
Und wie gesagt, sobald ein anderes Fenster vor dem fehlerhaften Opera-Fenster liegt, und man danach wieder das Opera-Fenster in den Vordergrund holt, wird alles korrekt angezeigt...
Gibt es nicht eine art "repaint" Methode oder sowas, die den Fensterinhalt neu zeichnet (nicht neu aufruft)??

[wahsaga]

hi,

Und wie gesagt, sobald ein anderes Fenster vor dem fehlerhaften Opera-Fenster liegt, und man danach wieder das Opera-Fenster in den Vordergrund holt, wird alles korrekt angezeigt...
Gibt es nicht eine art "repaint" Methode oder sowas, die den Fensterinhalt neu zeichnet (nicht neu aufruft)??

Doch, sowas in der Art ist möglich: http://forum.de.selfhtml.org/archiv/2005/9/t114613/

gruß,
wahsaga

[Harry_Potter]

Doch, sowas in der Art ist möglich: http://forum.de.selfhtml.org/archiv/2005/9/t114613/

War ja klar, dass das bei mir wieder nicht hinhaut...keine Ahnung warum!
Habe in mein Script folgende Opera-Abfrage + "BugFix" aus dem anderen Thread eingebaut:

if (navigator.userAgent.indexOf('Opera') > -1)
    {
    document.body.style.backgroundColor = '#FFFFFF';
    }
Aber leider zeichnet der die Seite immer noch nicht neu...auch ohne die Opera-Abfrage wollte er das nicht...das kann doch alles nciht wahr sein! :(

[Siechfred]

Tag Harry_Potter.

if (navigator.userAgent.indexOf('Opera') > -1)

Nein, besser wäre:

if(window.opera)

Aber leider zeichnet der die Seite immer noch nicht neu

Hast du eine andere als die aktuelle Hintergrundfarbe verwendet, um zu testen, dass Opera überhaupt in dieser Abfrage landet? Mit Opera lässt sich nämlich trefflichst die Browserkennung (UA-String) fälschen ... so könnte er sich bspw. als IE ausgegeben haben, dann würde deine Abfrage scheitern.

Siechfred

[Harry_Potter]

Nein, besser wäre:

if(window.opera)

Hatte ich so probiert, aber hatte irgendwie nicht hingehauen...dachte das lag daran, dass sich Opera als IE ausgibt...

Hast du eine andere als die aktuelle Hintergrundfarbe verwendet, um zu testen, dass Opera überhaupt in dieser Abfrage landet? Mit Opera lässt sich nämlich trefflichst die Browserkennung (UA-String) fälschen ... so könnte er sich bspw. als IE ausgegeben haben, dann würde deine Abfrage scheitern.

Was die Browsererkennung angeht, das klappt - hatte ich per alert getestet...
Bezüglich der Farbe, hatte ich die nicht anders gesetzt, nun aber ja, wodurch das Problem deutlich wird: Es wird nicht die komplette Seite eingefärbt, so z.B. nicht der Footer, oder die Partie links neben dem Layout (wo dann ein Teil des nicht zentrierten Layouts quasi "stehen bleibt"). Und eben die Bereiche, die nicht eingefärbt wurden, werden fehlerhaft dargestellt...
Gibt es da nicht was anderes als "document.BODY.style", was quasi den kompletten Anzeigebereich mit einschließt??

[Ashura]

Hallo Harry_Potter.

Nein, besser wäre:

if(window.opera)
Hatte ich so probiert, aber hatte irgendwie nicht hingehauen...dachte das lag daran, dass sich Opera als IE ausgibt...

Das sind zwei Paar Schuhe:

Zum Einen haben wir einen UserAgent-String, welcher beliebig verändert werden kann und alles mögliche oder gar nichts enthalten kann.

Zum Anderen haben wir das opera-Objekt als Unterobjekt des window-Objektes, welches nur Opera kennt. Dieses Objekt ist somit weitaus verlässlicher als der UA-String.

Einen schönen Donnerstag noch.

Gruß, Ash*feel free*ura

[Harry_Potter]

Zum Einen haben wir einen UserAgent-String, welcher beliebig verändert werden kann und alles mögliche oder gar nichts enthalten kann.

Zum Anderen haben wir das opera-Objekt als Unterobjekt des window-Objektes, welches nur Opera kennt. Dieses Objekt ist somit weitaus verlässlicher als der UA-String.

Ok, alles klar - werd ich mir merken!

Gibt es denn nun noch ein Element, welches dem <body> übergeordnet ist, so dass ich den ganzen sichtbaren Bereich des Browser ansprechen, also einfärben kann??

[Siechfred]

Tag Harry_Potter.

Gibt es denn nun noch ein Element, welches dem <body> übergeordnet ist, so dass ich den ganzen sichtbaren Bereich des Browser ansprechen, also einfärben kann?

Theoretisch HTML, allerdings vermute ich mittlerweile ein tiefgreifenderes Problem, wenn das Einfärben des Body nur Teile der Seite verändert - (i)Frames? Wie wäre es also, wenn du jetzt endlich mal mit einem Online-Beispiel rausrücken würdest :-)

Siechfred

[Harry_Potter]

Theoretisch HTML, allerdings vermute ich mittlerweile ein tiefgreifenderes Problem, wenn das Einfärben des Body nur Teile der Seite verändert - (i)Frames? Wie wäre es also, wenn du jetzt endlich mal mit einem Online-Beispiel rausrücken würdest :-)

Werde das mit HTML mal testen, meine aber, das hatte ich gestern schon versucht... Frames werden in keiner Weise verwendet...

@Sichfred: Du hast Post!

[Siechfred]

Tag Harry_Potter.

Werde das mit HTML mal testen, meine aber, das hatte ich gestern schon versucht... Frames werden in keiner Weise verwendet

Schön, dass du mir den Link gepostet hast, allerdings musst du jetzt in Kauf nehmen, dass nur ich etwas dazu sagen kann. Jedenfalls führt Opera 8.5 die Funktion korrekt aus. Dass der Hintergrund nicht vollständig gewechselt wird, liegt daran, dass du nirgends die Dimensionen für HTML und BODY definiert hast, das solltest du nachholen:

html,body {  
  width:100%;  
  height:100%;  
  margin:0;  
  padding:0;  
}

Das Zentrieren des Inhalts-DIV bekommst du auch ganz ohne JS hin, indem du diesem als linken und rechten Außenabstand den Wert auto zuweist. Durch die pixelgenaue Breite der Inhaltselemente kommt es bereits bei einfacher Vergrößerung des Schriftgrads zu unschönen Verzerrungen. Außerdem drückt deine vertikale Navigationsleiste das DIV auseinander. Sowohl dein HTML als auch dein CSS bedürfen *dringend* einer Überarbeitung.

Wenn du also *wirklich* Hilfe willst, dann poste den Link, damit dir die hier mitlesenden CSS-Spezialisten helfen können. Ansonsten wundere dich nicht, wenn der Auftraggeber/Chef/... dich angesichts des Ergebnisses in sprichwörtliche Stücke reißt.

Siechfred

[Harry_Potter]

Hallo Siechfred!

Schön, dass du mir den Link gepostet hast, allerdings musst du jetzt in Kauf nehmen, dass nur ich etwas dazu sagen kann. Jedenfalls führt Opera 8.5 die Funktion korrekt aus. Dass der Hintergrund nicht vollständig gewechselt wird, liegt daran, dass du nirgends die Dimensionen für HTML und BODY definiert hast, das solltest du nachholen:

html,body {

width:100%;
  height:100%;
  margin:0;
  padding:0;
}

Danke für den Tipp - damit hat es geklappt!  
  
  

> Das Zentrieren des Inhalts-DIV bekommst du auch ganz ohne JS hin, indem du diesem als linken und rechten Außenabstand den Wert auto zuweist. Durch die pixelgenaue Breite der Inhaltselemente kommt es bereits bei einfacher Vergrößerung des Schriftgrads zu unschönen Verzerrungen. Außerdem drückt deine vertikale Navigationsleiste das DIV auseinander. Sowohl dein HTML als auch dein CSS bedürfen \*dringend\* einer Überarbeitung.  
  
Du glaubst nicht, wie lange ich das versucht habe, aber es hat bei einfach nicht hingehauen mit der Zentrierung des Inhalts-Divs, bzw. hatte ich dann bei kleineren Auflösungen das Problem, dass Teile des Layouts abgeschnitten wurden...daher habe ich dann versucht, es mit JS zu lösen...  
Was das vergrößern des Schriftgrades (ich denke Du meinst per Browser) angeht, sehe ich das als nicht so wild an...das ist doch bei vielen Seiten so...denke das kann man aber doch auch nicht ganz abschalten bei Seiten, die viel Inhalt haben...?!  
Das Div sollte eigentlich genau die Breite der Leiste bzw. des Hintergrundrahmens haben...das ist auch so, wenn ich mich nicht irre...  
  

> Wenn du also \*wirklich\* Hilfe willst, dann poste den Link, damit dir die hier mitlesenden CSS-Spezialisten helfen können. Ansonsten wundere dich nicht, wenn der Auftraggeber/Chef/... dich angesichts des Ergebnisses in sprichwörtliche Stücke reißt.  
  
Hmmm...also ich habe die Seite nun auf IE, Opera, Firefox & Safari getestet und sonst keine Fehler entdeckt.  
Klar, dass html & css noch verbesserungwürdig sind (wurden von einem CMS generiert, was ich dann angepasst habe), aber da es sich hierbei im Grunde um mein allererstes Projekt handelt, bin ich (und mein Chef hat bislang auch noch nichts anderes gesagt) mit dem Ergebnis ganz zufrieden...  
  
Ich muss echt gestehen, dass ich nie erwartet hätte, dass man so viele Sachen beachten muss, damit die Seite auf allen Browsern gut aussieht!  
Falls jemand nen Guide für sowas kennt, also auf was man bei der Programmierung achten sollte, kann er ja hier mal nen Link posten. Ist echt traurig, dass ich an unserer Hochschule als Medieninformatik-Student sowas nicht gelehrt bekomme...  
  
Naja, jedenfalls vielen Dank für die Hilfe!!!

[Ashura]

Hallo Siechfred.

html,body {

width:100%;
  height:100%;
  margin:0;
  padding:0;
}

  
Wozu eine Breitenangabe? Das html-Element und das body-Element sind von Haus aus als display:block; 100% breit.  
  
  
Einen schönen Freitag noch.  
  
Gruß, Ash\*feel free\*ura  

-- 
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|  
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Fix dsl sbc yahoo com with User JavaScript](http://operalover.tntluoma.com/8/fix_dsl_sbc_yahoo_com_with_user_javascript)  
Meine Browser: [Opera 8.50](http://opera.com/download/) | [Firefox 1.0.7](http://www.mozilla.org/products/firefox/all) | [Lynx 2.8.5](http://lynx.isc.org/current/) | Netscape 4.7 | IE 6.0  
![Use OpenOffice.org](http://download.noctus.net/gallery/ooo.png)

[Siechfred]

Tag Ashura.

html,body {

width:100%;
  height:100%;
  margin:0;
  padding:0;
}

> Wozu eine Breitenangabe? Das html-Element und das body-Element sind von Haus aus als display:block; 100% breit.  
  
Theoretisch ja, praktisch erforderlich, um verschiedene Browser zu einem bestimmten Anzeigeverhalten zu bewegen, z.B. um dem [IE max-width beizubringen](http://www.svendtofte.com/code/max_width_in_ie/) oder um den NN4 zu bedienen (das sind die zwei Würgarounds, die ich auf die Schnelle gefunden habe, gibt aber sicher noch ein paar mehr). Wer diese Würgarounds nicht braucht, kann in der Tat die Angabe für width weglassen.  
  
Siechfred

-- 
[Codeschnipsel gefällig?](http://sniplets.anaboe.net) || [Wieder Online: Existenzgründer-FAQ](http://www.steuerwerkstatt.de/existenzgruendung.php)

[Harry_Potter]

Also mein Problem ließ sich jedenfalls nur mit der expliziten Angabe lösen...

[Ashura]

Hallo Siechfred.

Wozu eine Breitenangabe? Das html-Element und das body-Element sind von Haus aus als display:block; 100% breit.

Theoretisch ja, praktisch erforderlich, um verschiedene Browser zu einem bestimmten Anzeigeverhalten zu bewegen, [...]

Ah, danke. Das wusste ich nicht.

Einen schönen Freitag noch.

Gruß, Ash*feel free*ura