Schriftgröße vergrößern/verkleinern

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

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

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: fontsizer_phpwcms.zip (Dynamische Schriftgrößenänderung für phpwcms (JavaScript für MooTools))

Download: 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: → /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 Beitrag im Forum.

Anwendung:

Mootools in der Seitenvorlage (Template) aktivieren (MooTools V1.2).
Das JavaScript einbinden mit: 
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:

<!-- JS: fontsize --><div class="fs"><div id="fontsizer"></div></div>

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