• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JQUERY] [GELÖST] Terminblöcke in Tabelle

mikdoe

mikdoe

Moderator
Guten Morgen!
Hab hier eine Tabelle in die ich Zeitblöcke eintragen will. Dachte mir, dass ich dafür div's mit einer Ein-Punkt-Grafik erstelle und diese mit CSS lang und breit ziehe wie der Zeitblock aussieht. Dafür wollte ich erstmal die Startposition offset ermitteln und daran dann das div heften.
Aber ich scheitere schon im ersten Schritt, die Position der zutreffenden Zeile zu ermitteln, die das Attribut data-zeit mit dem gesuchten Wert hat. Vorhanden ist das Attribut mit dem gesuchten Wert, soviel weiss ich. Zeigt mir undefined an. Wie muss das richtig lauten?
Code: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Terminblöcke</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
	<style type="text/css" scoped>
	body {
		margin:				0px;
		padding:			0px;
		color:				#000000;
		font-family:		"Arial";
		font-size:			12px;
		background-color:	#FFFFFF;
		overflow-y:			scroll;
	}
	.tagtabelle_aussen {
		border:				3px solid black;
	}
	.tagtabelle_ueberschrift {
		font-weight:		bold;
		white-space:		nowrap;
		text-align:			center;
		padding:			5px;
		border-bottom:		2px solid black;
	}
	.tagtabelle_zelle_maname {
		text-align:			center;
		font-weight:		bold;
		border-left:		1px solid black;
	}
	.tagtabelle_zelle_zeit {
		border-top:			1px solid black;
	}
	.tagtabelle_zelle_anzeige {
		border-top:			1px solid black;
		border-left:		1px solid black;
		cursor:				pointer;
	}
	</style>

	<h1 style="padding-top:100px;padding-bottom:100px;">Test Terminblöcke</h1>
	<table id="haupttab" class="tagtabelle_aussen" cellspacing="0" cellpadding="2"><tr><td class="tagtabelle_ueberschrift" colspan="4">Mittwoch, der 15.10.2014</td></tr><tr><td class="tagtabelle_ueberschrift_zeit">Zeit</td><td class="tagtabelle_zelle_maname">User 1</td><td class="tagtabelle_zelle_maname">User 2</td><td class="tagtabelle_zelle_maname">User 3</td></tr><tr data-zeit="420"><td class="tagtabelle_zelle_zeit">07:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="435"><td class="tagtabelle_zelle_zeit">07:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="450"><td class="tagtabelle_zelle_zeit">07:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="465"><td class="tagtabelle_zelle_zeit">07:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="480"><td class="tagtabelle_zelle_zeit">08:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="495"><td class="tagtabelle_zelle_zeit">08:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="510"><td class="tagtabelle_zelle_zeit">08:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="525"><td class="tagtabelle_zelle_zeit">08:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="540"><td class="tagtabelle_zelle_zeit">09:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="555"><td class="tagtabelle_zelle_zeit">09:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="570"><td class="tagtabelle_zelle_zeit">09:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="585"><td class="tagtabelle_zelle_zeit">09:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="600"><td class="tagtabelle_zelle_zeit">10:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="615"><td class="tagtabelle_zelle_zeit">10:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="630"><td class="tagtabelle_zelle_zeit">10:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="645"><td class="tagtabelle_zelle_zeit">10:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="660"><td class="tagtabelle_zelle_zeit">11:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="675"><td class="tagtabelle_zelle_zeit">11:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="690"><td class="tagtabelle_zelle_zeit">11:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="705"><td class="tagtabelle_zelle_zeit">11:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="720"><td class="tagtabelle_zelle_zeit">12:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="735"><td class="tagtabelle_zelle_zeit">12:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="750"><td class="tagtabelle_zelle_zeit">12:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="765"><td class="tagtabelle_zelle_zeit">12:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="780"><td class="tagtabelle_zelle_zeit">13:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="795"><td class="tagtabelle_zelle_zeit">13:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="810"><td class="tagtabelle_zelle_zeit">13:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="825"><td class="tagtabelle_zelle_zeit">13:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="840"><td class="tagtabelle_zelle_zeit">14:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="855"><td class="tagtabelle_zelle_zeit">14:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="870"><td class="tagtabelle_zelle_zeit">14:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="885"><td class="tagtabelle_zelle_zeit">14:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="900"><td class="tagtabelle_zelle_zeit">15:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="915"><td class="tagtabelle_zelle_zeit">15:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="930"><td class="tagtabelle_zelle_zeit">15:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="945"><td class="tagtabelle_zelle_zeit">15:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="960"><td class="tagtabelle_zelle_zeit">16:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="975"><td class="tagtabelle_zelle_zeit">16:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="990"><td class="tagtabelle_zelle_zeit">16:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1005"><td class="tagtabelle_zelle_zeit">16:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1020"><td class="tagtabelle_zelle_zeit">17:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1035"><td class="tagtabelle_zelle_zeit">17:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1050"><td class="tagtabelle_zelle_zeit">17:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1065"><td class="tagtabelle_zelle_zeit">17:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1080"><td class="tagtabelle_zelle_zeit">18:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1095"><td class="tagtabelle_zelle_zeit">18:15</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1110"><td class="tagtabelle_zelle_zeit">18:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1125"><td class="tagtabelle_zelle_zeit">18:45</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr data-zeit="1140"><td class="tagtabelle_zelle_zeit">19:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr></table>

	<script>
		var termine = {
			user1:		{
				term1:		{
					start:		550,	// 9:10
					ende:		620		// 10:20
				}
			}
		};
		var tab_elem = document.getElementById('haupttab');
		function lege_termine(data) {
			jQuery.each(data,function(userid) {
				jQuery.each(data[userid],function(termid,ref) {
					var startzeit = parseInt(data[userid][termid]['start']/15,10)*15;
console.log('suche '+startzeit);
					var offs = jQuery(tab_elem).find('td[data-zeit="'+startzeit+'"]').offset;
console.log(offs.top);
				});
			});
		}
		lege_termine(termine);
	</script>
</body>
</html>
 
Zuletzt bearbeitet:
AW: Terminblöcke in Tabelle

Moin

Warum machst du denn
Code: 
var tab_elem = document.getElementById('haupttab');
var offs = jQuery(tab_elem)...
anstatt gleich var offs = jQuery('#haupttab')...?

Dann haste hier var offs = jQuery(tab_elem).find('td[data-zeit="'+startzeit+'"]').offset; gleich 2 Fehler drinn:
1 - td ist eine Tabellenzelle und dein data-Attribut ist aber in einer Tabellenzeile tr
2 - offset ist keine jQuery-Methode und keine JavaScript-Funktion, denke mal du meintest offset()

Müsste dann also wie filgt aussehen: var offs = jQuery(tab_elem).find('tr[data-zeit="'+startzeit+'"]').offset(); oder var offs = jQuery('#haupttab').find('tr[data-zeit="'+startzeit+'"]').offset();
 
Zuletzt bearbeitet:
AW: Terminblöcke in Tabelle

Danke für die Antwort, das war es natürlich. Hatte td drin, weil ursprünglich das Data Attribut an den Zellen anstatt an den Zeilen hing.

miniA4kuser schrieb:
Warum machst du denn ... anstatt gleich var offs = jQuery('#haupttab')...?
Zum Vergrößern anklicken....
Das ist hier nur ein Hilfskonstrukt für das Forum. Im richtigen Code habe ich die Tabelle als Element von Anfang drin mittels createElement('table')
 
AW: Terminblöcke in Tabelle

Kurze Folgefrage:
Annahme, dass je Zeile der obere Rand die angezeigte Uhrzeit ist. Beispiel: 9:00 Uhr muss in der 9 Uhr Zeile oben beginnen, 9:10 muss vom oberen Rand 2/3 runter und dort beginnen.
Folgender Code setzt die Startzeiten richtig, soweit ich das sehe. Aber wieso funktionieren die Ende-Zeiten bei allen nicht? Wo liegt mein Denkfehler?
Code: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Terminblöcke</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
	<style type="text/css" scoped>
	body {
		margin:				0px;
		padding:			0px;
		color:				#000000;
		font-family:		"Arial";
		font-size:			12px;
		background-color:	#FFFFFF;
		overflow-y:			scroll;
	}
	.tagtabelle_aussen {
		border:				3px solid black;
	}
	.tagtabelle_ueberschrift {
		font-weight:		bold;
		white-space:		nowrap;
		text-align:			center;
		padding:			5px;
		border-bottom:		2px solid black;
	}
	.tagtabelle_zelle_maname {
		text-align:			center;
		font-weight:		bold;
		border-left:		1px solid black;
		border-bottom:		2px solid black;
	}
	.tagtabelle_ueberschrift_zeit {
		padding-left:		5px;
		padding-right:		5px;
		border-bottom:		2px solid black;
	}
	.tagtabelle_zelle_zeit {
	}
	.tagtabelle_zelle_zeit_abwechslung {
		background-color:	#EEEEEE;
	}
	.tagtabelle_zelle_anzeige {
		border-left:		1px solid black;
		cursor:				pointer;
	}
	.tagtabelle_zelle_anzeige_abwechslung {
		border-left:		1px solid #005482;
		cursor:				pointer;
		background-color:	#EEEEEE;
	}
	</style>

	<h1 style="padding-top:100px;padding-bottom:100px;">Test Terminblöcke</h1>
	<table class="tagtabelle_aussen" cellspacing="0" cellpadding="2"><tr><td class="tagtabelle_ueberschrift" colspan="4">Mittwoch, der 15.10.2014</td></tr><tr><td class="tagtabelle_ueberschrift_zeit">Zeit</td><td class="tagtabelle_zelle_maname" data-maid="1">User 1</td><td class="tagtabelle_zelle_maname" data-maid="3">User 2</td><td class="tagtabelle_zelle_maname" data-maid="2">User 3</td></tr><tr style="line-height: 30px;" data-zeit="420"><td class="tagtabelle_zelle_zeit">07:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="435"><td class="tagtabelle_zelle_zeit_abwechslung">07:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="450"><td class="tagtabelle_zelle_zeit">07:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="465"><td class="tagtabelle_zelle_zeit_abwechslung">07:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="480"><td class="tagtabelle_zelle_zeit">08:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="495"><td class="tagtabelle_zelle_zeit_abwechslung">08:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="510"><td class="tagtabelle_zelle_zeit">08:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="525"><td class="tagtabelle_zelle_zeit_abwechslung">08:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="540"><td class="tagtabelle_zelle_zeit">09:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="555"><td class="tagtabelle_zelle_zeit_abwechslung">09:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="570"><td class="tagtabelle_zelle_zeit">09:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="585"><td class="tagtabelle_zelle_zeit_abwechslung">09:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="600"><td class="tagtabelle_zelle_zeit">10:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="615"><td class="tagtabelle_zelle_zeit_abwechslung">10:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="630"><td class="tagtabelle_zelle_zeit">10:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="645"><td class="tagtabelle_zelle_zeit_abwechslung">10:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="660"><td class="tagtabelle_zelle_zeit">11:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="675"><td class="tagtabelle_zelle_zeit_abwechslung">11:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="690"><td class="tagtabelle_zelle_zeit">11:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="705"><td class="tagtabelle_zelle_zeit_abwechslung">11:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="720"><td class="tagtabelle_zelle_zeit">12:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="735"><td class="tagtabelle_zelle_zeit_abwechslung">12:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="750"><td class="tagtabelle_zelle_zeit">12:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="765"><td class="tagtabelle_zelle_zeit_abwechslung">12:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="780"><td class="tagtabelle_zelle_zeit">13:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="795"><td class="tagtabelle_zelle_zeit_abwechslung">13:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="810"><td class="tagtabelle_zelle_zeit">13:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="825"><td class="tagtabelle_zelle_zeit_abwechslung">13:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="840"><td class="tagtabelle_zelle_zeit">14:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="855"><td class="tagtabelle_zelle_zeit_abwechslung">14:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="870"><td class="tagtabelle_zelle_zeit">14:30</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="885"><td class="tagtabelle_zelle_zeit_abwechslung">14:45</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="900"><td class="tagtabelle_zelle_zeit">15:00</td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige" style="width: 128px;"> </td></tr><tr style="line-height: 30px;" data-zeit="915"><td class="tagtabelle_zelle_zeit_abwechslung">15:15</td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td><td class="tagtabelle_zelle_anzeige_abwechslung" style="width: 128px;"> </td></tr></table>

	<script>
		var data = {
			img_pfad	: 'http://mikdoe.host-ed.me/images',
			termine		: {
				1:			{				// User
					1:			{			// Termin
						start:		540,	// 9:00
						ende:		600		// 10:00
					},
					2:			{			// Termin
						start:		735,	// 12:15
						ende:		825		// 13:45
					}
				},
				2:			{
					1:			{			// Termin
						start:		855,	// 14:15
						ende:		915	// 15:15
					}
				}
			}
		};

		var tab_elem = document.getElementsByTagName('table')[0];
		function lege_termine(data) {
			var multiplikator = 2;
			jQuery.each(data['termine'],function(userid) {
console.log('bearbeite User '+userid);
				jQuery.each(data['termine'][userid],function(termid,ref) {
console.log('bearbeite Termin ID '+termid);
					var startzeit = parseInt(data['termine'][userid][termid]['start']/15,10)*15;
console.log('Startzeit Zeile: '+startzeit);
					var offs = jQuery(tab_elem).find('tr[data-zeit="'+startzeit+'"]').offset();
					var pos_y = parseInt(offs.top,10)+(data['termine'][userid][termid]['start']-startzeit)*multiplikator;
console.log('Y Koordinate: '+pos_y);
					var offs = jQuery(tab_elem).find('td[data-maid="'+userid+'"]').offset();
					var pos_x = parseInt(offs.left,10);
console.log('X Koordinate: '+pos_x);
					var dauer_in_px = parseInt((data['termine'][userid][termid]['ende']-data['termine'][userid][termid]['start'])*multiplikator,10);
console.log('Dauer: '+dauer_in_px);
					var balken_img = document.createElement('img');
					balken_img.src = data['img_pfad']+'/trans.gif';
					balken_img.style.width = '20px';
					balken_img.style.height = dauer_in_px+'px';
					balken_img.style.backgroundColor = 'red';
					balken_img.style.top = pos_y+'px';
					balken_img.style.left = pos_x+'px';
					balken_img.style.position = 'absolute';
					var balken_div = document.createElement('div');
					balken_div.appendChild(balken_img);

					tab_elem.appendChild(balken_div);
				});
			});
		}
		lege_termine(data);
	</script>
</body>
</html>
 
AW: Terminblöcke in Tabelle

Das wird daran liegen, das du die Grafikhöhe anhand der Minuten ausrechnest ohne zu beachten, wie viele Pixel einem 15-Minuten-Block entsprechen. Daher würde ich einen anderen Ansatz probieren, der auch dieses berücksichtigt:
Code: 
		var data = {
			img_pfad	: 'http://mikdoe.host-ed.me/images',
			termine		: {
				1:			{				// User
					1:			{			// Termin
						start:		540,	// 9:00		540
						ende:		600		// 10:00	600
					},
					2:			{			// Termin
						start:		735,	// 12:15
						ende:		825		// 13:45
					}
				},
				2:			{
					1:			{			// Termin
						start:		855,	// 14:15
						ende:		915		// 15:15
					}
				}
			}
		};

		var tab_elem = document.getElementsByTagName('table')[0];
		function lege_termine(data) {
			var multiplikator = 2;
			jQuery.each(data['termine'],function(userid) {
console.log('################################################################################');
console.log('bearbeite User '+userid);
				jQuery.each(data['termine'][userid],function(termid,ref) {
					var startzeit,
						endzeit,
						startZeileOffsetTop,
						startZeileHoehe,
						endZeileOffsetTop,
						endZeileHoehe,
						imageOffsetTop,
						imageOffsetLeft,
						imageHoehe,
						balken_div,
						balken_img;

console.log('--------------------------------------------------------------------------------');
console.log('bearbeite Termin ID '+termid);
					startzeit = Math.floor(data['termine'][userid][termid]['start'] / 15) * 15;
					endzeit = Math.floor(data['termine'][userid][termid]['ende'] / 15) * 15;
console.log('Startzeit: ' + startzeit);
console.log('Endzeit: ' + endzeit);

					startZeileOffsetTop = jQuery(tab_elem).find('tr[data-zeit="' + startzeit + '"]').offset().top;
					startZeileHoehe = jQuery(tab_elem).find('tr[data-zeit="' + startzeit + '"]').height();
console.log('Startzeile offset top: ' + startZeileOffsetTop);
console.log('Startzeile Höhe: ' + startZeileHoehe);

					endZeileOffsetTop = jQuery(tab_elem).find('tr[data-zeit="' + endzeit + '"]').offset().top;
					endZeileHoehe = jQuery(tab_elem).find('tr[data-zeit="' + endzeit + '"]').height();
console.log('Endzeile offset top: ' + endZeileOffsetTop);
console.log('Endzeile Höhe: ' + endZeileHoehe);

					imageOffsetLeft = jQuery(tab_elem).find('td[data-maid="' + userid + '"]').offset().left;
console.log('Image offset left: ' + imageOffsetLeft);

					imageOffsetTop = startZeileOffsetTop + (startZeileHoehe / 15 * (data['termine'][userid][termid]['start'] - startzeit));
console.log('Image offset top: ' + imageOffsetTop);

					imageHoehe = (endZeileOffsetTop + (endZeileHoehe / 15 * (data['termine'][userid][termid]['ende'] - endzeit))) - imageOffsetTop;
console.log('Image Höhe: ' + imageHoehe);

					balken_img = document.createElement('img');
					balken_img.src = data['img_pfad'] + '/trans.gif';
					balken_img.style.width = '20px';
					balken_img.style.height = imageHoehe + 'px';
					balken_img.style.backgroundColor = 'red';
					balken_img.style.top = imageOffsetTop + 'px';
					balken_img.style.left = imageOffsetLeft + 'px';
					balken_img.style.position = 'absolute';

					balken_div = document.createElement('div');
					balken_div.appendChild(balken_img);

					tab_elem.appendChild(balken_div);
				});
			});
		}
		lege_termine(data);

Auch frage ich mich was du mit diesem multiplikator vorhast, oder was diese Berechnung var startzeit = parseInt(data['termine'][userid][termid]['start']/15,10)*15; darstellen soll?
Denke mal du siehst gerade den Wald vor lauter Bämen nicht... ;)
 
AW: Terminblöcke in Tabelle

miniA4kuser schrieb:
Das wird daran liegen, das du die Grafikhöhe anhand der Minuten ausrechnest ohne zu beachten, wie viele Pixel einem 15-Minuten-Block entsprechen.
Zum Vergrößern anklicken....
Dafür war nämlich eigentlich mein multiplikator 2 zuständig. 2 deshalb, weil 15 Minuten einer Höhe von 30 Pixeln entspricht. Und kaum setze ich in meinem Code das cellpadding der Tabelle auf 0 anstatt auf 2 funktioniert auch mein Code.
Danke, dass du mich drauf gebracht hast. Die Zeilenhöhenermittlung übernehme ich von dir. Ist besser als mit Multiplikator.

miniA4kuser schrieb:
Auch frage ich mich was du mit diesem multiplikator vorhast
Zum Vergrößern anklicken....
Wie gesagt, der dient der Höhenberechnung.

miniA4kuser schrieb:
oder was diese Berechnung var startzeit = parseInt(data['termine'][userid][termid]['start']/15,10)*15; darstellen soll?
Zum Vergrößern anklicken....
Das dient dem Startpunkt. Hast du genau so gemacht, nur dass du Math.floor verwendest, um die nächstniedrigere Ganzzahl zu ermitteln. Hab ich geändert.

Auf jeden Fall vielen Dank miniA4kuser!
 
AW: Terminblöcke in Tabelle

Jetzt hab ich das ganze in meinen Kalender eingebaut wie folgt (nur der untere Code, am restl. Code nichts geändert):
HTML: 
	jQuery.each(data['termine'],function(userid) {
		jQuery.each(data['termine'][userid],function(termid) {
			var startzeit = Math.floor(data['termine'][userid][termid]['start']/data['raster_schritt'])*data['raster_schritt'];
			var endzeit = Math.floor(data['termine'][userid][termid]['ende']/data['raster_schritt'])*data['raster_schritt'];
			var startZeileOffsetTop = Math.floor(jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+startzeit+'"]').offset().top);
console.log('startZeileOffsetTop von '+(startzeit/60)+' Uhr ist: '+startZeileOffsetTop);
console.log('Tabelle beginnt bei: '+jQuery(data['akt_tag_tab_obj']).offset().top)
			var startZeileHoehe = Math.floor(jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+startzeit+'"]').height());
console.log('Zeilenhöhe von Uhrzeit '+(startzeit/60)+' Uhr ist: '+startZeileHoehe);
			var endZeileOffsetTop = Math.floor(jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+endzeit+'"]').offset().top);
			var endZeileHoehe = Math.floor(jQuery(data['akt_tag_tab_obj']).find('tr[data-zeit="'+endzeit+'"]').height());
			var imageOffsetLeft = Math.floor(jQuery(data['akt_tag_tab_obj']).find('td[data-maid="'+userid+'"]').offset().left);
			var imageOffsetTop = Math.floor(startZeileOffsetTop+(startZeileHoehe/data['raster_schritt']*(data['termine'][userid][termid]['start']-startzeit)));
console.log('css "top" liegt bei: '+imageOffsetTop);
			var imageHoehe = Math.floor((endZeileOffsetTop+(endZeileHoehe/data['raster_schritt']*(data['termine'][userid][termid]['ende']-endzeit)))-imageOffsetTop);

			var balken_img = document.createElement('img');
			balken_img.src = data['image_pfad']+'/trans.gif';
			balken_img.style.width = '20px';
			balken_img.style.height = imageHoehe+'px';
			balken_img.style.backgroundColor = 'red';
			balken_img.style.top = imageOffsetTop+'px';
			balken_img.style.left = imageOffsetLeft+'px';
			balken_img.style.position = 'absolute';

			var balken_div = document.createElement('div');
			balken_div.appendChild(balken_img);

			data['akt_tag_tab_obj'].appendChild(balken_div);
		});
	});

Das bringt folgendes Resultat im Gesamtkontext (im unteren Teil die Konsole des IE11 mit den Debug Ausgaben):
problem_zeitbloecke2.png

Was ich nicht verstehe: Wenn doch die Tabelle bei Pixel 496 beginnt und der Zeitblock soll bei Pixel 542 beginnen, die 46 Pixel mal für die Kopfzeile der Tabelle genommen, wieso fängt der rote Block erst bei kurz nach 8:15 Uhr anstatt ganz oben bei 7:00 Uhr an?
Hab schon an den verschiedensten Stellen mit position:relative und position:absolute experimentiert, das macht es aber alles schlimmer, dann wandert der Block nähmlich noch weiter runter.
Das gesamte HTML kann ich nicht mal eben so kopieren und einfügen, weil das alles dynamisch per JS erzeugt wird und auch Teile drin sind, die nicht gepostet werden sollen. Daher meine Frage, ob man mir zumindest einen Tipp geben kann, wo ich den Fehler suchen bzw. was ich noch probieren kann?
 
AW: Terminblöcke in Tabelle

Schuldiger gefunden: Aus dem Template kommt nochmal ein div ganz außen herum:
HTML: 
	<div style="position:absolute;top:155px;left:8px;right:8px;width:auto;height:auto;z-index:1;" id="aeusseres_template_div">
		<h1 style="padding-top:100px;padding-bottom:100px;">Test Terminblöcke</h1>
		<div id="taganzeige">
			<table class="tagtabelle_aussen" cellspacing="0" cellpadding="0"><tr><td class="tagtabelle_ueberschrift" colspan="4">Mittwoch, der 15.10.2014</td></tr> .....und so weiter
		</div>
	</div>

Angenommen, ich hätte auf aeusseres_template_div keinen Einfluss sondern nur auf taganzeige und tiefer.
Was müsste ich dann tun, damit die Blöcke richtig beginnen? Überall 155 Pixel abziehen klappt zwar, möchte ich aber nicht, falls sich das Template verändert.
 
AW: Terminblöcke in Tabelle

Ich glaub, ich habs.
Einfach im jQuery .position() anstatt .offset() verwenden :)
Dann wird relativ zum Div aeusseres_template_div gemessen.
 
AW: Terminblöcke in Tabelle

Oder über eine Hilfsfunktion ohne jQuery:
Code: 
		function findPos(obj) {
			var curleft = curtop = comstyle = 0;

			if (obj.offsetParent) {
				do {
					if (window.getComputedStyle) {
						comstyle = window.getComputedStyle(obj, null).getPropertyValue('position');
					} else if (obj.currentStyle) {
						try {
							comstyle = obj.currentStyle('position');
						} catch (e) {}
					}
					if (comstyle !== 'relative' && comstyle !== 'absolute' && comstyle !== 'fixed') {
						curleft += obj.offsetLeft;
						curtop += obj.offsetTop;
					}
				} while (obj = obj.offsetParent);
			}
			return {
				left: curleft,
				top: curtop
			};
		}

Aufgerufen via startZeileOffsetTop = findPos(jQuery(tab_elem).find('tr[data-zeit="' + startzeit + '"]')[0]).top;
 
Hierzu noch eine Frage: Gibt es eigentlich mittlerweile mit CSS die Möglichkeit, schraffierte Flächen darzustellen ohne dafür eine Grafik bauen zu müssen? Ich möchte bestimmte Zeiten in einem solchen Balken darstellen. Muss auch nicht zwingend schraffiert sein. Halt irgendwie besonders, damit man es gut unterscheiden kann von den übrigen einfarbigen Balken.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben