NAVIGATION
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: 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
<div class="top"> ..... <!-- JS: fontsize --> <div id="fontsizer"></div> .... </div>
"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".
.... <div id="content"> .... .... </div>
Natürlich können die Namen und Werte im Script angepasst werden, siehe "CUSTOM var ----..".
Fehlerkorrektur 12.01.2011 KH: Conversion from mootools 1.11 to mootools 1.2 * Cookie.set(key, value[, options]); —> Cookie.write(key, value[, options]);
Verzeichnis: template/lib/mootools/plugin-1.2/
/* 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; } }
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.
/* 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; }