Javascript: 'Uhr' darstellen klappt nicht in IE, Chromium ...

DocJunioR

Aaalsoo

ich hab eine Art Terminkalender bei dem die Stundenblöcke (sind auch noch links) kreisförmig angebracht werden sollen. Dafür hab ich mir ein kleines Javascript gebaut das einfach einen Kreis in ein div malt. Funktionierte so auch ganz gut, im Firefox..
Jetzt muss das Ganze allerdings im ganzen Internet funktionieren. js ist eine Weile her bei mir. Ich kenne die Unterschiede zwischen den einzelnen Engines nicht besonders gut.

Kann mir wer sagen, was ich hier falsch mache, bzw. wie ich's repariere?

hier mein js:

var date = new Date();

/**
 * erstelle die Stundenuhr 
 */ 
function createTimeClock (pDiv) {
		var centerX = parseInt(pDiv.style.width) / 2;
		var centerY = parseInt(pDiv.style.height) / 2;
		log("Div: " + pDiv.id);
		log(" -> div width : " + pDiv.style.width);		
		log(" -> div height : "+centerX+" height : " + centerY); 
		log(" -> time is " + date.getHours());
		pDiv.innerHTML = "";
		for (i = 0; i < 24; i++)  {
			sca = (2 * 3.14159 / 24) * i;
			x = parseInt(centerX + Math.sin(sca) * (centerX - 10)) - 5;
			y = parseInt(centerY + Math.cos(sca) * (centerY - 10)) - 5;
			pDiv.innerHTML += "<div "
				+" style='position:absolute;left:"+x+"px;bottom:"+y+"px'"
				+" class='"+((i == date.getHours()) ?"activetime":"normaltime")+"'"
				+"><a href='java\1:setTime("+i+")>"+(i)+"</a></div>"; 

		}

}

/**
 * rendere die Textinhalte 
 */  
function renderDate() {
        ...
	createTimeClock(document.getElementById('hoursofday'));
        ...
}

Eingebunden wirds in meiner .html so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>unbenannt</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 0.19.1" />
	<link rel="stylesheet" type="text/css" href="terminplaner.css" />
</head>

	<script type="text/javascript" src="terminplaner.js"></script>
<body onload="renderDate();">	
  <div id="format_center" style="margin:0px auto;width:1100px">
 ...
	<div id="timechooser" name="timechooser" style="position:absolute;left:700px;top:0px;width:400px;height:315px;background-color:#808080; background-image:url(grfx/teller_rechts.png)">
		<div id="hoursofday" name="hoursofday" class="clock" style="position:absolute;width:250px;height:250px;left:91px;bottom:30px;"> </div>
	</div>
 ...
  </div>
  <div id="errors" class="errorlog"></div> 
</body>

</html>

bitte HIIEELFEEE ^^

Scheppertreiber

Der Code ist nicht lauffähig.

DocJunioR

Die Aussage ist ungefähr die, die ich höre, wenn hier jemand anruft "Mein Programm geht nicht. Was mach ich falsch?"

Etwas genauer wäre hilfreich..

Dennoch hast du recht. Ich vergaß die Variablen date zu instanziieren. Habs mal repariert. Jetzt *sollte* es laufen.

Die Funktion log kannst du wegwerfen...
oder wie folgt implementieren:

function log (s) {
   document.getElementById("errors").innerHTML += s;
}

Shade Of Mine

+"><a href='java\1:setTime("+i+")>"+(i)+"</a></div>";

finde den (Syntax) Fehler

DocJunioR

''''''''''''!!!

Shade Of Mine

nachtrag:
es ist besser das DOM nur einmal zu ändern, nicht dauernd.
In deinem Beispiel ists nicht so tragisch, aber prinzipiell schreibt man alle DOM Änderungen in eine temporäre Variable und commitet dann einmal. Ist viel schneller und verhindert flackern.

dein doctype ist übrigens auch falsch: du sagst zwar es ist xhtml stricht im doctype aber die dtd sagt transistional. nimm html 4.01 strict. Ist viel besser als xhtml - es hat seinen Grund warum alle heute von HTML 5 und nicht von XHTML 2 reden

und script tags gehören in head oder body. in deinem fall head.

last but not least: statt body onload verwendet man heute domready. Das ist in jeder JS library sowieso schon dabei...

DocJunioR

schankedön für die hinweise
Werd versuchen sie zu beherzigen.