MooTools Font-Size Scroller with Cookie Save
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!
Once again AMAZING! happy 2009!
meh, i dont see the point in these. ctrl + does just fine
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.
Amazing!
I wish the slider was as smooth as your Facebook sliders though :)
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.
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.
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/
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)
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? .
Also to quote “Liam” in an older post:
I wish I’d thought of this in the first place :)
Another excellent tutorial. A slider is a nice little UI feature for controlling font sizes.
Excellent script! Very simple and easy to implement. Kudos!
Cool idea. thanks for sharing it with everyone
Hello Guys,
this script dont work on 1.2.3 and the dollar fix.
Any Idea?
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).
Is there anyway to do it without the slider and just use Plus and Minus signs?
Nice information, I really appreciate the way you presented.Thanks for sharing..
Mr. Walsh,,hello! I hve something to ask…How to store a comment in a page by using only javascript otherwise cookie…..