{{indexmenu_n>500}}
====== Schriftgröße vergrößern/verkleinern ======

FIXME Weiter ausführen und dann überstzen


Die Schriftgröße per Klick vergrößern oder verkleinern. 


===== Lösung mit PHP Script (CSS) =====

Mit dem RT switchFontSize.php ist dies möglich. 

Die Datei **switchFontSize.php** dazu bitte aus \\ 
**/templates/inc_script/frontend_render/disabled/switchFontSize.php** \\ 
nach \\ 
**/templates/inc_script/frontend_render/switchFontSize.php** \\ 
kopieren.

Im Template
<code html>
<div id="accessibilitybar">
  <a href="[FontSize+]" title="mach groesser"><img src="pics/plus-s.png" border="0" alt="zoom in" /></a>
  &nbsp;&nbsp;
  <a href="[FontSize=]" title="mach normal">Originalgröße</a>
  &nbsp;&nbsp;
  <a href="[FontSize-]" title="mach kleiner"><img src="pics/minus-s.png" border="0" alt="zoom out" /></a>
</div>
</code>

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 =====

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: -- \\
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)

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|}}

\\