options verstecken ist gar nicht so einfach, auch nicht mit jQuery

Diese Woche musste ich auf Arbeit im Zusammenhang mit einem Projekt ein Formular umsetzen, dass eine Besonderheit hatte: Es bestand aus zwei Selectboxen, die voneinander abhängig waren. D.h. wenn man mit einer Selectbox etwas ausgewählt hat, sollten sich die Optionen der zweiten Selectbox ändern (wegfallen oder dazu kommen). Ich habe mir daraufhin mit jQuery eine Funktion geschrieben, die das für mich erledigt.

Ohne mir groß etwas dabei zu denken, nutzte ich die hide()-Funktion, die jQuery standardmäßig mitbringt. Alles funktionierte einwandfrei in Firefox und da ich davon ausgegangen bin, dass das JavaScript-Framework Cross-Browser-kompatibel ist, teste ich die Funktion nicht in anderen Browsern und kümmerte mich stattdessen erstmal um das Layout. Als alles fertig war, freute ich mich, rechnete meine Zeit ab und widmete mich anderen Tickets.

Gestern Mittag dann erhielt ich den Hinweis, dass die Auswahl der Selectboxen im IE7 nicht funktioniert. Gut dachte ich mir.. schaust es dir mal an.. und tatsächlich: egal was ausgewählt wurde, die zweite Selectbox blieb mit allen Optionen befüllt, es tat sich nichts.

Verdammter Internet Explorer!

.. schoss mir durch den Kopf. Also öffnete ich Opera, Chrome und Safari und testete das Formular dort – wieder nichts. In keinem Browser (außer Firefox) funktionierte die Auswahl. Langsam wurde ich etwas nervös..

Wie löse ich das Problem jetzt ohne viel Aufwand?!

Ich überlegte kurz und dann viel mir die Lösung ein, anstatt die option-Tags zu verstecken, musste ich sie nur deaktivieren. Also hab ich die hide()-Funktion mit attr(‘disabled’,'disabled’) ausgetauscht und schon gings. Yay, der Tag war gerettet!

Merke:

Niemals options versuchen zu verstecken, das funktioniert nicht in allen Browsern, einfach nur deaktivieren!

Wieder etwas dazu gelernt!

Habt ihr schon mal eine Seite mit so einem netten Accordion-Effekt gesehen und euch gefragt wie das geht? Ich erkläre es euch, schaut euch doch aber erstmal die Demo an, damit ihr wisst, was ich meine.

Wie ihr seht, klappt immer der Bereich auf, auf den geklickt wird. Alle anderen Blöcke bleiben dagegen geschlossen oder schließen sich. Wir bedienen uns hier einfach jQuery und schreiben ein paar Zeilen Code, die den gewünschten Accordion-Effekt realisieren.

HTML-Gerüst

Bevor wir anfangen müssen wir unser HTML aber entsprechend vorbereiten..

1
2
3
4

<h3 class="trigger">Accordion Box 3</h3>
<div class="toggle_container">
	<p>Lorem ipsum dolor sit amet...</p>
</div>

Jeder dieser Blöcke besteht aus einer Überschrift, die später anklickbar sein wird und einem Container, der den eigentlichen Inhalt des Blocks enthält. Wichtig ist, dass wir die Klassen trigger den Überschriften und toggle_container den Containern geben, da später unser jQuery-Code an Hand derer die Aktionen ausführt. Es ist also egal, ob die Überschrift eine h1, h2 oder einfach nur ein div ist, wichtig ist die Klasse und dass danach sofort der Container folgt.

jQuery-Code

Nun zum eigentlichen Code. Vergesst aber nicht, dass ihr vor diesem Script die jQuery-Bibliothek in euer Dokument einbinden müsst! Wie das geht, erfahrt ihr auf der offiziellen jQuery-Seite.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready( function() {
	$('.trigger').not('.trigger_active').next('.toggle_container').hide();
	$('.trigger').click( function() {
		var trig = $(this);
		if ( trig.hasClass('trigger_active') ) {
			trig.next('.toggle_container').slideToggle('slow');
			trig.removeClass('trigger_active');
		} else {
			$('.trigger_active').next('.toggle_container').slideToggle('slow');
			$('.trigger_active').removeClass('trigger_active');
			trig.next('.toggle_container').slideToggle('slow');
			trig.addClass('trigger_active');
		};
		return false;
	});
});

Nun zur Erklärung, was da eigentlich abläuft..

1. Erst nachdem das DOM vollständig geladen ist, greift das Script.
2. Schließe alle Container, deren Übschrift nicht die Klasse trigger_active hat.
3. Klickt man auf ein Element der Klasse trigger wird geprüft:
   • Hat es auch die trigger_active-Klasse? Dann mach den darauf folgenden Container zu und entferne die active-Klasse.
   • Ansonsten schließe alle offenen Container und öffne nur den Container, der zur gerade angeklickten Überschrift gehört und gib dieser die active-Klasse.
4. Es wird kein Wert am Ende der Funktion zurückgegeben (sollte eine Überschrift gleichzeitig ein Link sein).

Zu 2.: Stichwort – Accessibility

Das Schließen der Container würde auch über CSS (display:none) gehen aber was ist, wenn JavaScript nicht aktiviert ist? Dann würden die Leute den Inhalt der Container nicht mehr sehen, weil das Accordion nicht funktioniert.

Styling per CSS

Um das Ganze noch abzurunden, hier der CSS-Code der Demo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.trigger {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 1px #fff inset;
	-webkit-box-shadow:0 1px 1px #fff inset;
	box-shadow:0 1px 1px #fff inset;
	background:-moz-linear-gradient(center top, #e9e9e9 50%, #ddd 50%);
	background-color:#ddd;
	border:1px solid #ddd;
	color:#888;
	cursor:pointer;
	margin-bottom:5px;
	padding:5px;
	text-shadow:0 1px 0 #fff;
	width:388px;
}
.trigger_active {
	color:#333;
}
.toggle_container {
	padding:5px 10px;
	width:380px;
}

Wenn ihr das Problem habt, dass die Animation nicht flüssig ist sondern abrupt endet, versucht mal der Klasse trigger_container eine feste Breite zu geben. Damit sollte es klappen.

Allerdings ist das natürlich nur ein sehr rudimentäres Aussehen. Wie wäre es zum Beispiel mit einem Plus- oder Minussymbol, damit Benutzer gleich wissen: “Ah, hier kann ich also etwas auf-/zuklappen”? Eurer Kreativität sind hier natürlich keine Grenzen gesetzt. Viel Spaß mit eurem Accordion.

Heute möchte ich euch gern drei jQuery Knodeschnippsel zeigen, die ich fast bei jedem Projekt benutze oder die zumindest hier und da mal nützlich sein könnten. Alles, was man dafür braucht, ist die aktuelle jQuery Version in seine Seiten einzubinden. Die drei Einzeiler lauten wie folgt:

1. Intelligente Suchleiste
2. Table Zebrastreifen
3. Nach Oben Scrollen

Intelligente Suchleiste

Im folgenden Beispiel ist der jQuery Code direkt in ein input-Tag geschrieben.

1
2
3

<input type="text" id="searchstring" value="Search"
onfocus="if(this.value=='Search') this.value='';" 
onblur="if(this.value=='') this.value='Search';"/>

Was die Suchbar macht:

1. Das Suchfeld wird über das value-Attribut mit dem Begriff “Search” befüllt.
2. Klickt man in das Feld, wird “Search” entfernt und man kann seinen eigenen Suchbegriff eingeben.
3. Wenn etwas anderes als “Search” im Feld steht und man klickt hinein, wird der Cursor hinter das aktuelle Wort gesetzt.
4. Verlässt man das Suchfeld und es befindet sich kein Suchbegriff darin, wird es wieder mit “Search” befüllt.

Table Zebrastreifen

Oftmals will man Tabellenzeilen in sich abwechselnden Farben darstellen. Dazu müsste man den geraden/ungeraden tr-Tags immer eine Klasse geben. Das Problem ist, was macht man, wenn die Tabellen generiert werden? Hier hilft uns jQuery weiter, indem wir sagen: Suche in jeder Tabelle nach allen geraden/ungeraden tr-Tags und gebe ihnen eine CSS Klasse. Folgender Code bewirkt genau das:

1

$("tr:nth-child(odd)").addClass("odd");

Per CSS kann man dann den den Zellen eine andere Hintergrundfarbe geben (hier ein helles grau):

1
2
3

tr.odd td {
    background-color:#e9e9e9;
}

Anmerkung: Das Beispiel durchsucht wirklich alle Tables. Um die Suche einzugrenzen, sollte man vor dem Selektor noch ein weiteres Element schreiben, z.B. “#content” ($(“#content tr:nth-child(odd)”)). Dann werden nur Tables innerhalb des Content-Divs durchsucht und entsprechend angepasst. Weiterhin vergibt der obige Code die Klasse “odd” an alle ungeraden tr-Tags, beginnend also mit dem ersten.

Nach Oben Scrollen

Manchmal gibt es am unteren Ende von Webseiten einen kleinen Link, der einen schnell wieder nach oben bringt. Das ist besonders nützlich, wenn die Seiten sehr lang sind und es eine Zumutung für jeden User wäre, den ganzen Weg mit dem Mausrad zu scrollen (es sei denn, man hat so ein tolles Mausrad von Logitech ). Diese Links heißen meistens “back to top”, “top” oder “nach oben” und mit einem Klick wird man buchstäblich nach oben katapultiert. Um die “Fahrt” etwas angenehmer zu gestalten, kann man jQuery benutzen. Dabei landet man dann nicht mehr sofort ganz oben sondern die Seite wird sehr flott nach oben gescrollt – ganz ohne Mausrad.

1
2
3
4

$('#toplink').click(function(){
$('html, body').animate({scrollTop: '0px'}, 500);
return false;
});

Der HTML-Code dazu:

1

<a href="#" id="toplink">Back to Top</a>

Anmerkung: Die Zahl weiter hinten gibt an, wie lange (in Millisekunden) die Animation – also das Scrollen – dauern soll.

So das wars auch schon wieder. Wer will, kann sich die drei Sachen auch in der Live-Demo mal anschauen und ausprobieren. Kopieren ist natürlich erlaubt und erwünscht

Diese Woche hatte ich auf Arbeit ein ungewöhnliches Problem, mit dem ich an die Grenzen von CSS gestoßen bin. Ich bekam die Aufgabe einige Screendesigns umzusetzen, an sich nichts Ungewöhnliches, allerdings gab es einige Bedingungen bezüglich der Sidebar: ein Widget – also eine Box innerhalb der Sidebar – sollte sich immer am unteren Rand der Sidebar aufhalten, wobei Sidebar und Content immer gleich hoch sein sollten, je nachdem, welches der beiden höher ist.

Das Problem

Ich dachte also erstmal nach, wie ich die beiden Teilprobleme lösen könnte. Eine Box an den unteren Rand einer anderen Box zu schieben ist einfach zu lösen. Die Sidebar bekäme ein position:relative und das Widget position:absolute sowie einen kleinen Wert für bottom. Wie lässt man jedoch Content und Sidebar gleich hoch sein? Dafür gibt es verschiedene Ansätze. Man könnte zum Beispiel eine Tabelle benutzen oder man suggeriert das Ganze (faux columns), indem man eine Hintergrundgrafik benutzt.

Ich konnte keine Tabelle benutzen, weil man position:relative auf td Tags nicht anwenden kann und die andere Variante viel weg, weil ich wirklich zwei gleich hohe DIVs brauchte. Da saß ich also und hatte ein schier unlösbares Problem.

“Man müsste irgendwie abfragen können, wie hoch die beiden DIVs sind und sie dann entsprechend anpassen.”, hab ich mir gedacht und hatte damit die Lösung schon gefunden. Nach Absprache mit einem Kollegen stand fest: Mir bleibt nichts anderes übrig als JavaScript zu benutzen.

Die Lösung

Ich entschied mich für jQuery, das sich in einigen anderen Projekten bereits als extrem nützlich und vielseitig erwiesen hatte. Es ist außerdem sehr einfach zu erlernen und bringt neben einer guten Dokumentation auch viele coole Plugins mit sich. “Die ganze Bibliothek nur für eine simple Abfrage?”, wird sich mancher an dieser Stelle denken. Ja. Natürlich geht das auch mit reinem JavaScript aber da ich jQuery auch noch an anderer Stelle im Template gebraucht habe, wäre es dumm gewesen, die jQuery Funktionen nicht zu nutzen.

Ich habe also die aktuelle jQuery Version eingebunden und mir dann kurz überlegt, was mein Script machen muss:

1. Hol dir die Höhe der Sidebar und die Höhe des Contents
2. Vergleiche beide Werte und bilde das kleinste gemeinsame Vielfache (kgV)
3. Setze die Höhe der beiden DIVs auf das kgV

Die Umsetzung

Soweit zur Theorie, kommen wir zur Praxis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//sync height of Content and Sidebar
function syncheight(){
	//Reset auf 'auto'
	$('#content').height('auto');
	$('#sidebar').height('auto');
 
	//hole aktuelle Werte
	var contentheight = $('#content').height();
	var sidebarheight = $('#sidebar').height();
	var fullheight;
 
	//vergleiche beide Hoehen, bilde kleines gemeinsames Vielfaches
	if (contentheight>=sidebarheight || contentheight==sidebarheight) {
		fullheight = contentheight;
	} else {
		fullheight = sidebarheight;
	};
 
	//setze beide auf gleiche Hoehe
	$('#content').height(fullheight);
	$('#sidebar').height(fullheight);
}

Das ist die ganze Funktion. #content und #sidebar stehen für die ID des Contents bzw. der Sidebar. Hinzu kam noch das Zurücksetzen der beiden Höhen auf den Wert auto. Das ist notwendig, will man später die Funktion in einem anderen JavaScript aufrufen. Möchte man, dass die Funktion automatisch aufgerufen wird, nachdem die Seite geladen ist, muss man die Funktion noch in eine document.ready – Funktion legen:

1
2
3

$(document).ready(function() {
	//hier die Funktion rein
});

Durch diese Funktion wartet der Browser bis die Seite vollständig aufgebaut wurde und führt dann erst das Script aus.

Demo

Mein Problem war gelöst, mein Chef zufrieden und ich denke mal, dem einen oder anderen könnte die kleine Funktion auch helfen.

Viel Spaß wünsch ich damit