Thread

Greetings,

I will shortly start developing a site intended for an older audience (60 and over) and I want to add the possibility to resize the text throughout the site (like with buttons indicating font size).

Can someone point me in the right (or one of the right) directions to go with this? Do I switch the CSS file? Has anyone got experience putting this into practice?

I’m all ears and thanks in advance!

Do you want to do this just in JavaScript, or get it to work without JS too?

Do you want to do this just in JavaScript, or get it to work without JS too?

I’m don’t worry too much about JS being enabled, if that’s what you mean—I’ll use JS in menus etc., mainly because clients want it.

Basically, I’m looking for the method that is easiest to maintain, easiest to implement, and makes the most sense usability-wise.

Thanks for the reply!

So, the easiest to implement method is definitely to use JavaScript to alter the font size dynamically (and set a cookie to remember the user’s font size). I’ll assume you’re using jQuery, because, well, you should be 😉

Firstly, we’ll define a function to resize the text and set it into a cookie. We’ll also include some functions to let us use cookies easier.

$(document).ready(function(){
    /**
      * Cookie utilities
      */
    function createCookie(name,value,days) { if (days) { var date = new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires = "; expires="+date.toGMTString();} else { var expires = ""; } [removed] = name+"="+value+expires+"; path=/";}
    function readCookie(name) {var nameEQ = name + "=";var ca = [removed].split(';');for(var i=0;i < ca.length;i++) {var c = ca[i];while (c.charAt(0)==' ') { c = c.substring(1,c.length); }if (c.indexOf(nameEQ) == 0) { return c.substring(nameEQ.length,c.length); } }return null;}
    function eraseCookie(name) {createCookie(name,"",-1);}

    /**
      * Resize the text
      */
    function resize_text(multiplier) {
        if (document.body.style.fontSize == "") {
            document.body.style.fontSize = "1.0em";
        }

        if (readCookie('font_size')) { document.body.style.fontSize = readCookie('font_size'); }
        
        document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
        createCookie('font_size', document.body.style.fontSize);
    }
});

We’ll then attach this function to the click events of our links.

$(document).ready(function(){
    $('#font_size_increase').click(function(){ resize_text(1); });
    $('#font_size_decrease').click(function(){ resize_text(-1); });
});

Make sure you add two anchors to your page with the IDs of font_size_increase and font_size_decrease respectively. When the users click on these links, the size of your site’s font should resize dynamically! Refresh the page and it should maintain the page size.

References - The cookies scripts, Text resizing

Thanks so much for this info!

One question, and for some an embarrassing one: when you say “I’ll assume you’re using jQuery, because, well, you should be” could you tell me a little more about that?

Basically, I come to this all from a design background and I don’t know javascript at all. Are you talking about the jquery module that I can install? Or…

A baby question, I know, but I’m in the dark!

Thanks again, much appreciated!

Don’t worry, being a developer I often naïvely assume people know what I’m talking about 😊 jQuery is a brilliantly powerful and elegant JavaScript library that makes working with JS, adding effects, AJAX functionality, DOM navigation and lots more effortlessly easy. Including jQuery is very easy too; you include it like a regular external JavaScript file in a [removed][removed] tag.

Luckily, if you’ve got the jQuery module enabled, you’ll be able to include the JavaScript library really easily by using the jquery:script_tag tag.

{exp:jquery:script_tag}