<DIV> zentrieren abhängig von größe

[Prominenter]

Hi@all

also ich habe jetzt mal den Script-Code auf ein Minimum reduziert.
Gleiches Problem, das Script wird ausgeführt, die Positionierung und Größenönderung allerdings wird erst beim erneuten Aufruf gesetzt.

Das Script - wird am Ende des Quellqodes geladen

<!--
function showHideLayer(obj,arg) 
{ 
 // Objekt definieren
 obj = document.getElementById(obj);
 // Objekt Style ermitteln und neu festlegen
 if (obj.style)
 {
  v=(arg=='show')?'block':(arg=='hide')?'none':v; 
 }
  // Fenstergröße ermitteln
  var fensterhoehe  = screen.height;
  var fensterbreite = screen.width;
  // Objektgröße ermitteln
  var h=obj.offsetHeight;
  var w=obj.offsetWidth;
  // Layer positionieren
  obj.style.top  = "50%";
  obj.style.left = "50%";
  // Layer mittig ausrichten
  obj.style.marginTop  = -(h/2)+"px";
  obj.style.marginLeft = -(w/2)+"px";
  // Layer anzeigen/ausblenden
  obj.style.display = v; 
  obj.style.position = "fixed";  
 }
//--> 

Der Link - irgendwo mittendrin, meistesn bei Bildern

<img src='".$artikelbild01."' onmouseover='swapImage(".$item.",this.src);' 
onclick='document.getElementById(\"picture\").src=this.src; showHideLayer(\"layer\",\"show\")' 
alt='Artikelbild 01' title='KLICK -> GROSS' /> 

Der Layer - ganz am Ende des Quellqodes

<!-- Beginn Layer Bildanzeige -->
<div id="layer" style="padding:5px; background:#FFFFFF; border: 2px solid black; 
position:absolute; z-index:1; display:none;">
<div style="width:18px; background:#FFFFFF; border: 1px solid black; 
position:absolute; right:5px; text-align:center; vertical-align:middle; font-weight:bold; display:inline; ">
<a href="javascript:showHideLayer('layer','hide')" onmouseover="top.status='LAYER SCHLIESSEN';return true;" 
title="SCHLIESSEN" style="text-decoration:none; color:#000;"><b>x</b></a></div>
<img src="http://www.php-resource.de/forum/images/null_pix.gif" id="picture" 
style="cursor:pointer; border:1px solid black;" title="Klick -> Close" alt="" 
onclick="javascript:showHideLayer('layer','hide')" />
</div>
<!-- Ende Layer Bildanzeige -->
<script type="text/javascript" src="scripts/layer.js"></script> 

[Prominenter]

Hi@all

ich habe jetzt durch eine einfache Schleife, dass die Funktion 2mal aufgerufenwird und siehe da so funktioniert es.

<!--
function showHideLayer(lay,txt,arg) 
{ 
 // Objekt definieren
 var obj = document.getElementById(lay);
 // Objekt Style ermitteln und neu festlegen
 if (obj.style)
 {
  v=(arg=='show')?'block':(arg=='hide')?'none':v; 
 }
 
 for (i=0; i<2; i++)
 {
  // Fenstergröße ermitteln
  var fensterhoehe  = screen.height;
  var fensterbreite = screen.width;
  // Objektgröße ermitteln
  var h=obj.offsetHeight;
  var w=obj.offsetWidth;
  // Layer positionieren
  obj.style.top  = "50%";
  obj.style.left = "50%";
  // Layer mittig ausrichten
  obj.style.marginTop  = -(h/2)+"px";
  obj.style.marginLeft = -(w/2)+"px";
  // Layer anzeigen/ausblenden
  obj.style.display = v; 
  obj.style.position = "fixed"; 
  }
 }
//--> 

Ist sicher nicht die sauberste Lösung aber, da hat jemand bestimmt eine bessere Idee.

Gruß
Thx@all

[Prominenter]

Hi@all

Zu früh gefreut,
also so geht es auch nicht, wenn verschieden große Bilder zur Auswahl stehen.

Man muss echt erst zweimal klicken.
Kann man das nicht irgendwie simulieren ???



Thx@all

[Kropff]

Ich habe wohl des Rätsels Lösung. Du greifst auf die Ausmaße des Layer-Divs zu. Das hat aber keine und darum ist das margin immer 0. Ein Hack auf die Schnelle.

function showHideLayer(obj,arg, img) 
  { 
    obj = document.getElementById(obj);
    if (obj.style)
    {
      v=(arg=='show')?'block':(arg=='hide')?'none':v; 
    }
    var fensterhoehe  = screen.height;
    var fensterbreite = screen.width;
    var h = img.offsetHeight;
    var w = img.offsetWidth;
    obj.style.top  = "50%";
    obj.style.left = "50%";
    obj.style.marginTop  = -(h/2)+"px";
    obj.style.marginLeft = -(w/2)+"px";
    obj.style.display = v; 
    obj.style.position = "fixed";  
  } 

Und der Aufruf erfolgt so:

<img src="bild.gif" onclick="document.getElementById('picture').src=this.src;
 showHideLayer('layer','show', this)"...

Peter

PS. Mit entsprechenden Testausgaben per alert oder console.log hättest du das aber selber herausfinden müssen!

[Prominenter]

Hi@all
@kropff

danke, hab das mal probiert, zumindest funktioniert jetzt die Größenberechnung, aber das mit der Position klappt noch nicht ganz.

Mir ist aufgefallen wenn ich ein alert() vor der object-anzeige einfüge funktioniert es tadellos, kein Bild mehr verschoben, alle sin der richtigen Größe, doch sobald ich das alert() wieder rausnehme klappt es nicht mehr.

[Kropff]

Mit welchem Browser testest du das? Dem IE? Dann bau mal spaßeshalber ein setTimeout ein.

Gruß
Peter

[Prominenter]

Mit welchem Browser testest du das?...

Hab FF8.0.1 und IE 8.0.7

Mit Timeout() hab ich schon probiert.

[Kropff]

Stell noch mal ein Beispiel online. Also nur eine Dummy-Seite mit der Programmierung und einem Bild.

Peter

[Prominenter]

@kropff

Dummieseite ist blöd mit ur einem Bild, weil manchmal geht manchmal geht n icht.

auf:PRELOAD ist das Script mehrfachim Einsatz.

Z.Bsp. bei Galerie, da funktioniert es komischerweise fas überhaupt nicht, mnache Bilder gehen manche erst beim zweiten klick, pack ich ein alert() in das Script gehen alle Bilder sofort in gewünschter größe und Position auf.

Ansonsten gibt es auf der Seite verschiedene Bilder mit Vorschaufunktion und auch Links die ein Bild als Vorschau haben (Turnier -> Anfahrt und Startfolge z.Bsp.), da funktioniert es jetzt auch mit der Größe.

Ist die einzigste Möglichkeit zum testen.

Thx@all

[Kropff]

So, jetzt machst du mal Folgendes. Du schmeißt alle(!) JavaScript-Dateien raus, die nichts mit dem Problem zu tun haben. Danach installierst du dir den Firebug für Firefox. Zu guter Letzt liest du dir das hier mal genau durch.

Und dann mach Testausgaben per console.log bis die Schwarte kracht, vulgo du den Fehler gefunden hast. Denn dabei kann und werde ich ich dir nicht mehr helfen. Sorry, aber jetzt geht es einfach nur noch darum, dass du deinen Code Stück für Stück entwanzt.

Gruß
Peter

[Prominenter]

@kropff

Herzlichen Dank, für deine Tipps, ich glaube jetzt habe ich es hinbekommen, zumindest lief es bei den Test bisher problemlos.

Das Problem lag einfach darin dass die Bilddaten beim ersten Klick immer 0 waren,ich habe das ganze jetzt in ein img.onload = function(); gepackt.

Hier nochmal alle Details:

Im <img>TAG oder im <a href> als onclick

onclick="showHideLayer(this.src,'show','Text') 

Übergeben werden: img=das aufrufende Objekt, arg=das Argument show/hide, txt=der anzuzeigende Text,

Der Layer

<!-- Beginn Layer Bildanzeige -->
<div id="layer_preview">
 <div id="layer_close"><a href="javascript:showHideLayer('','hide','')" 
onmouseover="top.status='LAYER SCHLIESSEN';return true;" title="SCHLIESSEN"><b>x</b></a></div>
 <div id="layer_text" style="color:#000000; font-weight:bold; display:none;"></div>
 <img id="layer_picture" src="http://www.php-resource.de/forum/images/null_pix.gif" 
title="Klick -> Close" alt="" onclick="javascript:showHideLayer('','hide','')" />
</div>
<script type="text/javascript" src="scripts/layer.js"></script>
<!-- Ende Layer Bildanzeige --> 

Die Layerformatierung

/* LAYER für Bildanzeige */
#layer_preview
{
 position:absolute; 
 top:0;
 left:0; 
 height:0;
 width:0;
 margin:0;
 z-index:1; 
 border: 2px solid black; 
 background:#FFFFFF; 
 padding:5px; 
 display:none;
}
#layer_close
{
 position:absolute; 
 right:3px; 
 width:18px; 
 border: 1px solid black; 
 background:#FFFFFF; 
 font-weight:bold; 
 text-align:center; 
 vertical-align:middle; 
 display:inline;
}
#layer_close a
{
 text-decoration:none; 
 color:#000000;
}
#layer_picture
{
 cursor:pointer; 
 border:1px solid black;
} 

Das Script: layer.js

<!--
// Übergeben werden img=das aufrufende Objekt, arg=das Argument show/hide, txt=der anzuzeigende Text
function showHideLayer(img, arg, txt) 
{ 
 var img, txt, arg, pic, sW, sH, pW, pH, oW, oH;
 // Objekte definieren
 // Anzeige-Layer
 var obj  = document.getElementById('layer_preview');  
 // Scrollfunktion ausschalten
 obj.style.overflow = "";   
 // Anzeige Picture im Layer
 var bild = document.getElementById('layer_picture');
 bild.src = img;   
 // Temporäres Bild für Größenberechnung
 var tmp  = new Image;
  
 // Objekt Style ermitteln und neu festlegen
 if (obj.style)
 {
  v=(arg=='show')?'block':(arg=='hide')?'none':v; 
 } 

 // Layer Größe und Position Berechnen
 tmp.onload = function (evt) 
 {
  // Bildgößr ermitteln
  var pW = this.width;
  var pH = this.height;

  // Anzeige Breite
  if( document.documentElement && document.documentElement.clientWidth )  sW = document.documentElement.clientWidth;  
  else if (document.body && document.body.offsetWidth) sW = document.body.offsetWidth;
  else if (window.innerWidth) sW = window.innerWidth;
  else sW = 1024;
  // Anzeige Höhe
  if( document.documentElement && document.documentElement.clientHeight )  sH = document.documentElement.clientHeight;  
  else if (document.body && document.body.offsetHeight) sH = document.body.offsetHeight;
  else if (window.innerHeight) sH = window.innerHeight;
  else sH = 768; 
  
  // Layergöße auf Bildgröße setzen
  obj.style.width  = pW + "px";
  obj.style.height = pH + "px";  
  // Layer positionieren
  obj.style.left = (sW-pW)/2 + "px";    
  obj.style.top  = (sH-pH)/2 + "px";   
  
  // Wenn Bild breiter wie Bildschirm - Objekt auf 90% Bildschirmbreite setzen  
  if( pW > sW ) 
  {
   oW = (sW*90/100);
   obj.style.width    = oW + "px";
   obj.style.left     = (sW-oW)/2 + "px"; 
   obj.style.overflow = "scroll";
  } 
  // Wenn Bild höher wie Bildschirm Objekt auf 90% Bildschirmhöhe setzen  
  if( pH > sH ) 
  {
   oH = (sH*90/100);
   obj.style.height   = oH + "px";
   obj.style.top      = (sH-oH)/2 + "px";      
   obj.style.overflow = "scroll";
   pH = oH;
  }
 
  // Textausgabe, wenn Text übergeben wurde
  if(txt)
  {
   obj.style.height = (pH+20) + "px";  
   document.getElementById('layer_text').innerHTML = txt;
   document.getElementById('layer_text').style.display = "block";
  }
  else
  {
   document.getElementById('layer_text').innerHTML = "";
   document.getElementById('layer_text').style.display = "none";
  }
  // Layer anzeigen
  if (v != 'none') obj.style.display  = v; 
  obj.scrollTop = 1;
 }; 
 tmp.src = img;
 // Layer verbergen
 if (v == 'none') obj.style.display  = v;
 // Layer fixieren
 obj.style.position = "fixed";  
}
//--> 

Hier zu testen:http://www.scc-schwarzheide.de --> Galerie
oder auch hier: http://www.schwarzheide.de - Bildergalerie

Ich denke, da es jetzt läuft kann der Beitrag geschlossen werden.

Thx@all