Tutorials von Thomas Frei-Herrmann
Schriftgröße - Font Size dynamisch verändern
Dieses Skript habe ich bei DynamicDrive gefunden und folgendermaßen in NOF eingebaut.
Bitte ladet Euch diese Datei herunter. Mit rechter Maustaste auf diesen Link klicken und “Ziel speichern unter” wählen.
Ihr habt die Javascript-Datei “textsizer.js” gespeichert.
Kopiert diese Datei in Euren Ordner “assets” in der lokalen Publizierung (um das auch schon lokal zu sehen) und natürlich auch mit Eurem FTP-Programm in den Ordner “assets” auf Eurem Server oder Ihr bindet diese Datei gleich in die “Assets-Verwaltung” von Eurem NOF ein. Wie man das macht, beschreibe ich hier.
Diese Datei hat bei mir folgenden Inhalt. Dabei werden alle “Tags” mit der Variable tgs mit diesem Skript angesprochen, hier blau markiert, also hier (ich habe hier mal “Links” bewusst ausgelassen und diese bleiben daher in der Größe immer gleich):
'div','td','tr','p' Tags. Hier könntet Ihr auch Tags hinzufügen oder entfernen, je nachdem was nun vergrößert/verkleinert werden soll.
/*------------------------------------------------------------
Document Text Sizer- Copyright 2003 - Taewook Kang. All rights reserved.
Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
Web Site: http://txkang.com
Script featured on Dynamic Drive (http://www.dynamicdrive.com)
Please retain this copyright notice in the script.
License is granted to user to reuse this code on
their own website if, and only if,
this entire copyright notice is included.
--------------------------------------------------------------*/
//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr','p');
//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;
function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;
sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
cEl.style.fontSize = szs[ sz ];
for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
Jetzt fügt Ihr das Skript unten entweder in die HTML des Layouts (für eine Seite) oder des Master-Rahmens (für alle Seiten mit gleichem Master-Rahmen) Eurer Seite ein, dabei müsste die Startseite einen anderen “Master-Rahmen-Namen” erhalten.
Achtet dabei auf die korrekte relative Pfadangabe zu der Datei “textsizer.js”.
Von der Startseite mit einem Punkt ./, von einer Unterseite mit zwei Punkten ../
... in diesem Beispiel von der Startseite mit einem Punkt ./
<script type="text/javascript" src="./assets/textsizer.js">
/***********************************************
* Document Text Sizer- Copyright 2003 - Taewook Kang. All rights reserved.
* Coded by: Taewook Kang (http://www.txkang.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
... nun müsst Ihr lediglich noch die Links zum Vergrößern oder Verkleinern der Schrift irgendwo in Euren Layout-Bereich einfügen.
Ich habe einfach diese Links in den HTML-Code Editor eines Textfeldes kopiert und fertig.
<a href="javascript:ts('body',1)">+ Schrift größer</a> | <a href="javascript:ts('body',-1)"> - Schrift kleiner</a>