{{indexmenu_n>10}}
====== Dynamic font resizing ======

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

**Dynamic changing of the font sizes.**

Frequently, a font enlargement/reduction is desired by user input. 

With this JS snippet it is possible without problem.


FIXME better translate
\\
----
**fontsize** V1.0  17.12.10  

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


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

 

Tag: -- 

Filename: **mootools.fontsize.js** 

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

**Condition:** -> Browser JavaScript active \\



----
----

\\

===== Embed into the page: =====

<file>
<div class="top">
.....
  <!-- JS: fontsize -->
  <div id="fontsizer"></div>
....
</div>
</file>
"top" is an assumed container that can also mean different //(see CSS below)//. 


With ##%%<!-- JS: font size -->%%## the JavaScript file %%"mootools.fontsize.js"%% is integrated as a plugin from the folder %%"template/lib/mootools/plugin-1.2/"%%. Also, the framework MooTools V1.2x is automatically included.

##%%<div id="fontsizer"></div>%%## is the placeholder for output control like symbols or letters.

Now, we still lack the identification of the area in which the switch operates. In this example that is the container with %%id="content"%%.


<file>
....
<div id="content">
....
....
</div>
</file> 
Of course, the names and values are adjusted in the script, see %%"CUSTOM var ----..."%%. 


\\ 

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

Error correction 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]);%%## 

\\
**Folder:**  %%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: =====

The appearance of the three clickable symbols or e.g. letters is determined by CSS instructions.

The following CSS classes are implemented into any CSS file that is loaded  on the side.  

%%".top"%% should be  a hypothetical container in which the selection is shown.

<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>

\\