CSS Eigenschaft auslesen klappt nicht

E

EIS-TEE

PHP-MySQLi Skill:13%
Hallo,

der ganze // Box größe der Mitte anpassen // funktioniert nicht, was mach ich falsch ?

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Weite und Höhe berechnen</title>

   <style type="text/css">
   
      .chat_fenster{
	  background-color:#FF9900;
	  border:#FF6600 1px solid;
	  width:400px;
	  height:300px;
	  display:none;
	  position:absolute;
	  }
   
   </style>

   <script language="JavaScript">
     
	  breite = window.innerWidth; // Weite des Browser Fenster Abfragen //
   
      hoehe = window.innerHeight;  // Höhe des Browser Fenster Abfragen  //
   
      breite /= 2; hoehe /= 2;     // Werte durch zwei Teilen            //
      
	  function chat_oeffnen(){
	  
	     // Box größe der Mitte anpassen //
		 
		 chat_weite = document.getElementById("chat").style.width;
		 
		 chat_weite /=2;
		 
		 end_wert_weite = chat_weite - breite;
		 
		 chat_höhe = document.getElementById("chat").style.width;
		 
		 chat_höhe /=2;
		 
		 end_wert_höhe = chat_höhe - höhe;
		 
		 
		 
         document.getElementById("chat").style.display = "block";   // Chat Fenster sichtbar machen  //
		 
		 document.getElementById("chat").style.left = end_wert_weite + "px";     // Mittig Positionieren von left //
		 
		 document.getElementById("chat").style.top = end_wert_höhe + "px";       // Mittig positionieren von oben //
		
	  }
	 
	 
   </script>
</head>

<body>
   
   <div id="chat" class="chat_fenster">Hallo</div>
   
   <button onclick="chat_oeffnen()">Chat Öffnen</button>

</body>
</html>
 
Hi EIS-TEE,

1. existiert keine Variable namens höhe, das sollte hoehe heißen.
2. ist die Formel mit der du die Position ermittelst, nicht korrekt. Du ziehst die halbe Fensterbreite vom halben Chatfenster ab und landest so im Minusbereich, das muss ungekehrt sein. Natürlich auch analog zur Höhe.
3. ermittelst du erst die Höhe und Breit vom Chatfenster und dann erzeugst du sie, das muss ebenfalls umgekehrt sein, da zu dem Zeitpunkt das Chatfenster noch gar nicht exstiert.

Also der korrekte Quellcode sieht dann so aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Weite und Höhe berechnen</title>

   <style type="text/css">
   
      .chat_fenster{
	  background-color:#FF9900;
	  border:#FF6600 1px solid;
	  width:400px;
	  height:300px;
	  display:none;
	  position:absolute;
	  }
   
   </style>

   <script language="JavaScript">
     
	  breite = window.innerWidth; // Weite des Browser Fenster Abfragen //
   
      hoehe = window.innerHeight;  // Höhe des Browser Fenster Abfragen  //
   
      breite /= 2; hoehe /= 2;     // Werte durch zwei Teilen            //

		
      
	  function chat_oeffnen(){

	document.getElementById("chat").style.display = "block";   // Chat Fenster sichtbar machen  //

	  
	     // Box größe der Mitte anpassen //

		chat_weite = document.getElementById("chat").offsetWidth;
		
		 chat_weite /=2;
		 
		 end_wert_weite =  breite - chat_weite;
		 
		 chat_hoehe = document.getElementById("chat").offsetHeight;
		 
		 chat_hoehe /=2;
		 
		 end_wert_hoehe = hoehe - chat_hoehe;

		 
		 
		 
		 document.getElementById("chat").style.left = end_wert_weite + "px";     // Mittig Positionieren von left //
		 
		 document.getElementById("chat").style.top = end_wert_hoehe + "px";       // Mittig positionieren von oben //
		
	  }
	 
	 
   </script>
</head>

<body>

<div id="chat" class="chat_fenster">Hallo</div>   
   
   <button onclick="chat_oeffnen()">Chat Öffnen</button>

</body>
</html>

Ich hoffe, dass es dir weiterhilft.

Gruß, Adnan


P.S.: Es wäre gut, wenn du mal eine Rückmeldung geben würdest. Ich würde mich über Bewertung freuen, weil ansonsten macht es keinen Spaß zu helfen, ohne irgend ein Feedback.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück