Treehouse

MooTools Font-Size Scroller with Cookie Save

By on  

Font Slider

Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why I've built a MooTools-driven font-size slider that saves the user's preference into a cookie. Let me show you how to add this to your websites.

The XHTML

<div id="font-area">
	<div id="font-slider"></div>
	<div id="font-label"></div><span id="font-update">Saved!</span>
</div>

Above is the code to create the slider area as well as the "update message" slider that will pop in when the user updates their font size preference.

The CSS

#font-area		{ background:url(horizontal.jpg) 0 8px no-repeat; height:23px; width:500px; margin:0 0 5px 0; }
#font-slider	{ background:url(button-horizontal.jpg) no-repeat; width:25px; height:23px; cursor:pointer; }
#font-label		{ font-weight:bold; float:left; }
#font-update	{ color:#090; padding:0 0 0 15px; }

The CSS is very much like my Facebook Sliders article. Feel free to style the slider however you'd like.

The MooTools 1.2 JavaScript

/* do it */
window.addEvent('domready', function() {
	
	//load the font-size cookie if it exists and change body font
	var start = Cookie.read('fontsize') || '12';
	document.body.setStyle('font-size',start + 'px');
	$('font-label').set('text','Font: ' + start);
	
	//create the message slider
	var fx = new Fx.Slide('font-update', {
		mode: 'horizontal'
	}).hide();

	
	//create the slider
	var changed = 0;
	var mySlide = new Slider($('font-area'), $('font-slider'), {  
		steps: 9,
		range: [12,30],
		wheel: 1,
		snap: 1,
		onChange: function(size){
			$('font-label').set('text','Font: ' + size);		//set the label
			Cookie.write('fontsize',size);			//set the cookie
			document.body.setStyle('font-size',size + 'px'); //set the document font size
			if(changed) {
				fx.slideIn();
				(function() { fx.slideOut(); }).delay(2000);
			}
			changed = 1;
		}
	}).set(start);
	
});

There's actually very little JavaScript to this create this functionality thanks to MooTools. Once the DOM is ready, we read in the saved font size (if one exists) and set it accordingly. Next we create our update message slider JavaScript. The last part is the fun part: the font size slider. The options are fairly self explanatory until the change event. On slider change, we:

  • update the font size label
  • write a cookie to save the font size value
  • change the document's font size
  • slide in the update text and slide it out two seconds later.

Have improvements for my slider? Want to use it on an upcoming project? Share!

ydkjs-2.png

Recent Features

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

  • AJAX Page Loads Using MooTools Fx.Explode

    Note: All credit for Fx.Explode goes to Jan Kassens. One of the awesome pieces of code in MooTools Core Developer Jan Kassens' sandbox is his Fx.Explode functionality. When you click on any of the designated Fx.Explode elements, the elements "explode" off of the...

Discussion

  1. Rich

    Once again AMAZING! happy 2009!

  2. sam

    meh, i dont see the point in these. “ctrl +” does just fine

  3. To each their own. I doubt many non-web-savvy users know that control. That’s why you see “adjust your font size” scripts on many popular sites.

  4. Amazing!
    I wish the slider was as smooth as your Facebook sliders though :)

  5. Unfortunately it would need to be a much smaller scale since the font size range isn’t as long. I wanted to keep the imagery big for the sake of my example.

  6. h-a-r-v

    While I’ve just backed your ass in the image saving prevention script legendary post, I have to disagree this time. Most popular sites use this ’cause their designers aren’t well-educated in the accessibility area, or at least they’re not up-to-date. I’ve used such a solution myself some time ago as well, but I abandoned it due to strong arguments against it being raised now. Assuming that only people with sight disabilities need text zooming – believe me, they know ctrl+ key shortcut, especially that it zooms everything – and that’s what they need – not just some text only (what about fixed menus, etc.?). Not to mention they probably use 800×600 which is enough in most cases. However, blind people don’t need it at all and what they get in return is their screen reader reading these links, which completely makes no sense.

    Such scripts were invented ’cause for a long time not all of the browsers supported ctrl+ (damn IE that is). Just like the box model was invented to workaround IE’s lack of css table grid support, etc..

    Nowadays they do more damage than they help. Don’t believe me – read serious accessibility sites and people with sight disabilities opinions.

    Btw. your wp-anti spam keeps blocking my comments for no reason. I need to ctrl+f5.

  7. Great Walsh,
    it can be mashed up with an example i uploaded on this italian site where i put my tutorial/code/video http://www.ictv.it/file/vedi/930/creare-una-console-come-in-facebook/

  8. William Murray

    As an accessibility expert for a software company, I can see the benefit of a feature like this, although there are certainly caveats for its implementation. A couple of suggestions for anyone seriously thinking about using this kind of tool:

    Use a keyboard accessible slider (here are a few examples for you)
    Consider hiding a text-resizing slider from screen readers, as it may have limited or no application for blind users (this addresses h-a-r-v’s comment)
    Keep in mind how the slider’s use will affect its own size/placement on the screen (it’s jarring to see the slider move vertically on screen as you increase/decrease the font size…perhaps the resize effect should happen when the slider is released or a “Set” button is clicked)

  9. yeah i saw the comment… usually i wrote the source where i take inspiration (when i take some peace of code and not write all by myself) it s strange this time i didn t :)

    But there ‘ s not bad intention in this :) i didn t write you the comment i wrote yesterday if I didn’t wanna show you the video :), no? .

  10. Also to quote “Liam” in an older post:

    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)
    });
    

    I wish I’d thought of this in the first place :)

  11. Another excellent tutorial. A slider is a nice little UI feature for controlling font sizes.

  12. Excellent script! Very simple and easy to implement. Kudos!

  13. Cool idea. thanks for sharing it with everyone

  14. McKay

    Hello Guys,

    this script dont work on 1.2.3 and the dollar fix.
    Any Idea?

  15. Havent been able to get this wto work with 1.2.1 … is there any chance of an update?

    Its an excellent script and i cant find any other mootools text resizers – tons for jquery but thats just typical really (i make the desicion to use moo over jq for a site based upon the easy of implementation of the most complex components, then more or less always find out the other framework does something i’m having trouble with).

  16. Chris

    Is there anyway to do it without the slider and just use Plus and Minus signs?

  17. Nice information, I really appreciate the way you presented.Thanks for sharing..

  18. Mr. Walsh,,hello! I hve something to ask…How to store a comment in a page by using only javascript otherwise cookie…..

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!