jQuery.creaseFont ist ein Plugin für jQuery um die Schriftgröße auf der gesamten Homepage oder nur Teile davon zu vergrößern oder zu verkleinern.
Ich hab aus meinem jQuery Workaround, welchen ich unter Barrierefreiheit – Schrift der Webseite vergrößern mit jQuery erläutert habe, nun ein Plugin geschrieben. Das ist flexibler.
Die Einbindung mit den default settings sieht folgendermaßen aus. Weitere Beispiele mit Einstellungen folgen weiter unten.
HTML Head bereich:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.creaseFont.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.creaseFont();
});
</script>
Nun Beispielsweise noch die Buttons folgendermaßen einfügen:
<span id="fontLarge" style="cursor:pointer">( + )</span> <span id="fontDefault" style="cursor:pointer">( Ø )</span> <span id="fontSmall" style="cursor:pointer">( - )</span>
Als Button kann jedes Element mit der passenden ID genutzt werden.
Optionen
Folgende Parameter können dem Aufruf übergeben werden. Die hier gezeigten, sind auch die Standardparameter:
$.creaseFont({
content : 'body',
defaultSize : 100,
maxSize : 160,
minSize : 60,
stepSize : 10,
unit : '%',
bFontLarge : '#fontLarge',
bFontDefault: '#fontDefault',
bFontSmall : '#fontSmall',
animate : true,
animateSpeed: 500,
cookieName : 'creaseFont',
cookiePath : '/',
cookieLifetime:60
});
});
Erläuterung:
| Parameter | Wert |
| content | Kann ein oder mehere beliebige Elemente enthalten. ‘body’ bezeichnet das gesamte Dokument und ist default. ‘#id’ die id eines bestimmten Containers ['#id1','id2'] die ID’s mehrerer Container in einem Array. |
| default_size | Standardschriftgröße. Default ist 100% |
| maxSize | Maximale Schriftgröße. Default ist 160% |
| minSize | Minimale Schriftgröße. Default ist 60% |
| stepSize | Um diesen Wert wird die Schrift vergrößert oder verkleinert. Defaut ist 10% |
| unit | Die Einheit der Schrift. Default ist % Möglich ist %, em, px, pt (beachte die Beispiele) |
| bFontLarge | Eindeutige ID des Buttons für die Vergrößerung. Default ist #fontLarge |
| bFontDefault | Eindeutige ID des Buttons für die Standardgröße. Default ist #fontDefault |
| bFontSmall | Eindeutige ID des Buttons für die Verkleinerung. Default ist #fontSmall |
| animate | Animation einschalten? Default ist true |
| animateSpeed | Geschwindigkeit für die Animation Default ist 500 |
| cookieName | Name des Cookies, in dem die Werte gespeichert werden. Default ist creaseFont |
| cookiePath | Pfad in dem das Cookie gültig ist. Default ist / für die gesamte Domain. |
| cookieLifetime | Dauer der gültigkeit des Cookies in Tagen. Default ist 60 |
Als letzten Parameter könnt ihr eine Callback Funktion aufrufen, welche ausgeführt wird, nachdem die Schrift vergrößert, verkleinert oder zurückgesetzt wurde.
$.creaseFont({
after:function( obj ) {
$('#callback').html("Zoomlevel: " + obj.currSize + obj.currUnit + "<br />Current Task: " + obj.currTask + "<br />" + obj.currLvl);
}
});
Das Object beinhaltet folgende Werte.
| Object | Wert |
| obj.currSize | Die aktuelle Schriftgröße. int oder float |
| obj.currUnit | Die genutze Einheit (%,em,pt,px) string |
| obj.currContent | Das HTML Element welches verändert wurde, wie bei content übergeben. string |
| obj.currTask | Die aktuelle Aufgabe welche ausgeführt wurde. (increaseFont|defaultFont|decreaseFont) string |
| obj.currLvl | Das aktuelle Zoomlevel welches erreicht wurde oder ein leerer String max – Maximale Zoolevel wurde erreicht default – Default Zoomlevel wurde geklickt min – Das minimale Zoomlevel wurde erreicht |
Beispiele
Ein paar Beispiele mit Erläuterungen findet ihr hier:
jquery.creaseFont.js Plugin Example 1.
Download
Danke für das Plugin!!
Leider bekomme ich folgenden Fehler im Firebug:
options.expires.toUTCString is not a function
Moin,
was steht denn bei dir in cookieLifetime?
Der Wert muss Integer sein, das heißt ohne Anführungszeichen.
Das ist eine einfache JavaScript funktion, die das Datum für das Cookie formatiert.
Hast du evtl. nen Link?
@Sascha: das könnte an integer werte liegen, kontrolliere mal z.B.:
stepSize:2
bFontLarge:’#fontLarge’
integer darf kein Hochkomma haben
PS: Super Script! Danke!
Seltsam, egal auf welches Element (body o. einzelner container) ich es ansetze zoomt es bei einem Klick auf den Button zum Vergrößern auf eine Größe die selbst die Begrenzung in der Voreinstellung sprengt. Verkleinern geht dann nicht mehr, nur zurücksetzen auf Default.
Ebenfalls ist bei dem Plugin die Animate Variable unnützlich, da keine Funktion vorhanden.
Mit dem Plugin tritt besagtes Problem auf. Dein Code-Beispiel dagegen klappt ohne Probleme ohne murren.
Als kleines Feedback. Da dein Plugin sicher bei WordPress Nutzer ankommen wird oder ankommen soll, würde ich auch eine noConflict Variante einbauen. Ich hab es wie üblich mit der noConflict deklarierten Variable gelöst.
Moin Sascha,
danke für die Info. Anstelle von
$.creaseFont...kannst du auch
JQuery.creaseFont...schreiben. Das sollte das Problem auch lösen.
noConflict sollte eigentlich in einem WP Blog nicht nötig, weil WP sowieso mit JQuery arbeitet.
Animate geht erst in der Version 1.0.2, nutzt du die auch?
Grüße
Ist es möglich das du die falsche 1.0.2 Version hoch geladen hast? Im Quellcode fand ich dazu nichts. Wobei ich persönlich werde wohl erst einmal bei der Script Variante (anstelle des Plugins) bleiben, da ich gerade an ein Usibility trächtigen Layout arbeite.
Ob NoConflict überhaupt noch nötig ist, habe ich selbst noch gar nicht überprüft. Das überprüfe ich mal, danke!
Wo du recht hast
Dieses Download Script hat das irgendwie durcheinander gebracht, tut mir leid. Nun sollte der Download der 1.0.2 aber stimmen.
Danke für den Hinweis!