NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
deutsch:andere-erweiterungen:schrift-groeszer-kleiner [2009/05/05 08:32] 127.0.0.1 external edit |
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]] | ||
| + | |||
| + | |||
| + | \\ | ||
| ===== 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)) |
| - | Beispiel untern: [[http://www.iba-stadtumbau.de/index.php?news-aktuell]] | + | Download: {{:deutsch:andere-erweiterungen:fontsizer_example.zip|}} (Dynamische Schriftgrößenänderung Test (JavaScript, Mootools)) |
| - | > Ist nicht weiter dokumentiert - habe das selbst entwickelt. Letzlich muss man sich nur die Settings ansehen und in etwa verstehen, was passiert. | + | --- |
| + | Docu: -- \\ | ||
| + | Forum: [[http://forum.phpwcms.org/viewtopic.php?p=104925#p104925]] | ||
| + | |||
| + | |||
| + | **Autor:** Oliver Georgi (http://phpwcms.de) \\ | ||
| + | wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de) 19.10.2011\\ | ||
| + | **CMS Version:** >= 1.4.x (r2xx) \\ | ||
| + | **Version:** V1.0 \\ | ||
| + | |||
| + | |||
| + | |||
| + | Tag: -- \\ | ||
| + | |||
| + | **Dateinamen:** template/lib/mootools/plugin-1.2/mootools.fontsize.js | ||
| + | |||
| + | **Verzeichnis:** template/lib/mootools/plugin-1.2 | ||
| + | |||
| + | |||
| + | **Bedingung:** -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] \\ | ||
| + | * $phpwcms['allow_cntPHP_rt'] = 1; | ||
| + | * JS im Browser eingeschaltet | ||
| + | |||
| + | |||
| + | --- | ||
| + | |||
| + | 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. | ||
| > | > | ||
| > 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|}} | ||
| + | \\ | ||
