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:

Error correction 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]);

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

The appearance of the three clickable symbols or e.g. letters is determined by CSS instructions.

The following CSS classes are implemented into any CSS file that is loaded on the side.

".top" should be a hypothetical container in which the selection is shown.

/* 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.txt · Last modified: 2018/06/03 18:09 (external edit)

Show pagesource Old revisions