NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
english:other-enhancements:mootools:fontsizer [2010/12/17 14:56] Knut Heermann (flip-flop) created |
english:other-enhancements:mootools:fontsizer [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | {{indexmenu_n>10}} | ||
| ====== Dynamic font resizing ====== | ====== Dynamic font resizing ====== | ||
| - | FIXME better translate | + | {{:deutsch:andere-erweiterungen:mootools:fontsizer_1.gif }} |
| **Dynamic changing of the font sizes.** | **Dynamic changing of the font sizes.** | ||
| Line 10: | Line 11: | ||
| + | FIXME better translate | ||
| + | \\ | ||
| ---- | ---- | ||
| **fontsize** V1.0 17.12.10 | **fontsize** V1.0 17.12.10 | ||
| Line 17: | Line 20: | ||
| - | **Author:** O.Georgi http://phpwcms.de -> Erweitert: K.Heermann (flip-flop) http://planmatrix.de \\ | + | **Author:** O.Georgi http://phpwcms.de \\ |
| + | -> Adjusted: 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 50: | Line 54: | ||
| "top" is an assumed container that can also mean different //(see CSS below)//. | "top" is an assumed container that can also mean different //(see CSS below)//. | ||
| - | FIXME translate | ||
| - | 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. | + | 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>%%## ist der Platzhalter für die Ausgabe Bedien- Symbole/Buchstaben. | + | ##%%<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"%%. | ||
| - | Nun fehlt noch der Bereich der vom Script bei Umschaltung behandelt werden soll. In diesem Beispiel ist das der Container mit der id="content". | ||
| <file> | <file> | ||
| Line 65: | Line 69: | ||
| </div> | </div> | ||
| </file> | </file> | ||
| - | Natürlich können die Namen und Werte im Script angepasst werden, siehe %%"CUSTOM var ----.."%%. | + | Of course, the names and values are adjusted in the script, see %%"CUSTOM var ----..."%%. |
| Line 71: | Line 75: | ||
| ===== JavaScript: ===== | ===== 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/%% | ||
| Line 146: | Line 157: | ||
| 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 153: | Line 164: | ||
| 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 162: | Line 173: | ||
| 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 186: | ||
| ===== CSS: ===== | ===== CSS: ===== | ||
| - | Das Aussehen der drei klickbaren Symbole oder z.B. Buchstaben wird durch CSS-Anweisungen bestimmt. | + | The appearance of the three clickable symbols or e.g. letters is determined by CSS instructions. |
| - | Folgende CSS-Klassen werden in irgendeine CSS-Datei eingesetzt die auf der Seite geladen wird. | + | The following CSS classes are implemented into any CSS file that is loaded on the side. |
| - | ".top" ist hier der angenommene Container in dem die Auswahl dargestellt werden soll. | + | %%".top"%% should be a hypothetical container in which the selection is shown. |
| <code css> | <code css> | ||
| Line 206: | Line 217: | ||
| </code> | </code> | ||
| + | \\ | ||
