{{indexmenu_n>10}}

====== Dynamische Schriftgrößenänderung ======


{{:deutsch:andere-erweiterungen:mootools:fontsizer_1.gif }}

**Dynamische Umschaltung der Schriftgrößen.**

Häufig wird eine Fontvergrößerung/verkleinerung durch Benutzereingabe gewünscht. 

Mit diesem JS-Snippet ist das problemlos möglich.

\\
----
**fontsize** V1.0  17.12.10  

Docu: -- \\
Forum: [[http://forum.phpwcms.org/viewtopic.php?p=104925#p104925|I have found again - Sommerschule (2005)]]


**Autor:** O.Georgi http://phpwcms.de \\ 
-> Angepasst: K.Heermann (flip-flop) http://planmatrix.de \\
**CMS Version:** >=  V1.4.4 r381 \\ 
**Version:** V1.0 \\

 

Tag: -- 

Dateiname: **mootools.fontsize.js** 

Verzeichnis:  ** template/lib/mootools/plugin-1.2/ ** 

**Bedingung:** -> JavaScript im Browser aktiv \\



----
----

\\

===== Einbinden in die Seite: =====

<file>
<div class="top">
.....
  <!-- JS: fontsize -->
  <div id="fontsizer"></div>
....
</div>
</file>
%%"top"%% ist hier ein angenommener Container, der auch anders heißen kann //(siehe CSS unten)//. 

Mit ##%%<!-- JS: fontsize -->%%## wird die JavaScript-Datei %%"mootools.fontsize.js"%% als Plugin aus dem Verzeichnis %%"template/lib/mootools/plugin-1.2/"%% eingebunden. Ebenfalls wird automatisch das Framework MooTools V1.2x eingebunden.

##%%<div id="fontsizer"></div>%%## ist der Platzhalter für die Ausgabe der Bedien- Symbole/Buchstaben.

Nun fehlt noch der Bereich der vom Script bei einer Umschaltung behandelt werden soll. In diesem Beispiel ist das der Container mit der %%id="content"%%.

<file>
....
<div id="content">
....
....
</div>
</file> 
Natürlich können die Namen und Werte im Script angepasst werden, siehe %%"CUSTOM var ----.."%%. 


\\ 

===== JavaScript: =====

Fehlerkorrektur 12.01.2011 KH:  [[https://github.com/mootools/mootools-core/wiki/Conversion-from-1.11-to-1.2-|Conversion from mootools 1.11 to mootools 1.2]]  
  * ##%%Cookie.set(key, value[, options]);%%## ---> ##%%Cookie.write(key, value[, options]);%%##
  * ##%%Cookie.remove(cookie[, options]);%%## ---> ##%%Cookie.dispose(cookie[, options]);%%## 

\\
**Verzeichnis:**  %%template/lib/mootools/plugin-1.2/%%

<code js |h mootools.fontsize.js |h >
/* CUSTOM var ------------- */
var fsize_step		= 0.1;
var fsize			= 1;
var fsize_cookie	= 'mooFontSize';
var fsize_inject	= 'fontsizer';
var fsize_section	= 'content';
var fsize_min		= 0.6;
var fsize_max		= 3;

window.addEvent('domready', function() {

	/* Fontresizing */
	if( $( fsize_section ) && $( fsize_inject ) ) { //check if there is 
		
		var fsizeSmaller	= new Element('a', {'class': 'smaller', 'title': 'A-'}).set('html', 'A').injectInside( fsize_inject );
		var fsizeNormal		= new Element('a', {'class': 'normal', 'title': 'A=', 'style': 'text-decoration:underline'}).set('html', 'A').injectInside( fsize_inject );
		var fsizeLarger		= new Element('a', {'class': 'larger', 'title': 'A+'}).set('html', 'A').injectInside( fsize_inject );

		
		
		fsizeSmaller.addEvent('click', function() { 
				setFontSize('smaller'); 
				/*
				fsizeSmaller.setStyle('text-decoration', 'underline');
				fsizeNormal.setStyles('');
				fsizeLarger.setStyles('');
				*/
			} );
		fsizeNormal.addEvent('click', function() { 
				setFontSize('normal');
				/*
				fsizeSmaller.setStyles('');
				fsizeNormal.setStyle('text-decoration', 'underline');
				fsizeLarger.setStyles('');
				*/
			} );
		fsizeLarger.addEvent('click', function() {
				setFontSize('larger');
				/*
				fsizeSmaller.setStyles('');
				fsizeNormal.setStyles('');
				fsizeLarger.setStyle('text-decoration', 'underline');
				*/
			} );
		
		var fsizecookie = Cookie.read( fsize_cookie );
		if(fsizecookie !== null) {
			fsizecookie = parseFloat(fsizecookie);
			if(fsizecookie > 0) {
				fsize = fsizecookie * 1;
				setFontSize('cookie');
			}
			/*
			if(fsize > 1) {
				fsizeNormal.setStyles('');
				fsizeLarger.setStyle('text-decoration', 'underline');
			} else if(fsize < 1) {
				fsizeNormal.setStyles('');
				fsizeSmaller.setStyle('text-decoration', 'underline');
			}
			*/
		}
	}
	
});

function setFontSize(fs) {
	switch(fs) {
		case 'smaller':
			if(fsize <= fsize_min) break;
			fsize -= fsize_step;
			$( fsize_section ).setStyle('font-size', fsize+'em');
			Cookie.write( fsize_cookie , fsize, {duration: 365, path: '/'});
			break;
		
		case 'larger':
			if(fsize >= fsize_max) break;
			fsize += fsize_step;
			$( fsize_section ).setStyle('font-size', fsize+'em');
			Cookie.write( fsize_cookie , fsize, {duration: 365, path: '/'});
			break;
		
		case 'cookie':
			$( fsize_section ).setStyle('font-size', fsize+'em');
			break;
		
		case 'normal':
		default:
//			$( fsize_section ).setStyle(''); // trouble with IE8 ???
			fsize = 1;
			$( fsize_section ).setStyle('font-size', fsize+'em');
			Cookie.dispose( fsize_cookie , {path: '/'});
			document.location.href = document.location.href;
	}
}
</code>

\\

===== CSS: =====

Das Aussehen der drei klickbaren Symbole oder z.B. Buchstaben wird durch CSS-Anweisungen bestimmt.

Folgende CSS-Klassen werden in irgendeine CSS-Datei eingesetzt die auf der Seite geladen wird.  

%%".top"%% ist hier der angenommene Container in dem die Auswahl dargestellt werden soll.

<code css>
/* FONTSIZER ------------------------------- */
.top {
	font-size: 1.0em
}
.top a {
	cursor:pointer;
	text-decoration: none;
}
.top .smaller {
	font-size: 10px;
	padding-right: 3px;
}
.top .bigger, .top .larger {
	font-size: 18px;
	padding-left: 2px;
	font-weight: bold;
}
.top .normal {
	font-size: 14px;
	padding-left: 2px;
	padding-right: 3px;
}
</code>