NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
deutsch:andere-erweiterungen:schrift-groeszer-kleiner [2011/10/19 08:59] Knut Heermann (flip-flop) |
deutsch:andere-erweiterungen:schrift-groeszer-kleiner [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| FIXME Weiter ausführen und dann überstzen | FIXME Weiter ausführen und dann überstzen | ||
| - | Forum: [[http://forum.phpwcms.org/viewtopic.php?f=28&t=18299]] \\ | ||
| - | Forum: [[http://forum.phpwcms.org/viewtopic.php?p=104925#p104925]] | ||
| Die Schriftgröße per Klick vergrößern oder verkleinern. | Die Schriftgröße per Klick vergrößern oder verkleinern. | ||
| + | |||
| + | |||
| + | ===== Lösung mit PHP Script (CSS) ===== | ||
| Mit dem RT switchFontSize.php ist dies möglich. | Mit dem RT switchFontSize.php ist dies möglich. | ||
| Line 29: | Line 30: | ||
| Im Verzeichnis /template/inc_css/fontSize/ finden wir die zusätzlich angehängten CSS-Anweisungen. | Im Verzeichnis /template/inc_css/fontSize/ finden wir die zusätzlich angehängten CSS-Anweisungen. | ||
| + | |||
| + | Forum: [[http://forum.phpwcms.org/viewtopic.php?f=28&t=18299]] | ||
| + | |||
| \\ | \\ | ||
| Line 34: | Line 38: | ||
| ===== Lösung mit JS ===== | ===== Lösung mit JS ===== | ||
| - | Download: {{:deutsch:andere-erweiterungen:fontsizer.zip|}} (Dynamische Schriftgrößenänderung (JavaScript, Mootools)) | + | Download: {{:deutsch:andere-erweiterungen:fontsizer_phpwcms.zip|}} (Dynamische Schriftgrößenänderung für phpwcms (JavaScript für MooTools)) |
| + | |||
| + | Download: {{:deutsch:andere-erweiterungen:fontsizer_example.zip|}} (Dynamische Schriftgrößenänderung Test (JavaScript, Mootools)) | ||
| --- | --- | ||
| Docu: -- \\ | Docu: -- \\ | ||
| - | Forum: -- | + | Forum: [[http://forum.phpwcms.org/viewtopic.php?p=104925#p104925]] |
| **Autor:** Oliver Georgi (http://phpwcms.de) \\ | **Autor:** Oliver Georgi (http://phpwcms.de) \\ | ||
| - | wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) 27.07.2011\\ | + | wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) 19.10.2011\\ |
| - | **CMS Version:** >= 1.4.7 (r4xx) \\ | + | **CMS Version:** >= 1.4.x (r2xx) \\ |
| - | **Version:** V1.30 \\ | + | **Version:** V1.0 \\ |
| Line 50: | Line 56: | ||
| Tag: -- \\ | Tag: -- \\ | ||
| - | **Dateinamen:** | + | **Dateinamen:** template/lib/mootools/plugin-1.2/mootools.fontsize.js |
| - | * template/lib/mootools/plugin-1.2/mootools.fontsize.js | + | |
| - | * oder | + | |
| - | * template/lib/mootools/plugin-1.3/mootools.fontsize.js | + | |
| - | + | **Verzeichnis:** template/lib/mootools/plugin-1.2 | |
| - | **Verzeichnis:** template/lib/mootools/plugin-1.2 [plugin-1.3] | + | |
| Line 66: | Line 68: | ||
| --- | --- | ||
| - | Beispiel untern: [[http://www.iba-stadtumbau.de/index.php?news-aktuell]] | + | Beispiel unter: [[http://www.iba-stadtumbau.de/index.php?news-aktuell]] |
| > Ist nicht weiter dokumentiert - habe das selbst entwickelt. Letztlich muss man sich nur die Settings ansehen und in etwa verstehen, was passiert. | > Ist nicht weiter dokumentiert - habe das selbst entwickelt. Letztlich muss man sich nur die Settings ansehen und in etwa verstehen, was passiert. | ||
| Line 72: | Line 74: | ||
| > Einfach mal das Beispiel vergleichen mit IBA Stadtumbau und den Quellcode anschauen - aber mit Firebug, da die größer/kleiner/gleich "Tasten" erst zur Laufzeit "injiziert" werden. Kein JavaScript = keine Tasten. (OG) | > Einfach mal das Beispiel vergleichen mit IBA Stadtumbau und den Quellcode anschauen - aber mit Firebug, da die größer/kleiner/gleich "Tasten" erst zur Laufzeit "injiziert" werden. Kein JavaScript = keine Tasten. (OG) | ||
| - | Seihe dazu auch den Beitrag im Forum. | + | Siehe dazu auch den [[http://forum.phpwcms.org/viewtopic.php?p=104925#p104925|Beitrag]] im Forum. |
| + | |||
| + | |||
| + | ===== Anwendung: ===== | ||
| + | |||
| + | * Mootools in der Seitenvorlage //(Template)// aktivieren (MooTools V1.2). | ||
| + | * Das JavaScript einbinden mit: **%%<!-- JS: fontsize -->%%** | ||
| + | * Den Trigger **%%<div id="fontsizer"> .... </div>%%** auf den das JS reagiert im Template an der Ausgabestelle setzen (siehe hierzu auch im JS: **%%var fsize_inject%%**). | ||
| + | * Den Bereich in dem die Schriftgößenänderung wirkt im Template bestimmen durch das Setzen von **%%<div id="content"> .... Bereich .... </div>%%** (siehe hierzu auch im JS: **%%var fsize_section%%**). | ||
| + | * Die Klassen **%%smaller, normal, larger%%** in einer eingebundenen CSS-Datei erzeugen und mit gewünschten Werten füllen (siehe hierzu auch im JS: **%%var fsizeSmaller, var fsizeNormal, var fsizeLarger%%**). | ||
| + | |||
| + | \\ | ||
| + | |||
| + | ===== Beispiel: ===== | ||
| + | |||
| + | * Script ist in "%%template/lib/mootools/plugin-1.2/mootools.fontsize.js%%" vorhanden. | ||
| + | * Mootools V1.2 ist im Template aktiviert. | ||
| + | |||
| + | Im Template an der gewünschten Stelle setzen: | ||
| + | |||
| + | <code html> | ||
| + | <!-- JS: fontsize --><div class="fs"><div id="fontsizer"></div></div> | ||
| + | </code> | ||
| + | |||
| + | \\ | ||
| + | ==== CSS: ==== | ||
| + | |||
| + | <code css> | ||
| + | /* FONTSIZER ------------------------------- */ | ||
| + | .fs { | ||
| + | font-size: 1.0em; | ||
| + | float: right; | ||
| + | top: 0px; | ||
| + | padding: 0 30px 0 0; | ||
| + | } | ||
| + | .fs a { | ||
| + | cursor:pointer; | ||
| + | text-decoration: none; | ||
| + | } | ||
| + | .fs .smaller { | ||
| + | font-size: 11px; | ||
| + | padding-right: 3px; | ||
| + | } | ||
| + | .fs .bigger, .fs .larger { | ||
| + | font-size: 18px; | ||
| + | padding-left: 2px; | ||
| + | } | ||
| + | .fs .normal { | ||
| + | font-size: 15px; | ||
| + | padding-left: 2px; | ||
| + | padding-right: 3px; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | |||
| + | \\ | ||
| + | |||
| + | ==== Schriftgrößentabelle: ==== | ||
| {{:deutsch:andere-erweiterungen:webeinheiten.png|}} | {{:deutsch:andere-erweiterungen:webeinheiten.png|}} | ||
| + | \\ | ||
