Schriftgröße vergrößern/verkleinern

Weiter ausführen und dann überstzen

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

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

Download: fontsizer.zip (1.34 KiB, 23 downloads) (Dynamische Schriftgrößenänderung (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.

• 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).

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

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