Webmatze.de | Webmaster Forum

and_z

wieder Mal ...

Erstmal möchte ich dieses Forum und das Portal allgemein loben, tolle Seite wie ich finde, weiter so!

Ich habe eingentlich ziemlich viel Zeit mit Recherchieren verbracht, komme aber alleine nicht mehr weiter, so habe ich mich entschlossen das Fachpublikum um Rat zu bieten, also euch )). Ich erstelle gerade so eine Art dynamisches Weinachtskalender, da ich aber ein Newbie in Sachen DHTML+CSS & Co. bin, muss ich mir jede Zeile Code hart erarbeiten )).

Auf dieser Seite habe ich den "Easy JavaScript Tooltip"-Tutorial gefunden und ausprobiert (alles hat wunderbar funktioniert), aber wenn ich den Tooltip in mein Script einbinden möchte, kommt es zur folgenden Fehlemeldung: "Error: syntax errorLine: 1, Column: 6 Source Code: showTT(". Ich vermute Mal, dass es höchstwahrscheinlich am dynamischen Aufbau der HTML-Seite liegt, denn dasselbe Code hat für ein statisches

perfekt funktioniert.Ich habe wirklich keine Idee mehr wo der Fehler liegen könnte, denn die Konsolenmeldung sagt nicht gerade viel aus. Hier ist der Quellcode:

<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /><title>tempkalender v.1</title><br /><meta name="GENERATOR" content="Quanta Plus"><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /><br /><style type="text/css"><br />	TABLE {<br />		width:600px;<br />		height:444px;<br />		padding:0px;<br />		border-spacing:0px;		<br />	}<br />	TD {<br />		font-size:20px; <br />		color:red; <br />		text-align:center;<br />		width:100px;<br />		height:111px;<br />		background-repeat:no-repeat;<br />	}<br />	.tooltip {<br />		position:absolute; <br />		display:none; <br />		background-color:#ffffff;<br />		color:#000000;<br />	}<br /></style><br /><script language="javascript" type="text/javascript"><br />//<!-- <br />	var tt = null;<br />	document.onmousemove = updateTT;<br /><br />	function wtoday(){<br />		var tnames = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");<br />		var mnames = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "Nowember", "Dezember");<br />		var now = new Date();<br />		var str = tnames[now.getDay()] + ", " + now.getDate() + ". " + mnames[now.getMonth()] +" " + now.getFullYear();<br />		tt.innerHTML = str;<br />	}<br />	<br />	function updateTT(e){<br />		x = e.pageX;<br />		y = e.pageY;<br />			if(tt){<br />				tt.style.left = (x + 20) + "px";<br />				tt.style.top = (y + 20) + "px";<br />			}<br />	}<br />	<br />	function showTT(id){<br />		var tt = document.getElementById(id);<br />		wtoday(id);<br />		tt.style.display = "block";<br />	}<br />	<br />	function hideTT(){<br />		tt.style.display = "none";<br />	}<br />	<br />	function ctable(){<br />		var str = "<TABLE id='mytab'><TR>";<br />		for(i = 1; i < 25; i++){<br />			str += "<TD id='" + i + "' style='background:url(images/" + i + ".jpg)'";<br />			str += " onmouseover='showTT('tooltip')' onmouseout='hideTT()'>" + i + "</TD>";<br />			if(!(i % 6)){<br />				if(i != 24) { <br />					str += "</TR><TR>";<br />				}<br />				else str += "</TR>";<br />			}<br />		}<br />		document.write(str);<br />		document.write("<div id='tooltip' class='tooltip'></div>");<br />	}<br />	<br />	ctable();<br />//--><br /></script><br /></head><br /><body><br /></body><br /></html>

Würde mich ungemein über Tips freuen!
-Greetz-
and_z

p.s.: habe auch die Forum-Suchfunktion benutzt, aber nichts wirklich passendes gefunden

webmatze

Hallo, habe mir deine Code mal schnell angesehen, und mir ist folgender Fehler in der Funktion ctable() aufgefallen.
str += " onmouseover='showTT('tooltip')' onmouseout='hideTT()'>" + i + "</TD>";
Du solltest diese Zeile besser so schreiben:
str += " onmouseover=\"showTT('tooltip')\" onmouseout='hideTT()'>" + i + "</TD>";
Dann sollte es funktionieren. Das Problem waren die Anführungsstriche!

and_z

webmatze, danke für den Tipp! Ich dachte das mit den Klammern könnte falsch sein, habe aber die backslash-Möglichkeit total vergessen. Das habe ich berichtigt und dann hat die JavaScript-Konsole mir ausgespuckt: "tt has no properties"... hmm... das Ding ist eigentlich global definiert und da hab' ich's gesehen: in der Funktion showTT() habe ich diese globale Variable überlagert (oder so).
var tt = document.getElementById(id);
Schnell das "var" vor dem "tt" weggemacht und es hat gefunzt!! Jetzt kann ich weitermachen!

and_z

Hallo an Alle )

Mein nächstes Problem ist:
Ich habe dynamisch eine Tabelle (id='mytab') ins Dokument geschrieben und den einzelnen Tabellenzellen einfach fortlaufend id's vergeben und möchte gerne die auftretenden Events (z.B. mouseover/out, click usw.) nur auf diese Tabelle beschränken. Z.B. wollte ich ein Mausklick abfangen, die id der Entsprechenden Zelle abfragen und das dazugehöriges Datum ausgeben (wenn id' so und so, dann ist das der Tag ...). Habe schon mehrere Sachen über Eventhandling in Firefox gelesen, aber komme alleine nicht weiter. Erstmal wollte ich es so machen:
document.mytab.onclick = myclick; function myclick(e){ td_id = e.target.id; showDate(td_id); }

Dann habe ich auch so etwas gesehen, weiß aber nicht wie ich in diesem Fall die Referenz auf das Event-Objekt bekomme:
<table id='mytab' onclick='myclick()'> <tr><td>.....</table>

würde mich sehr über Tips freuen!

P.S.: wie gesagt, bin Anfänger in Programmieren

webmatze

Versuche es mal so:
document.getElementById('mytab').onclick = myclick; function myclick(e){ td_id = e.target.id; showDate(td_id); }

Webmatze.de | Webmaster Forum

Willkommen!

Kategorien

Diskussionsteilnehmer

Who's Online (0)