NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
deutsch:andere-erweiterungen:mootools:fontsizer [2010/12/17 14:40] Knut Heermann (flip-flop) |
deutsch:andere-erweiterungen:mootools:fontsizer [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | {{indexmenu_n>10}} | ||
| + | |||
| ====== Dynamische Schriftgrößenänderung ====== | ====== Dynamische Schriftgrößenänderung ====== | ||
| + | |||
| + | |||
| + | {{:deutsch:andere-erweiterungen:mootools:fontsizer_1.gif }} | ||
| **Dynamische Umschaltung der Schriftgrößen.** | **Dynamische Umschaltung der Schriftgrößen.** | ||
| Line 7: | Line 12: | ||
| Mit diesem JS-Snippet ist das problemlos möglich. | Mit diesem JS-Snippet ist das problemlos möglich. | ||
| + | \\ | ||
| ---- | ---- | ||
| **fontsize** V1.0 17.12.10 | **fontsize** V1.0 17.12.10 | ||
| Line 15: | Line 20: | ||
| - | **Autor:** O.Georgi http://phpwcms.de -> Erweitert: K.Heermann (flip-flop) http://planmatrix.de \\ | + | **Autor:** O.Georgi http://phpwcms.de \\ |
| + | -> Angepasst: K.Heermann (flip-flop) http://planmatrix.de \\ | ||
| **CMS Version:** >= V1.4.4 r381 \\ | **CMS Version:** >= V1.4.4 r381 \\ | ||
| **Version:** V1.0 \\ | **Version:** V1.0 \\ | ||
| Line 46: | Line 52: | ||
| </div> | </div> | ||
| </file> | </file> | ||
| - | "top" ist hier ein angenommener Container, der auch anders lauten kann //(siehe CSS unten)//. | + | %%"top"%% ist hier ein angenommener Container, der auch anders heißen kann //(siehe CSS unten)//. |
| - | Mit ##<!-- JS: fontsize -->## wird das JavaScript im Verzeichnis "template/lib/mootools/plugin-1.2/" eingebunden. Automatisch wird ebenfalls das Framework MooTools V1.2x eingebunden. | + | 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 Bedien- Symbole/Buchstaben. | + | ##%%<div id="fontsizer"></div>%%## ist der Platzhalter für die Ausgabe der Bedien- Symbole/Buchstaben. |
| - | Nun fehlt noch der Bereich der vom Script bei Umschaltung behandelt werden soll. In diesem Beispiel ist das der Container mit der id="content". | + | 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> | <file> | ||
| Line 61: | Line 67: | ||
| </div> | </div> | ||
| </file> | </file> | ||
| - | Natürlich können die Namen und Werte im Script angepasst werden, siehe "CUSTOM var ----..". | + | Natürlich können die Namen und Werte im Script angepasst werden, siehe %%"CUSTOM var ----.."%%. |
| Line 68: | Line 74: | ||
| ===== JavaScript: ===== | ===== 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 > | <code js |h mootools.fontsize.js |h > | ||
| Line 142: | Line 154: | ||
| fsize -= fsize_step; | fsize -= fsize_step; | ||
| $( fsize_section ).setStyle('font-size', fsize+'em'); | $( fsize_section ).setStyle('font-size', fsize+'em'); | ||
| - | Cookie.set( fsize_cookie , fsize, {duration: 365, path: '/'}); | + | Cookie.write( fsize_cookie , fsize, {duration: 365, path: '/'}); |
| break; | break; | ||
| Line 149: | Line 161: | ||
| fsize += fsize_step; | fsize += fsize_step; | ||
| $( fsize_section ).setStyle('font-size', fsize+'em'); | $( fsize_section ).setStyle('font-size', fsize+'em'); | ||
| - | Cookie.set( fsize_cookie , fsize, {duration: 365, path: '/'}); | + | Cookie.write( fsize_cookie , fsize, {duration: 365, path: '/'}); |
| break; | break; | ||
| Line 158: | Line 170: | ||
| case 'normal': | case 'normal': | ||
| default: | default: | ||
| - | $( fsize_section ).setStyle(''); | + | // $( fsize_section ).setStyle(''); // trouble with IE8 ??? |
| fsize = 1; | fsize = 1; | ||
| $( fsize_section ).setStyle('font-size', fsize+'em'); | $( fsize_section ).setStyle('font-size', fsize+'em'); | ||
| - | Cookie.remove( fsize_cookie , {path: '/'}); | + | Cookie.dispose( fsize_cookie , {path: '/'}); |
| document.location.href = document.location.href; | document.location.href = document.location.href; | ||
| } | } | ||
| Line 175: | Line 187: | ||
| Folgende CSS-Klassen werden in irgendeine CSS-Datei eingesetzt die auf der Seite geladen wird. | 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. | + | %%".top"%% ist hier der angenommene Container in dem die Auswahl dargestellt werden soll. |
| <code css> | <code css> | ||
| /* FONTSIZER ------------------------------- */ | /* FONTSIZER ------------------------------- */ | ||
| + | .top { | ||
| + | font-size: 1.0em | ||
| + | } | ||
| .top a { | .top a { | ||
| cursor:pointer; | cursor:pointer; | ||
| text-decoration: none; | text-decoration: none; | ||
| } | } | ||
| - | |||
| .top .smaller { | .top .smaller { | ||
| font-size: 10px; | font-size: 10px; | ||
