Save Text Size Preference Using MooTools 1.2

Discussion

1. Catar4x

   Perfect with Mootools !
   Thank you very much:)
2. Eric Wendelin

   No problem! MooTools makes it too easy!
3. Binny V A

   Nice script – but IMO, this function should be left to the browser.
4. Eric Wendelin

   @Binny:

   I totally agree, but this functionality is not yet handled properly by all browsers. Furthermore, certain websites have smaller font sizes as part of their design and this code here allows users to customize it for your site.

   It is not the best solution by any means but I think it is a good one for now.
5. Catar4x

   I make a reset body normal (French translation) :

         function resizeText(multiplier) {
           var fontsz = "0.69em"; // Taille de base qui équivaut à 10px
           // Si l'on ne reset pas le css
           if(multiplier != 2) {
           if (Cookie.get('site_font_size')) {
             // Si le cookie existe déjà, on prends sa valeur
             fontsz = Cookie.get('site_font_size');
           }
           fontsz = parseFloat(fontsz) + (multiplier * 0.2) + "em";
           }
           else {
           var fontsz = "0.69em"; // Taille normal qui équivaut à 10px	
           }
           // Changement de la taille du body
           document.body.style.fontSize = fontsz;
           
           // Mise à jour du cookie 
           var myCookie = Cookie.set('site_font_size', fontsz, {
             domain: 'dbdreams.net',
             duration: 365 // 1 an
           });
         }
   
6. Cosmin

   Firefox 3 > it doesn’t work, meaning I cannot change the text size…have you done something with the links meanwhile?
7. Eric Wendelin

   @Cosmin:
   Oops! I upgraded Mootools from 1.2 beta to 1.2 final and they changed the API!

   Page fixed, and thanks for letting me know!
8. Geek34

   cookie.get don’t work
9. Eric Wendelin

   @Geek34:
   Yes, the Mootools Cookie class has changed since this was written. The correct functions are Cookie.read() and Cookie.write() respectively :)
10. Liam

    Instead of using document.body.style.fontSize = fontsz; you can use morph and change the default unit to em so its a smooth transition instead of the jump in size:

    //set up morph
    var morphTextSize = new Fx.Morph(document.body,{duration:300,transition:Fx.Transitions.linear,'unit':'em'});
    
    //set font size
    morphTextSize.start({
    'font-size': parseFloat(fontsz) + (multiplier * 0.2)
    });
11. Andy

    There seems to be an error with the way your blog parsed the domain on line 13. For a JS newb like me it was a little confusing for a moment :P
12. David Walsh

    @Andy: Line 13 is fine. What error?
13. Vojtech Machacek

    I tried to implement it with jquery and radSlider ASP.NET control. But i reach some problems. After I read comments, and figure out, that best solutions is make “fake” button for text size changing, which shows bubble with something like “Wanna change text size – try CTRL + mouse wheel and if it doesn’t work get better browser”… That’s best solution IMO :)
14. Richard Clark

    Hi,

    I would like to target by ID a div (eg the ‘content’ div in your example) and change just the text size of this when the button is clicked, and not all of the text.

    How would I amend the following line to do this?

    // Change body text size   
    document.body.style.fontSize = fontsz;
    

    I’ve tried – document.body.getElementById("content") = fontsz; but that didn’t seem to work.

    Any help would be greatly appreciated

    Thanks,

    Richard
• Eric M Wendelin

  Richard:

  You’ll want something like

  document.getElementById('content').style.fontSize = fontsz;

  Let me know if that doesn’t work for you. Cheers, Eric
15. Matt Thomas

    Great Post! I was wondering if there is a way to automatically detect the domain to make this script more portable?

    Thanks!

    Best,

    Matt
• Eric Wendelin

  Thanks, Matt.

  You can use window.location.host to get the current domain.

  Cheers,
  Eric
16. Andreas

    I swear noone has tried the PHP-snippet, as its obviously sooo wrong, uah.
    Try this one