02.06.2009 - geschrieben von mrvn in Tutorials

8 Schriftgröße mit jQuery ändern

jquerfontsizer

Da Viele immernoch nicht wissen, dass man die Schriftgröße im Browser auch ganz bequem per Tastur einstellen kann, hier mal eine kleine und simple Lösung, wie man dem Benutzer eine kleine Schriftgrößeneinstellung direkt af der Webseite anbieten kann. Also erst einmal erstellen wir 3 Links auf der Seite auf der wir den Fontsizer einbauen wollen und versehen diese Links mit 3 verschiedenen Klassen, in diesem Falle .standard, .middle und .big

<a class="standard">a</a>
<a class="middle">a</a>
<a class="big">a</a>

Das werden unsere Links, die die Größe ändern. Nun kommen wir zum jQuery Teil.

jQuery einbinden

In den Kopf der HTML Datei wie gewohnt das Framework einbinden, siehe jQuery

<script type="text/javascript" src="pfadzu/jquery.js"></script>

Nächster Schritt wird sein, den JS Teil zu schreiben, der die Größe mit Klicks auf die eben erstellten Links ändert. Für den Bereich, den die Links einschliessen sollen, legen wir am Anfang die Variable container fest. Also meistens body für die komplette Seite.

var container = "body";

Die Klickfunktionen

der 3 Links, mit den enstprechenden 3 Größen:

$(document).ready(function(){

  // Schriftgröße Normal
  $(".standard").click(function() { $(container).css('font-size', 12); });

  // Schriftgröße Mittel
  $(".middle").click(function() { $(container).css('font-size', 16); });

  // Schriftgröße Groß
  $(".big").click(function() { $(container).css('font-size', 20); });
});

Damit man auch sieht welcher Link für welche Größe zuständig ist, noch ein wenig CSS für die Darstellung:

.standard { font-size: 12px;}
.middle { font-size: 16px;}
.big { font-size: 20px;}

Demo

Ein Beispiel findet ihr hier: Demo

Das wars…

..auch schon. Natürlich kann man jetzt noch ein Cookie setzen, damit man beim nächsten Besuch der Seite die selbe Einstellung hat, oder den aktiven Link noch markieren. Aber sollte ja auch eigentlich nur ein kleiner Denkanstoss werden. Aber wenn Interesse besteht, wird das natürlich gerne nachgereicht ;)

Wie löst ihr solche Probleme, wenn der Kunde einstellbare Schriftgrößenveränderung haben möchte? würde mich mal interessieren…

Tags:

8 Kommentare

Trackback - RSS Kommentare zu "Schriftgröße mit jQuery ändern"

Dein Gedanke dazu?...