Dynamische Schriftgrößenänderung

Dynamische Umschaltung der Schriftgrößen.

Häufig wird eine Fontvergrößerung/verkleinerung durch Benutzereingabe gewünscht.

Mit diesem JS-Snippet ist das problemlos möglich.

fontsize V1.0 17.12.10

Docu: –
Forum: I have found again - Sommerschule (2005)

Autor: O.Georgi http://phpwcms.de
→ Angepasst: K.Heermann (flip-flop) http://planmatrix.de
CMS Version: >= V1.4.4 r381
Version: V1.0

Tag: –

Dateiname: mootools.fontsize.js

Verzeichnis: template/lib/mootools/plugin-1.2/

Bedingung: → JavaScript im Browser aktiv

Einbinden in die Seite:

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

"top" ist hier ein angenommener Container, der auch anders heißen kann (siehe CSS unten).

Mit  wird die JavaScript-Datei "mootools.fontsize.js" als Plugin aus dem Verzeichnis "template/lib/mootools/plugin-1.2/" eingebunden. Ebenfalls wird automatisch das Framework MooTools V1.2x eingebunden.

<div id="fontsizer"></div> ist der Platzhalter für die Ausgabe der Bedien- Symbole/Buchstaben.

Nun fehlt noch der Bereich der vom Script bei einer Umschaltung behandelt werden soll. In diesem Beispiel ist das der Container mit der id="content".

....
<div id="content">
....
....
</div>

Natürlich können die Namen und Werte im Script angepasst werden, siehe "CUSTOM var ----..".

JavaScript:

Fehlerkorrektur 12.01.2011 KH: Conversion from mootools 1.11 to mootools 1.2 * Cookie.set(key, value[, options]); —> Cookie.write(key, value[, options]);

Cookie.remove(cookie[, options]); —> Cookie.dispose(cookie[, options]);

Verzeichnis: template/lib/mootools/plugin-1.2/

mootools.fontsize.js

/* CUSTOM var ------------- */
var fsize_step        = 0.1;
var fsize            = 1;
var fsize_cookie    = 'mooFontSize';
var fsize_inject    = 'fontsizer';
var fsize_section    = 'content';
var fsize_min        = 0.6;
var fsize_max        = 3;
 
window.addEvent('domready', function() {
 
    /* Fontresizing */
    if( $( fsize_section ) && $( fsize_inject ) ) { //check if there is
 
        var fsizeSmaller    = new Element('a', {'class': 'smaller', 'title': 'A-'}).set('html', 'A').injectInside( fsize_inject );
        var fsizeNormal        = new Element('a', {'class': 'normal', 'title': 'A=', 'style': 'text-decoration:underline'}).set('html', 'A').injectInside( fsize_inject );
        var fsizeLarger        = new Element('a', {'class': 'larger', 'title': 'A+'}).set('html', 'A').injectInside( fsize_inject );
 
 
 
        fsizeSmaller.addEvent('click', function() {
                setFontSize('smaller');
                /*
                fsizeSmaller.setStyle('text-decoration', 'underline');
                fsizeNormal.setStyles('');
                fsizeLarger.setStyles('');
                */
            } );
        fsizeNormal.addEvent('click', function() {
                setFontSize('normal');
                /*
                fsizeSmaller.setStyles('');
                fsizeNormal.setStyle('text-decoration', 'underline');
                fsizeLarger.setStyles('');
                */
            } );
        fsizeLarger.addEvent('click', function() {
                setFontSize('larger');
                /*
                fsizeSmaller.setStyles('');
                fsizeNormal.setStyles('');
                fsizeLarger.setStyle('text-decoration', 'underline');
                */
            } );
 
        var fsizecookie = Cookie.read( fsize_cookie );
        if(fsizecookie !== null) {
            fsizecookie = parseFloat(fsizecookie);
            if(fsizecookie > 0) {
                fsize = fsizecookie * 1;
                setFontSize('cookie');
            }
            /*
            if(fsize > 1) {
                fsizeNormal.setStyles('');
                fsizeLarger.setStyle('text-decoration', 'underline');
            } else if(fsize < 1) {
                fsizeNormal.setStyles('');
                fsizeSmaller.setStyle('text-decoration', 'underline');
            }
            */
        }
    }
 
});
 
function setFontSize(fs) {
    switch(fs) {
        case 'smaller':
            if(fsize <= fsize_min) break;
            fsize -= fsize_step;
            $( fsize_section ).setStyle('font-size', fsize+'em');
            Cookie.write( fsize_cookie , fsize, {duration: 365, path: '/'});
            break;
 
        case 'larger':
            if(fsize >= fsize_max) break;
            fsize += fsize_step;
            $( fsize_section ).setStyle('font-size', fsize+'em');
            Cookie.write( fsize_cookie , fsize, {duration: 365, path: '/'});
            break;
 
        case 'cookie':
            $( fsize_section ).setStyle('font-size', fsize+'em');
            break;
 
        case 'normal':
        default:
//            $( fsize_section ).setStyle(''); // trouble with IE8 ???
            fsize = 1;
            $( fsize_section ).setStyle('font-size', fsize+'em');
            Cookie.dispose( fsize_cookie , {path: '/'});
            document.location.href = document.location.href;
    }
}

CSS:

Das Aussehen der drei klickbaren Symbole oder z.B. Buchstaben wird durch CSS-Anweisungen bestimmt.

Folgende CSS-Klassen werden in irgendeine CSS-Datei eingesetzt die auf der Seite geladen wird.

".top" ist hier der angenommene Container in dem die Auswahl dargestellt werden soll.

/* FONTSIZER ------------------------------- */
.top {
    font-size: 1.0em
}
.top a {
    cursor:pointer;
    text-decoration: none;
}
.top .smaller {
    font-size: 10px;
    padding-right: 3px;
}
.top .bigger, .top .larger {
    font-size: 18px;
    padding-left: 2px;
    font-weight: bold;
}
.top .normal {
    font-size: 14px;
    padding-left: 2px;
    padding-right: 3px;
}

deutsch/andere-erweiterungen/mootools/fontsizer.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions