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!

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    CSS Selection Styling

    The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.

  • By
    Introducing MooTools ScrollSpy

    I've been excited to release this plugin for a long time. MooTools ScrollSpy is a unique but simple MooTools plugin that listens to page scrolling and fires events based on where the user has scrolled to in the page. Now you can fire specific...

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!