Dynamic font resizing

Dynamic changing of the font sizes.

Frequently, a font enlargement/reduction is desired by user input.

With this JS snippet it is possible without problem.

FIXME better translate

fontsize V1.0 17.12.10

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

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

Tag: –

Filename: mootools.fontsize.js

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

Condition: → Browser JavaScript active

Embed into the page:

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

“top” is an assumed container that can also mean different (see CSS below).

With  the JavaScript file "mootools.fontsize.js" is integrated as a plugin from the folder "template/lib/mootools/plugin-1.2/". Also, the framework MooTools V1.2x is automatically included.

<div id="fontsizer"></div> is the placeholder for output control like symbols or letters.

Now, we still lack the identification of the area in which the switch operates. In this example that is the container with id="content".

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

Of course, the names and values are adjusted in the script, see "CUSTOM var ----...".

JavaScript:

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.set( 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.set( fsize_cookie , fsize, {duration: 365, path: '/'});
            break;
 
        case 'cookie':
            $( fsize_section ).setStyle('font-size', fsize+'em');
            break;
 
        case 'normal':
        default:
            $( fsize_section ).setStyle('');
            fsize = 1;
            $( fsize_section ).setStyle('font-size', fsize+'em');
            Cookie.remove( 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;
}

english/other-enhancements/mootools/fontsizer.1292617073.txt.gz · Last modified: 2018/06/03 18:08 (external edit)

Show pagesource Old revisions