✔ Problem mit Zentrieren-Script

D

drathy

Mitglied
Hallo!

Ich habe folgendes Script geschrieben, um ein Element zu zentrieren:

Code: 
window.onload = function()
{
  if(screen.availWidth > 1024 && screen.availHeight > 768) 
  {
    var pageX = screen.availWidth;
    var pageY = screen.availHeight;     
        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"; 

  }
}

Bei dem Element handelt es sich um eine Tabelle bzw. ein Div.

Leider klappt das zentrieren nicht. Habe ich am Script etwas falsch gemacht Oder muss ich es nochmals extra aufrufen Hat jemand ne Idee?
 
Also als erstes würde ich

if((screen.availWidth > 1024) && (screen.availHeight > 768))

versuchen.

Ansonsten ein paar alerts einbauen, um zu sehen, was passiert

Gruß
vop
 
Danke für die schnelle Antwort!
In der Zwischenzeit habe ich es ohne die if-Bedingung versucht, aber ohne Erfolg...

Was meinst Du mit "alerts einbauen"? Wie mache ich das?

Sorry, wohl blöde Frage, aber ich hab kaum Erfahrung mit JavaScript... :(
 
Was meinst Du mit "alerts einbauen"? Wie mache ich das?
Zum Vergrößern anklicken....

Das könnte etwa so aussehen:
alert("ein beliebiger Text, der dir weiterhilft");


außerdem solltest Du im body-Tag stehen haben

<body .... onload="MeinOnload();"....>

und dann sollte die Funktion etwa so aussehen:


Code: 
 function MeinOnload()
  {
   alert("MeinOnload() wurde aufgerufen");
      if((screen.availWidth > 1024) && (screen.availHeight > 768))  
   {
 	     alert("Bedingung ist erfüllt");
 	     var pageX = screen.availWidth;
 	     var pageY = screen.availHeight;     
 	         var objRef = document.getElementById('tabelle'); 
 	         var objW = 1004; 
 	         var objH = 642; 
 	         alert("pageX=" + pageX);
 	                  alert("pageY=" + pageY);
 	                  alert("objRef=" + objRef);
 	                  alert("objW = " + objW);
 	                  alert("obhH=" + objH);
  	         objRef.style.left = ((pageX/2)-(objW/2))+"px"; 
 	                  objRef.style.top = ((pageY/2)-(objH/2))+"px"; 
    };
  };

Damit kannst Du wertvolle Informationen aus den alerts erhalten.

Gruß
vop
 
Zuletzt bearbeitet:
Ok, danke!

Hab das nun soweit gemacht, und alles scheint bestens zu sein! Er liefert in den alerts zumindest die korrekten Werte!

Ich versteh das nicht... Wenn die Anweisungen zum positionieren korrekt sind, müsste der das eigentlich machen...

Oder kann es etwas mit dem Objekt, welches zentriert werden soll zu tun haben? Es handelt sich dabei um eine Tabelle mit der kompletten Webseite... Müssen evtl. noch irgendwelce Attribute gesetzt werden. (position:absolute habe ich schon getestet...)
 
So, habe das Problem gelöst

Es hatte erst nicht geklappt, da das umfassende Div-Element nicht mit "position:absolute" versehen war...komischerweise klappt es auch nur dann, wenn das Element direkt damit versehen wurde und nicht via externer css-Datei...

Ich habe auch festgestellt, dass das zentrieren der Tabelle direkt nicht im Firefox klappt...

Hier mein endgültiger Code des Scriptes, falls nochmal jemand Probleme hat:
Code: 
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;
Und hier der dazugehörige <div>-Tag:
Code: 
<div id="tabelle" style="position:absolute;">

Somit wird nun bei allen Auflösungen, die größer als 1024x768 sind, das Element zentriert...

Danke nochmal für die Hilfe
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück