Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
jQuery Font Resize
<script type="text/javascript">
/* jQuery Font Resize by Andre Knieriem*/
jQuery(function(){
jQuery('.size-now').click(function(){
var ourText = jQuery('.tut-text');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
if(this.id == 'large') {
finalNum += 1;
}
else if (this.id == 'small'){
finalNum -=1;
}
ourText.css('fontSize', finalNum);
return false;
});
});
</script>
Für mein gerade laufendes Projekt brauchte ich eine Funktion, die den Schriftgrad des Hauptinhalts vergrößert, bzw. verkleinern kann, ohne die Seite neu zu laden. Deshalb habe ich mich rangesetzt und eine kleine Funktion geschrieben. Ich habe zu Anschauungszwecken die Funktion auf dieser Seite eingebaut. Mit folgenden Tasten könnt ihr sie testen.
Das Ganze funktioniert wie folgt:
HTML Gerüst
<div class="font-resize">
<a href="#" id="small" class="size-now">A-</a>
<a href="#" id="large" class="size-now">A+</a>
</div>
Einfach nur 2 Links mit derselben Klasse und unterschiedlicher ID, die jetzt vom Javascript ausgelesen wird:
jQuery
/* jQuery Font Resize by Andre Knieriem*/
jQuery(function(){
jQuery('.size-now').click(function(){
var ourText = jQuery('your text container');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
if(this.id == 'large') {
finalNum += 1;
}
else if (this.id == 'small'){
finalNum -=1;
}
ourText.css('fontSize', finalNum);
return false;
});
});
Die Funktion geht los, wenn auf ein Objekt mit der Klasse "size-now" geklickt wurde. Danach wird die akuelle Font-Size des gewünschten Containers ermittelt. Dann wird geschaut ob das Objekt die Klasse large oder small hat und je nachdem wird die Font-size um 1px erhöht oder verringert. Das ist auch schon alles.
Ich hoffe das konnte einigen helfen. Vlt schreibe ich noch eine Erweiterung die einen Cookie setzt, um die Größe auf allen Seiten zu übernehmen.
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar