✔ Tabellenfelder als Links

Gumbo · 21. Mai 2005

Mir fällt gerade ein, dass es besser wäre nur dem .cellA-hover-Selekter diese Eigenschaft zu geben, da Benutzer mit deaktivierter JavaScript-Unterstützung sonst denken könnten, dass die Tabellenzellen Links sind, diese jedoch nicht funktionieren.

Übrigens wollte ich in meinem letzten Beitrag eigentlich Folgendes zitieren: „User agents must ignore a declaration with an illegal value.“

Eistee · 22. Mai 2005

Nochmal danke
Ich habs jetzt so gelöst:

Code:

onmouseover="this.className='cellA-hover'" onmouseout="this.className='cellA'"

Und in der CSS-Datei:
.cella { background-color: #F5F5FF; }
.cellA-hover { background-color: #FFFFFF; cursor: pointer; cursor: hand; }

Funktioniert bestens

@michaelsinterface
Naja, ich muss nicht in jeder Spalte für jenden Monat/Jahr etwas ändern, weil die Kalenderseiten dynamisch mit Templates erzeugt werden

@Gumbo
Ist es schlimm so viele Tabellen zu verwändern/diese zu verschachteln?

Gumbo · 22. Mai 2005

Wieso verwendest du nicht die von mir in meinem Beitrag beschriebene Funktion, die würde das Ganze nur durch Auszeichnung eines weiteren Attributs automatisieren.

Eistee · 24. Mai 2005

Ich hab doch noch einmal eine Frage...

http://www.alkbrueder.de/thwb/calendar.php

Klickt dort mal auf eine Event (z.B. Pfingstkirmes).
Nun solte sich eine PopUp öffnen - soweit so gut

Leider Ändert sich nun aber auch der Inhalt der Kalender-Seite (wegen des onClick-Attributs, nehme ich an)
Letzteres soll genau nicht passieren, wenn explizit auf ein eingetragenes Event geklickt wird.

Lässt sich dieses problem mit onClick irgendwie lösen?

Gumbo · 24. Mai 2005

Probier mal Folgendes:

HTML:

<a href="showevent.php?event=2" onclick="return !window.open(this.href,'show_event','width=400,height=500,scrollbars=yes,menubar=no,toolbar=no,statusbar=no')">Pfingstkirmes</a>

Damit ist der Verweis auch für Benutzer mit deaktivierter JavaScript-Unterstützung zugänglich.

Gumbo · 24. Mai 2005

Noch besser wäre es übrigens, Auszeichnung und Verhalten des Inhalt ebenfalls zu trennen. Dazu wäre nur eine geringe Änderung der von mir beschriebenen Funktion nötig.

Eistee · 25. Mai 2005

Dann erklär mir deine Funktion doch bitte mal etwas genauer

Gumbo · 25. Mai 2005

Mein Vorschlag:

Strukturiere die ganze Tabelle erst einmal semantisch und entferne alle überflüssigen Tags; beispielweise so:

HTML:

<table id="calendar" width="100%">

	<colgroup>
		<col width="14%">
		<col width="14%">
		<col width="14%">
		<col width="14%">
		<col width="14%">
		<col width="14%">
		<col width="14%">
	</colgroup>

	<tbody>
		<tr>
			<th scope="col">Montag</th>
			<th scope="col">Dienstag</th>
			<th scope="col">Mittwoch</th>
			<th scope="col">Donnerstag</th>
			<th scope="col">Freitag</th>
			<th scope="col">Samstag</th>
			<th scope="col">Sonntag</th>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="calendar-sheet"><p class="date">1</p><p class="holiday">Maifeiertag</p></td>
		</tr>
		<tr>
			<td class="calendar-sheet"><p class="date">2</p></td>
			<td class="calendar-sheet"><p class="date">3</p></td>
			<td class="calendar-sheet"><p class="date">4</p></td>
			<td class="calendar-sheet"><p class="date">5</p><p class="holiday">Christi Himmelfahrt</p></td>
			<td class="calendar-sheet"><p class="date">6</p></td>
			<td class="calendar-sheet"><p class="date">7</p></td>
			<td class="calendar-sheet"><p class="date">8</p></td>
		</tr>
		<tr>
			<td class="calendar-sheet"><p class="date">9</p></td>
			<td class="calendar-sheet"><p class="date">10</p></td>
			<td class="calendar-sheet"><p class="date">11</p></td>
			<td class="calendar-sheet"><p class="date">12</p></td>
			<td class="calendar-sheet"><p class="date">13</p></td>
			<td class="calendar-sheet"><p class="date">14</p><ul><li><a href="http://www.alkbrueder.de/thwb/showevent.php?event=2">Pfingstkirmes</a></li></ul></td>
			<td class="calendar-sheet"><p class="date">15</p><ul><li><a href="http://www.alkbrueder.de/thwb/showevent.php?event=9">Pfingstkirmes</a></li></ul></td>
		</tr>
		<tr>
			<td class="calendar-sheet"><p class="date">16</p><p class="holiday">Pfingstmontag</p><ul><li><a href="http://www.alkbrueder.de/thwb/showevent.php?event=10">Pfingstkirmes</a></li></ul></td>
			<td class="calendar-sheet"><p class="date">17</p><ul><li><a href="http://www.alkbrueder.de/thwb/showevent.php?event=11">Pfingstkirmes</a></li></ul></td>
			<td class="calendar-sheet"><p class="date">18</p></td>
			<td class="calendar-sheet"><p class="date">19</p></td>
			<td class="calendar-sheet"><p class="date">20</p><ul><li><a href="http://www.alkbrueder.de/thwb/showevent.php?event=19">Scheiben drehen</a></li></ul></td>
			<td class="calendar-sheet"><p class="date">21</p></td>
			<td class="calendar-sheet"><p class="date">22</p></td>
		</tr>
		<tr>
			<td class="calendar-sheet"><p class="date">23</p></td>
			<td class="calendar-sheet"><p class="date">24</p></td>
			<td class="calendar-sheet"><p class="date" id="current">25</p></td>
			<td class="calendar-sheet"><p class="date">26</p><p class="holiday">Fronleichnam</p></td>
			<td class="calendar-sheet"><p class="date">27</p><ul><li><a href="http://www.alkbrueder.de/thwb/showevent.php?event=20">Testeintrag</a></li></ul></td>
			<td class="calendar-sheet"><p class="date">28</p><ul><li><a href="http://www.alkbrueder.de/thwb/showevent.php?event=13">Estrado-Party</a></li></ul></td>
			<td class="calendar-sheet"><p class="date">29</p></td>
		</tr>
		<tr>
			<td class="calendar-sheet"><p class="date">30</p></td>
			<td class="calendar-sheet"><p class="date">31</p></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

anschließend kannst du folgendes CSS verwenden:

Code:

#calendar td {
	position:		relative;
	height:			5em;
	vertical-align:		top;
}
.calendar-sheet {
	background-color:	#f5f5ff;
}
.calendar-sheet:hover,
.calendar-sheet-hover {
	background-color:	#fff;
}
.calendar-sheet .date,
.calendar-sheet-hover .date {
	width:			3ex;
}
.calendar-sheet .holiday,
.calendar-sheet-hover .holiday {
	margin-top:		-1.2em;
	margin-left:		3ex;
	text-align:		right;
}
.calendar-sheet ul,
.calendar-sheet-hover ul {
	margin:			0;
	list-style:		none;
}

schließlich fügst du mit folgender JavaScrip-Funktion das dynamische Verhalten hinzu:

Code:

function initCalendar() {
	var obj = document.getElementById("calendar").getElementsByTagName("td");
	for(var i=0; i<obj.length; i++) {
		var _currentObject = obj[i];
		if( _currentObject.className == "calendar-sheet" ) {
			_currentObject.onmouseover = new Function("this.className=this.className+'-hover'");
			_currentObject.onmouseout = new Function("this.className='"+_currentObject.className+"'");
			var lnks = _currentObject.getElementsByTagName("a");
			for(var j=0; j<lnks.length; j++) {
				lnks[j].onclick = new Function("return !window.open(this.href, '_blank', 'width=400,height=500,scrollbars=yes,menubar=no,toolbar=no,statusbar=no');");
			}
		}
	}
}
window.onload=initCalendar;

Eistee · 26. Mai 2005

Gleich gehts erstmal in' Biergarten
Werd mich die Tage aber mal dran machen und versuchen, den Kalender deinen Vorschlägen entsprechende umzustrukturieren

qsrs · 27. Mai 2005

Dazu habe ich auch eine Frage. Die eigentlich sinnvolle Option "Link in neuem Fenster öffnen" geht dabei verloren. Auch Shift + Klick funktioniert nicht mehr. Kann man diese Eigenschaften auch für onClick-Aufrufe beibehalten?

✔ Tabellenfelder als Links

Gumbo

Erfahrenes Mitglied

Eistee

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Eistee

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Eistee

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Eistee

Erfahrenes Mitglied

qsrs

Erfahrenes Mitglied

Neue Beiträge