This script is very old and is likely not to work with the current version of Mootools!

When the large ‘A’ is pressed the font-size increases a little. The smaller ‘A’ resizes the font to it’s original size. It’s a piece of eyecandy and it’s very effective for websites having small font-sizes. I checked how they implemented this function and I found they where using their ‘old’ moo.fx. By old I mean their other library mootools is newer. Anyway I was looking for a way to implement such a function using mootools and I have to say it was very easy. I wrapped the functionality in a class called ‘Fx.Font’.

Example

a A

rLorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris pede. Nullam lobortis velit id ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut dui. Proin eget arcu. Curabitur condimentum felis ut libero sollicitudin ultricies. Vestibulum ante leo, eleifend id, tincidunt quis, pulvinar quis, elit. Ut a est ac pede ornare dapibus. Curabitur pharetra convallis nibh. Praesent nibh nulla, lacinia eget, pharetra quis, facilisis quis, arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ante. Nulla facilisi. Nulla nulla nibh, mattis vitae, faucibus quis, pharetra at, erat. Nam at quam. Sed augue. Fusce facilisis leo ac est. Aenean eleifend. Donec at nulla. Fusce egestas libero vitae massa.

Etiam nec arcu ut eros elementum mattis. Maecenas faucibus. Nam nisl. Donec lacinia vulputate augue. Nullam faucibus accumsan elit. Nulla lobortis metus eu sapien. Vestibulum lacus. Proin condimentum ligula ac tortor. Ut ut eros. Cras ligula. Nulla tempus. Curabitur sit amet ante vitae arcu consectetuer lacinia. Fusce condimentum euismod enim.

The code

As you can see Fx.Font has four parameters. The first is an array of elements with the texts you want to resize, ’sid’ is the ID of the shrink button and ‘gid’ is the ID of the grow button. For both you can pass the ID as a string but you can also pass the element, it’s up to you. The fourth parameter is optional, ‘growsize’ is an integer value for how much the font-size should increase. The default grow size is 2px. 

// author: Bas Wenneker		website: http://www.solutoire.com
// Fx.Font is MIT-Licensed

Fx.Font = new Class({
	initialize: function(elements, sid, gid, growsize){
		this.growsize = (growsize) ? growsize : 2;
		this.elements = [];
 		elements.each(function(el){
			this.elements.push([el,el.getStyle(\'font-size\').toInt()]);
		},this);
		$(gid).onclick = function(){this.grow()}.bind(this);
		$(sid).onclick = function(){this.shrink()}.bind(this);
	},
	grow: function(){
		this.elements.each(function(el){
			if(el[0].getStyle(\'font-size\').toInt() == el[1])
				el[0].effect(\'font-size\',{duration:300,unit:\'px\'}).custom(el[1],el[1]+this.growsize);
		},this);
	},
	shrink: function(){
		this.elements.each(function(el){
			if(el[0].getStyle(\'font-size\').toInt() == el[1]+this.growsize)
				el[0].effect(\'font-size\',{duration:300,unit:\'px\'}).custom(el[1]+this.growsize, el[1]);
		},this);
	}
});

How to use ‘Fx.Font’

To use it get a copy of Fxfont.js or copy the commented code below. If you have the fx.font.js file place the following code between the header tags of your page: 

<script type=\"text/javascript\" sc=\"path/to/fx.font.js\"></script>

Of course you also need mootools, Fx.Font depends on the following packages:

  • main: Moo.js
  • native: Function.js, Array.js, String.js, Element.js
  • addons: Fx.js, Dom.js
  • plugins: Fxpack.js

Now we need the ID’s of the buttons and we need to select some elements to change the font-sizes. Assume your page has the following elements: 

<a href=\"#a\" id=\"shrink\">a</a> <a href=\"#A\" id=\"grow\">A</a>

<div class=\"sizeme\">
  <p>...text...</p>
  <p class=\"foo\">...foo text...</p>
  <p class=\"bar\">...bar text...</p>
</div>

NOTE: Make sure the class ’sizeme’ is declared and has something like ‘font-size: 11px;’ within the declaration. The font-size needs to be entered pixels (px).
The result of the code above will looks like this:

a A

…text…

…foo text…

…bar text…

…this block has no functionality btw…

Now where going to add the functionality to the grow and shrink buttons. Assume you want to increase the font-size of every ‘p’ element by 2 pixels. This can be done with the following lines of code: 

<script type=\"text/javascript\">
    window.onload = function(){
        new Fx.Font($$(\'p\'),$(\'shrink\'),$(\'grow\'));
    }
</script>

The result look like this:

a A

…text…

…foo text…

…bar text…

As you can see I use the $$ method to select elements in the page. Here are some examples to get you started. You can also check the documentation on Dom.js on mootools.net 

//returns an array of paragraphs with classname \'foo\'
$$(\'p.foo\')

//returns an array of divs with classname \'foo\'
$$(\'div.foo\')

//this example makes use of the Array.extend method
//returns an array of paragraphs with classname \'foo\' or \'bar\'
$$(\'p.foo\', \'p.bar\')

//returns an array of a elements with classname \'bar\' that
//are inside div elements with classname \'foo\'
$$(\'div.foo a.bar\')

Fx.FontPlus

Ali asked me if it’s possible to have three stages to grow and shrink. So I created a new class called Fx.FontPlus. The code looks very similar to Fx.Font, you can download Fx.FontPlus here. You can use the code like this: 

<a href=\"#a\" id=\"shrink\">a</a> <a href=\"#A\" id=\"grow\">A</a> <a href=\"#AA\" id=\"growmore\">AA</a>
<div class=\"sizeme\" style=\"font-size:11px\">
  <p>…text…</p>
  <p class=\"foo\">…foo text…</p>
  <p class=\"bar\">…bar text…</p>
</div>
<script type=\"text/javascript\">
   new Fx.FontPlus($$(\'p\'),$(\'shrink\'),$(\'grow\'),$(\'growmore\'));
</script>

There are two more parameters. I think you can figure out what they’re meant for
Have fun with it!

Using cookies to remember the font-size

Cookies can be useful when you need to store information about a visitor between different pages of your website. Nate asked me how to remember the users’ preference. It took me well counted 4 lines of code. W00t, I love Mootools!

I’m not going to explain the code, if you get stuck you should post a comment/send me an email. I made an example page with some comments. I used the same modules like before and I added Cookies.js. If you just wan the code then download Fxfontcookies.js.