StyleSwitcher - aufgepasst: jQuery machts easy!

[Heglanx]

Hallo liebe Freunde des klassischen Webdesigns.
Style-Switcher. Ein Usebilitythema. Ältere Leute die gerne die Schriftgrösse per Knopfdruck vergrössern wollen. Kann den Einen oder Anderen mal schnell ins Schwitzen bringen.
Eine wirklich geniale und so dermassen einfache Methode habe ich noch nie gesehen. Ich bin per Zufall darüber gestolpert und hoffe, dass dieser Thread auf immer und ewig im Web existent bleibt.

jQuery-Code (die eigentliche Funktion)

jQuery(document).ready(function(){
	var contentarea = jQuery('div#content');
	var num_ee = contentarea.css('font-size');
	var num_e = parseFloat(num_ee, 10);
	jQuery("a.fchange").click(function() {
		var currentSize = contentarea.css('font-size');
		var num = parseFloat(currentSize, 10);
		var unit = currentSize.slice(-2);
		if (this.id == 'linkLarge'){
			num = num * 1.2;
		} else if (this.id == 'linkSmall') {
			num = num / 1.2;
		} else if (this.id == 'linkDefault') {
			num = num_e;
		}
		contentarea.css('font-size', num + unit);
   		return false;
	});
});

Die Ansteuerung im Body per a-Tag

<a class="fchange" id="linkLarge" href="javascript:void(0);"><img src="uploads/tf/text-bigger.gif" alt="Größere Schriftgröße" title="Größere Schriftgröße" border="0" /></a>
<a class="fchange" id="linkSmall" href="javascript:void(0);"><img src="uploads/tf/text-smaller.gif" alt="Kleinere Schriftgröße" title="Kleinere Schriftgröße" border="0" /></a>
<a class="fchange" id="linkDefault" href="javascript:void(0);"><img src="uploads/tf/text-default.gif" alt="Normale Schriftgröße" title="Normale Schriftgröße" border="0" /></a>

Was man dafür noch benötigt: die jQuery-Bibliothek (www.jquery.com). Im Head einbinden und fertig. Das noch genialere daran:

Wie steuere ich die Bereiche an, die ich explizit vergrössern will. Ganz easy. Unglaublich:

var contentarea = jQuery('div#content');

Das macht ihr gleich mit der ersten Variabeldeklaration (var). Das in der Klammer ist entscheidend. Was jetzt gemacht wird ist einfach. Alles was div ist und in der #content (ID) liegt kann vergrössert, verkleinert oder auf default gesetzt werden. Will man beispielsweise auch Elemente ausserhalb von #content vergrössert haben, quasi individueller, setzt man einfach ein Komma dazwischen:

var contentarea = jQuery('div#content,.text1,.text2');

Jetzt wird zusätzlich die Klasse = .text1 und .text2, also alles was sich in diesen Klassen befindet, ebenfalls manipuliert.

num * 1.2;

beschreibt den Faktor, um den sich die font-size vergrössert.

num / 1.2;

beschreiben den Divisor, um den sich die font-size verkleinert.

Viel mehr muss man wohl nicht wissen. Also absolut idiotdensicher.

[Tritop]

Eine wirklich geniale und so dermassen einfache Methode habe ich noch nie gesehen. Ich bin per Zufall darüber gestolpert und hoffe, dass dieser Thread auf immer und ewig im Web existent bleibt.

Geb ich Dir vollkommen recht...

Wenn da nicht die Nachteile:

1) Funkt im MSI nicht
2) Die gewählte Größe wird nicht per Cookie festgehalten
3) Hat keinen Min-Wert und keinen Max-Wert

Nachteile wären

Wer auch immer hier eine Lösung hat, bitte her damit.

Denn die Grundidee ist wirklich klasse, da geb ich meinem Vorredner recht!

Grüße, Tritop