nicht angemeldet
Zucken beim zentrieren Script
Hallo!
Ich habe eine schlichte Seite, die 1004px breit und 623px hoch ist. Bei höheren Auflösungen wird diese Seite mittels folgendem JS zentriert:
function center_object()
{
var pageX = (document.all)?document.body.offsetWidth:window.innerWidth;
var pageY = (document.all)?document.body.offsetHeight:window.innerHeight;
if((pageX > 1030) || (pageY > 640))
{
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";
if (window.opera)
{
document.body.style.backgroundColor ='#FFFFFF';
}
}
}
window.onload=center_object;
Wenn ich nun in Opera eine andere Unterseite aufrufe, "zuckt" das Bild immer, sprich, es für einen Sekundenbruchteil oben links dargestellt, ehe es zentriert angezeigt wird. Komischerweise nur im Opera und bei einem IE6 (bei einem anderen IE6 klappt es ohne Probleme).
Hat jemand ne Idee, wo das Probelm liegt? Kann man irgendwie ne "preload-Funktion" einbauen oder so was??
Vielen Dnak im Voraus!
Gruß, Drathy
-
Hallo,
Wenn ich nun in Opera eine andere Unterseite aufrufe, "zuckt" das Bild immer, sprich, es für einen Sekundenbruchteil oben links dargestellt, ehe es zentriert angezeigt wird. Komischerweise nur im Opera und bei einem IE6 (bei einem anderen IE6 klappt es ohne Probleme).
Solche Rutscheffekte dürften auch mit CSS nicht ganz ausgeschlossen sein,
aber vmtl. doch weniger auffallen.Hat jemand ne Idee, wo das Probelm liegt? Kann man irgendwie ne "preload-Funktion" einbauen oder so was??
Wenn du die Elemente per visibility versteckst?
Aber ernsthaft, läßt sich das Zentrieren nicht gleich und einfacher per CSS lösen?
Grüsse
Cyx23
-
Wenn du die Elemente per visibility versteckst?
An sowas hatte ich auch schon gedacht, doch leider weiß ich nicht, wie ich das in JS einbauen kann...kenne leider die entsprechenden Befehle nicht...kannst mir da jemand helfen?
Aber ernsthaft, läßt sich das Zentrieren nicht gleich und einfacher per CSS lösen?
Ich hab das schon ausgiebig versucht. Horizontal ist das natürlich kein Problem, aber vertikal habe ich das nicht hinbekommen. Mal wurde bei geringeren Auflösungen an den Seiten etwas abgeschnitten und wenn ich das per umschließende Tabellenzelle (vertical-align:middle) mache, bekomme ich Probleme mit meinen fest Positionierten Elementen...daher habe ich es dann per JS versucht, was ja bis auf die Ausnahmen auch klappt.
Ich find das sowieso wieder herrlich, dass der Großteil der Browser damit ohne Probleme klarkommt, während Opera abspaggt....
-
Hallo,
Wenn du die Elemente per visibility versteckst?
An sowas hatte ich auch schon gedacht, doch leider weiß ich nicht, wie ich das in JS einbauen kann...kenne leider die entsprechenden Befehle nicht...kannst mir da jemand helfen?"visibility" kannst du ja als Styleeigenschaft in SelfHTML nachlesen oder hier die
Suche bemühen, du müßtest beim betr. Objekt erst verstecken und anschließend nach Aufbau
sichtbar machen, und das vorsorglich vielleicht nur für Opera, wenn du nicht sowieso ganz
auf die Methode verzichtest.Ich hab das schon ausgiebig versucht. Horizontal ist das natürlich kein Problem, aber vertikal habe ich das nicht hinbekommen. Mal wurde bei geringeren Auflösungen an den Seiten etwas abgeschnitten und wenn ich das per umschließende Tabellenzelle (vertical-align:middle) mache, bekomme ich Probleme mit meinen fest Positionierten Elementen...daher habe ich es dann per JS versucht, was ja bis auf die Ausnahmen auch klappt.
Du kannst vielleicht per JavaScript auch eine Styleanweisung erzeugen,
document.write('<style> ... ');Ich find das sowieso wieder herrlich, dass der Großteil der Browser damit ohne Probleme klarkommt, während Opera abspaggt....
Grüsse
Cyx23
-
Problem gelöst!
Danke für Deine Hilfe. Ich war nur zu ungeduldig gewesen und habe gleich gepostet - tut mir leid.
Hab in der Zwischenzeit unter visibility nachgeschaut und es angewendet - nun klappt alles.
Nochmals danke! :)
-
Hi Drathy,
könntest du dir die Mühe machen deine Lösung posten? Damit würdest du mir und vielleicht auch anderen helfen.
Vielen Dank.
Aleks* nicht eingeloggt.
-
Meine Lösung mit folgendem Script:
onload=function center_object()
{
var pageX = (document.all)?document.body.offsetWidth:window.innerWidth;
var pageY = (document.all)?document.body.offsetHeight:window.innerHeight;if((pageX <= 1030) || (pageY <= 640))
{
var objRef = document.getElementById("tabelle");
objRef.style.visibility = "visible";
}if((pageX > 1030) || (pageY > 640))
{
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";
if (window.opera)
{
document.body.style.backgroundColor ='#FFFFFF';
}
objRef.style.visibility = "visible";
}
}Allerdings muss man das entsprechende Objekt mit folgendem versehen:
style="position:absolute;visibility:hidden;"Dann ist das lästige "zucken" weg...
Gruß, Drathy
-
Hallo Drathy,
Allerdings muss man das entsprechende Objekt mit folgendem versehen:
style="position:absolute;visibility:hidden;"du solltest wenigstens berücksichtigen dass deine Seite so mit deaktiviertem
JavaScript nicht zugänglich wäre.Also möglichst eine Lösung nur per CSS.
Und wenn das nicht klappt vielleicht etwas ähnliches (jetzt nicht getestet) im Head der Datei:
<script type="text/javascript">
if(window.opera)
document.write('<style>#objekt{visibility:hidden;}</style>');
</script>
</head>
<body>Grüsse
Cyx23
-
Allerdings muss man das entsprechende Objekt mit folgendem versehen:
style="position:absolute;visibility:hidden;"du solltest wenigstens berücksichtigen dass deine Seite so mit deaktiviertem
JavaScript nicht zugänglich wäre.Oh verdammt! Da habe ich ja voll den Denkfehler reingehauen! Stimmt - das ist natürlich absoluter Mist!!!
Werde nach einer neuen Lösung suchen. Danke für Hinweis & Tipp!!
-
Also möglichst eine Lösung nur per CSS.
Hab es per css versucht, aber nicht hinbekommen. Wenn das mit dem Zentrieren mal geklappt hat, war das Problem bei kleineren Auflösungen da, dass Teile des Layoutes abgeschnitten wurden...
Und wenn das nicht klappt vielleicht etwas ähnliches (jetzt nicht getestet) im Head der Datei:
<script type="text/javascript">
if(window.opera)
document.write('<style>#objekt{visibility:hidden;}</style>');
</script>
</head>
<body>Hab versucht damit rumzuexperimentieren (kann Deine Idee nachvollziehen), aber ich habe es nicht hinbekommen. Wie müsste das Script denn aussehen, damit beim Headeraufruf erst einmal alles versteckt wird?
Muss ich das in ne function einbinden, oder kann man den Code auch ohne function in den header schreiben, der dann bei jedem Aufruf ausgeführt wird??-
Ich hab nun den Zeitpunktes des "Zuckens" rausgefunden. Vielleicht kann jemand damit ja was anfangen...?!?
Und zwar ist die Position beim "unload" der alten Datei noch ok, aber dann bevor der <body> ausgeführt, also auch bevor "load" ausgeführt wird, wird der Bereich an die Position (0,0) gesetzt, ehe das Script greift...
Ich verstehe das nicht...
-
Ich hab nun den Zeitpunktes des "Zuckens" rausgefunden. Vielleicht kann jemand damit ja was anfangen...?!?
Und zwar ist die Position beim "unload" der alten Datei noch ok, aber dann bevor der <body> ausgeführt, also auch bevor "load" ausgeführt wird, wird der Bereich an die Position (0,0) gesetzt, ehe das Script greift...
Mir ist nun gerade aufgefallen, dass alle Browser den Bereich vor dem "onload" auf die Position (0,0) setzen und danach erst das Script zum Zentrieren ausgeführt wird. Kann man dieses "zurücksetzen" der Position irgendwie verhindern??
-
Hallo,
Mir ist nun gerade aufgefallen, dass alle Browser den Bereich vor dem "onload" auf die Position (0,0) setzen und danach erst das Script zum Zentrieren ausgeführt wird. Kann man dieses "zurücksetzen" der Position irgendwie verhindern??
der body hat vor dem Laden keine abfragbaren bzw. durch den Seitenaufbau entstandene Eigenschaften,
von daher läßt es sich nicht verhinden.Grüsse
Cyx23
-
-
-
Hallo,
Hab versucht damit rumzuexperimentieren (kann Deine Idee nachvollziehen), aber ich habe es nicht hinbekommen.
Was hast du denn nicht hinbekommen?
Statt #objekt setzt du die id oder class deiner betr. Objekte ein.
Im Script kann auch der spätere Teil für onload bereits eingebunden werden, z.B.:<script type="text/javascript">
if(window.opera){
document.write('<style>#test{visibility:hidden;}</style>');window.onload=function(){ document.getElementById('test').style.visibility='visible'; }
}
</script>Grüsse
Cyx23
-
Was hast du denn nicht hinbekommen?
Es fängt schon damit an, dass Opera komischerweise gar nicht mit (window.opera) angesprochen wird. Wenn ich bespw. einen alert mit einbaue, wird der nicht ausgeführt. Aber auch ohne die if-Abfrage wird das Script nicht ausgeführt. Ist da vielleicht was falsch dran (muss gestehen, dass ich bislang JS immer als function eingebunden habe, und bin daher nicht sicher, ob das so korrekt ist...):
<script language="JavaScript" type="text/javascript" src="/wDeutsch/wLayout/structure/wScript.js">
document.write('<style>#tabelle{visibility:hidden;}</style>');
alert("piep");
</script>Mein übriges JS wird per includiertem Header eingebunden, da es für alle Seiten zugänglich sein soll...
Statt #objekt setzt du die id oder class deiner betr. Objekte ein.
Im Script kann auch der spätere Teil für onload bereits eingebunden werden, z.B.:Das beides ist soweit klar - hatte das genauso gemacht...
-
Hallo Drathy.
Was hast du denn nicht hinbekommen?
Es fängt schon damit an, dass Opera komischerweise gar nicht mit (window.opera) angesprochen wird. Wenn ich bespw. einen alert mit einbaue, wird der nicht ausgeführt.Funktioniert doch einwandfrei:
<script type="text/javascript"> [code lang=javascript]if (window.opera) { alert("Thank you."); }</script>[/code]
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Funktioniert doch einwandfrei:
Bei mir eben nicht...auch nicht ohne die if-Abfrage!!
-
Hallo,
Funktioniert doch einwandfrei:
Bei mir eben nicht...auch nicht ohne die if-Abfrage!!
hast du die Beispiele auch mal vollständig so wie gepostet versucht und JavaScript nicht deaktiviert?-)
Grüsse
Cyx23
-
hast du die Beispiele auch mal vollständig so wie gepostet versucht und JavaScript nicht deaktiviert?-)
Na selbstverständlich! Ich weiß auch nicht, was hier bei mir los ist...
Hab fast die Schnauze voll, da ich das Zucken einfach nicht wegbekomme...
Bin drauf und dran das nun doch mit css zu lösen, aber wollte mal eben Eure Meinung dazu hören. Wenn ich das Container-Div mit folgendem style versehe...
.center {position:absolute;left:50%;top:50%;margin-left:-502px;margin-top:-311px;}
...wird ja alles schön zentriert.
Problem daran ist ja nur, dass bei geringeren Auflösungen ringsrum ein Rand nicht mehr sichtbar ist. Das wiederum könnte man ja per Javascript abfangen, allerdings besteht ja (sicherlich) immer noch ein (ganz) kleiner Kreis von Leuten die mit kleinerer Auflösung als 1024*768 und deaktiviertem JS durch die Gegend surfen.
Für die wäre die Seite dann ja nicht in akzeptabler Weise dargestellt - meint Ihr, das kann man vernachlässigen? In meinen Augen dürfte der Prozentsatz gegen null gehen, oder?
Was meint Ihr? BITTE teilt mir Eure Gedanken mit...-
Hallo Drathy.
Was meint Ihr? BITTE teilt mir Eure Gedanken mit...
Verzichte *gänzlich* auf position:absolute.
Und verwirf deinen Gedanken, dass die Darstellung von HTML-Dokumenten irgend etwas mit der Bildschirmauflösung zu tun hätte.
Einen schönen Donnerstag noch.
Gruß, Ashura
-
Was meint Ihr? BITTE teilt mir Eure Gedanken mit...
Verzichte *gänzlich* auf position:absolute.
Das war mehr so auf die Vernachlässigung bezogen...egal.
Hab das schon versucht und stattdessen mit margin-left etc. gearbeitet (ist das besser, oder genauso schlimm?? wie positionierst Du Deine Objekte). Mich hat dann bloß genervt, dass jeder Browser die margins anders darstellt...Und verwirf deinen Gedanken, dass die Darstellung von HTML-Dokumenten irgend etwas mit der Bildschirmauflösung zu tun hätte.
Ja, entschuldigung...ist mir eigentlich auch klar, dass es nichts damit zu tun hat...ich meine natürlich die Größe des Browserfensters...abgesehen davon denke, ich dass die meisten Leute doch mit maximierten Browser surfen...naja, ist ja auch egal, darum geht es jetzt ja nicht...
Die Frage bleibt: Kann man den geringen Prozentsatz an Leuten mit kleinerem Browserfenster als 1024x768px und deaktiviertem JavaScript vernachlässigen?-
Hallo Drathy.
Hab das schon versucht und stattdessen mit margin-left etc. gearbeitet (ist das besser, oder genauso schlimm?? wie positionierst Du Deine Objekte).
Häufig erfordern Objekte gar keine Positionierung, da sie bereits so, wie sie im Dokument notiert wurden, eine ausreichende Position haben.
Mit etwas Geschick lässt sich dann auch noch über float und besagter margin-Eigenschaft einiges bewirken.
Dass du mich nicht falsch verstehst: die Ausrichtung von Objekten per position kann durchaus angebracht sein, erfordert aber einen geübten Umgang mit CSS im Allgemeinen, um mögliche Fehlerquellen erkennen und ausbessern zu können, welche die Dokumente unbenutzbar machen können.Mich hat dann bloß genervt, dass jeder Browser die margins anders darstellt...
Du bist damit über eine Tatsache im WWW gestoßen, welche unabänderlich und von deiner Seite nicht beeinflussbar ist: Jedes HTML-Dokument sieht auf jedem Client immer etwas anders aus. Bei dem einen weniger, aufgrund ähnlicher Voraussetzungen wie auf deinem Computer, bei dem anderen mehr.
Ja, entschuldigung...ist mir eigentlich auch klar, dass es nichts damit zu tun hat...ich meine natürlich die Größe des Browserfensters...
Auch die ist vollkommen ohne Belang. Wenn du überhaupt eine sinnvolle Ausgangslage möchtest, musst du vom Browserfensterinnenraum--kurz Viewport--ausgehen. Alles andere wäre töricht.
abgesehen davon denke, ich dass die meisten Leute doch mit maximierten Browser surfen...
Wie kommst du darauf?
Ich behaupte das Gegenteil: die auf ein angenehmes Maß skalierten Browserfenster häufen sich, weil immer größere Monitore mit immer höheren Auflösungen auf den Markt kommen. Einen Text auf einem 21 Zoll Monitor bei einem maximierten Browserfenster zu lesen, ist eine Qual, welcher sich die wenigsten freiwillig aussetzen.Die Frage bleibt: Kann man den geringen Prozentsatz an Leuten mit kleinerem Browserfenster als 1024x768px und deaktiviertem JavaScript vernachlässigen?
Meine Meinung dazu: du solltest *niemanden* vernachlässigen, die betroffenen Surfer werden es dir danken.
Was du hieraus machst, ist deine Entscheidung.Einen schönen Donnerstag noch.
Gruß, Ashura
-
Zunächst einmal danke für Deine wiederholt rasche Antwort!!
Häufig erfordern Objekte gar keine Positionierung, da sie bereits so, wie sie im Dokument notiert wurden, eine ausreichende Position haben.
Mit etwas Geschick lässt sich dann auch noch über float und besagter margin-Eigenschaft einiges bewirken.Ok, alles klar - werde in Zukunft darauf achten!
...ich meine natürlich die Größe des Browserfensters...
Auch die ist vollkommen ohne Belang. Wenn du überhaupt eine sinnvolle Ausgangslage möchtest, musst du vom Browserfensterinnenraum--kurz Viewport--ausgehen. Alles andere wäre töricht.
Das war ehrlich gesagt das, was ich meine...der Bereich, in dem die Webseite angezeigt wird...
abgesehen davon denke, ich dass die meisten Leute doch mit maximierten Browser surfen...
Wie kommst du darauf?
Ich behaupte das Gegenteil: die auf ein angenehmes Maß skalierten Browserfenster häufen sich, weil immer größere Monitore mit immer höheren Auflösungen auf den Markt kommen. Einen Text auf einem 21 Zoll Monitor bei einem maximierten Browserfenster zu lesen, ist eine Qual, welcher sich die wenigsten freiwillig aussetzen.Hmmm...das hast Du natürlich ohne Frage Recht. Aber ich denke dennoch, dass auch diese Nutzer Ihren Browser bzw. Viewport nicht auf eine Größe von kleiner als 1024x768px runterschrauben...
Meine Meinung dazu: du solltest *niemanden* vernachlässigen, die betroffenen Surfer werden es dir danken.
Was du hieraus machst, ist deine Entscheidung.Danke Dir für Deine Meinung! Ich denke, ich werde das mal mit meinem Chef besprechen...
-
-
-
-
-
-
-
-
Hallo nochmal,
...] und bin daher nicht sicher, ob das so korrekt ist...):
natürlich ist es so nicht korrekt!
Weshalb ich dich auch gefragt hatte ob du die geposteten Beispiele probiert hast.
<script type="text/javascript" src="/wDeutsch/wLayout/structure/wScript.js"></script>
<script type="text/javascript">
...Grüsse
Cyx23
-
...] und bin daher nicht sicher, ob das so korrekt ist...):
natürlich ist es so nicht korrekt!
Weshalb ich dich auch gefragt hatte ob du die geposteten Beispiele probiert hast.
Ups, bitte um Entschludigung! War mir nicht bewusst, dass man zusätzlich zum Link kein Weiteres JS einfügen darf...
Kann ich dann einen 2. <script>-Tag einfügen ungefähr so:??
<script type="text/javascript" src="/wDeutsch/wLayout/structure/wScript.js"></script>
<script type="text/javascript">
DEIN SCRIPT
</script>Oder klappt das so nicht?
-
-
-
Hallo!
Wollte nur kurz Bescheid sagen, dass ich es nun geschafft habe mit Deiner folgenden Lösung:<script type="text/javascript">
document.write('<style>#test{visibility:hidden;}</style>');</script>Folgendes habe ich dann in die Center-Methode geschrieben:
window.onload=function(){ document.getElementById('test').style.visibility='visible'; }
Danke für Deine/Eure Hilfe!!!
-
-
-
-
-
-
-
-
-
-
Hi,
mein IE6 - alle anderen IEs schon - liefert komischer Weise auch keinen Wert für document.body.offsetHeight. Ich hab auch schon in den Sicherheitseinstellungen nachgeschaut, nix zu machen.
Seltsam, seltsam.
Aleks* nicht eingeloggt
-
Hallo,
mein IE6 - alle anderen IEs schon - liefert komischer Weise auch keinen Wert für document.body.offsetHeight. Ich hab auch schon in den Sicherheitseinstellungen nachgeschaut, nix zu machen.
<html><body onload="alert(document.body.offsetHeight)">
</body></html>Grüsse
Cyx23
-