# Popup automatisch an Bildgröße anpassen



## monalisa (24. September 2003)

Hallo!

Brauche mal einen Rat: 

Ich möchte ein Popup basteln in dem oben ein Logo, dadrunter ein Bild und ein "Schließen"-Button sind. Die Größe des Popups soll sich automatisch an die Größe (Breite) des Bildes in der Mitte anpassen. 

Hat irgend jemand einen Tipp für mich?

Gruß + danke,
monalisa


----------



## MiLa (24. September 2003)

Du musst mit Javascript die breite und die höhe des Bildes auslesen, und dementsprechend das Popup starten...

Guck mal hier...hat mein http://www.google.de ausgespuckt, müsste eigendlich das stehen, was du brauchst 

http://www.rzuser.uni-heidelberg.de/~x02/html/tdch.htm

Grüße von da Larsi 

[Edit: hatte dei Adresse vergessen ]

[Edit: Mod: .kleine freundliche "Anpassung" vorgenommen  Thomas/Cutti]


----------



## Sven Mintel (24. September 2003)

Hi,monalisa
du könntest es so machen:

```
<script type="text/javascript">
<!--
mW=30;//Zusätzliche Breite
mH=60;//Zusätzliche Hoehe
function winResize()
{
var wH=dH=wW=dW=0;
IE=(document.all&&!window.opera);
if(IE)
	{
	wW=document.body.offsetWidth;
	wH=document.body.offsetHeight;
	}
else
	{
	wW=window.innerWidth;
	wH=window.innerHeight;
	}
i0=document.images[0];
i1=document.images[1];
dW=i0.width;if(dW<i1.width){dW=i1.width;}dW=dW+mW;
dH=i0.height+i1.height+mH;
diffW=dW-wW;
diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
</script>
```
es berechnet die Fenstergrösse aus der Grösse von Banner und Bild.
(zuzüglich eines von dir einzusetzenden Wertes...bei mW + mH)....da musst du angeben,wieviel
Platz unabhängig von den Bildern noch verbraucht wird,...für den Button,etwaige Rahmen usw.....musste halt
ausprobieren,solange,bis keine Scrollbar mehr erscheint.

Dann wird der ermitelte Wert mit der Fenstergrösse verglichen und selbiges entsprechend resized.


----------



## MiLa (24. September 2003)

Mensch, lasst die Leute doch mal selbst denken 

Nicht immer gleich Lösung vorknallen...ein paar Hinweise...und denn geht das


----------



## monalisa (24. September 2003)

@ fatalus

Kann es sein, das deine Funktion die erste Grafik aus dem Quelltext nimmt? - Die ist nämlich bei mir ein blank.gif und das Popup winzig.  

Funktioniert deine Funktion auch für Netscape ab 4.7?

Danke!


----------



## MiLa (24. September 2003)

Tja, denn doch lieber selbst machen 

Will ja nich gemein sein/nerven, aber das musste ich einfach mal loswerden


----------



## Sven Mintel (24. September 2003)

@monalisa
....ja,die Bilder holt es sich aus dem Quelltext.....ich denk die stehen da drinne...
1.Logo
2.Bild
?
Es funktioniert auch in NN4.7 

@Lars
warum beschränkst du deine Einwürfe nicht einfach aufs posten von wenig hilfreichen Links


----------



## monalisa (24. September 2003)

@ faltalus:

So hier der relevante Teil zum angucken:

<head><script language="JavaScript" type="text/javascript">
<!--
mW=30;//Zusätzliche Breite
mH=60;//Zusätzliche Hoehe
function winResize()
{
var wH=dH=wW=dW=0;
IE=(document.all&&!window.opera);
if(IE)
	{
	wW=document.body.offsetWidth;
	wH=document.body.offsetHeight;
	}
else
	{
	wW=window.innerWidth;
	wH=window.innerHeight;
	}
i0=document.images[0];
i1=document.images[1];
dW=i0.width;if(dW<i1.width){dW=i1.width;}dW=dW+mW;
dH=i0.height+i1.height+mH;
diffW=dW-wW;
diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
</script>
</head>
<body style="background-image: url(/global_images/header.gif); background-repeat: repeat-x; background-color:#cdd7d7" onload="winResize();">
<table width="100%" height="60" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="40">&nbsp;</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" width="100%">
  <tr> 
    <td width="19"><img src="blank.gif" width="1" height="1"></td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td width="19"><img src="blank.gif" width="19" height="1"></td>
    <td> 
      <table border="0" cellspacing="0" cellpadding="0" width="100%">
        <tr> 
          <td colspan="2"> <img src="blank.gif" width="1" height="10"></td>
        </tr>
        <tr> 
          <td><img src="test.jpg " width="100" height="190" alt="" border="0"></td>
        <tr> 
          <td colspan="2"><img src="blank.gif" width="1" height="10"></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr> 
    <td width="19"><img src="blank.gif" width="1" height="1"></td>
    <td align="right"><a href="javascript:window.close();">schlie&szlig;en</a>&nbsp;&nbsp;&nbsp;</td>
  </tr>
  <tr>
    <td width="19">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>

Das Bild an dem die Größe angepasst werden soll ist in diesem Fall test.jpg. Irgend wie funktioniert das noch nicht richtig.

Danke, bist meine Rettung!


----------



## Sven Mintel (24. September 2003)

Alles Klar...das konnte natürlich nicht gehen,dein Logo steht ja nicht als <img> in der Seite,
und das Testbild nicht da,wo ich dachte 
Dann machs so:

```
<script type="text/javascript">
<!--
mW=75;//Zusätzliche Breite
mH=165;//Zusätzliche Hoehe
function winResize()
{
var wH=dH=wW=dW=0;
IE=(document.all&&!window.opera);
if(IE)
{
wW=document.body.offsetWidth;
wH=document.body.offsetHeight;
//document.body.scroll='no';
}
else
{
wW=window.innerWidth;
wH=window.innerHeight;
}
i0=document.bild;
dW=i0.width+mW;
dH=i0.height+mH;
diffW=dW-wW;
diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
</script>
```
Deinem Testbild gib den Namen 'bild',dann kommt nix durcheinander,wenn du noch andere Bilder in die Seite einfügst:

```
<img src="test.jpg " width="100" height="190" alt="" border="0"name="bild">
```

Ganz oben im Skript kannst du dann wie erwähnt bei 'mW' und 'mH' je nach Bedarf die Fenstergrösse noch verändern,wenn mehr Inhalt in die Seite kommt.
Mit dem was momentan drinnen steht,kommts aber hin


----------



## monalisa (26. September 2003)

Hallo noch mal!

Habe das Javascript jetzt eingebaut und es funktioniert auch wunderbar für den IE. Leider brauche ich für den Netscape noch eine vertikale Scrollbar. 

Hast da noch mal jemand einen Tipp   

<script language="JavaScript" type="text/javascript">
 <!--
 mW=65;//Zusätzliche Breite
 mH=130;//Zusätzliche Hoehe
 function winResize()
  {
 var wH=dH=wW=dW=0;
 IE=(document.all&&!window.opera);
 if(IE)
  {
 wW=document.body.offsetWidth;
 wH=document.body.offsetHeight;
 document.body.scroll='auto';
  }
 else
  {
 wW=window.innerWidth;
 wH=window.innerHeight;
  }
 i0=document.bild;
 dW=i0.width+mW;
 dH=i0.height+mH;
 diffW=dW-wW;
 diffH=dH-wH;
window.resizeBy(diffW,diffH);
}
window.onload=winResize;
//-->
 </script>

Dickes Danke!


----------



## Sven Mintel (26. September 2003)

schreib im <body> Tag des Popup mal noch folgendes hinein:

```
marginheight="0"marginwidth="0"
```
Dadurch entfernst du im Netscape den Standard-Rahmen des <body>


----------



## monalisa (26. September 2003)

@fatalus:

Habe ich schon gemacht. Habe im Body-Tag eingetragen: 

leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

Mein Problem ist: leider soll jetzt doch unter das Bild noch Text. Beim IE wird der Scrollbar automatisch eingeblendet aber beim Netscape klappt das einfach nicht...


----------



## MiLa (26. September 2003)

In den <body> -> scroll="auto"

Hilft das ? ;-)


----------



## Sven Mintel (26. September 2003)

"scroll" hilft da nicht weiter,das ist ein IE-eigenes Attribut.

Wie öffnest du denn das Popupfenster?
Ich tippe mal,per window.open(). Wenn ja,musst du dort im Funktionsaufruf den 
Parameter 

```
scrollbars=yes
```
angeben.


----------



## monalisa (26. September 2003)

Jaaaa. Das wars, jetzt ist es perfekt!

Sorry, da habe ich wohl irgend wie auf  der Leitung gestanden.

Vielen Dank für die tolle Hilfe!

Gruß,
monalisa


----------



## minimaldata (13. Januar 2005)

funktioniert dieses Scribt auch auf dem Safari?`


----------



## Sven Mintel (13. Januar 2005)

probiers aus, dann weisst du es


----------



## vquicksilver (16. Februar 2005)

Super Script  danke dafür


----------

