Simple YUI Cookie example – javascript text magnifier for your page

asvin — Mon, 30 Jun 2008 06:11:16 +0000

Since YUI 2.5.0 there’s the Cookie utility and at this time of posting, it’s still in beta version.
I’ll show you how we can use this simple utility to write a small javascript app.

The piece of code we will be writing, using the YUI library (my favorite), will allow users to increase/decrease their font size for a block of text, storing the font size in a cookie
so that when they return to the page they don’t have to modify the font size again.

You can view a live demo here.

Getting started.

Our page will consist of a block of text, along with 2 images. One to increase the font size and the other one to decrease it.
The images we’ll be using :

So the HTML goes like that :



	
		yui cookie
		
	
	
		
		
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa

We define unique ids for DOM manipulation afterwards.

Next we add the necessary YUI libraries. We will be using

hosted at the geolocated Yahoo servers .

We add these two lines of code at the end of the file, before the closing body tag, to maximise performance (more on that in a later post).



	
		yui cookie
		
	
	
		
		
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa

Our page is almost ready we just have to write the code to update the font size. The javascript code goes like this,

var updateFontSize = function(o, params){
	try{
		if(params.type == 'increase'){
			newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) + 1;
		}
		else{
			newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) - 1;
		}

		YAHOO.util.Dom.setStyle(params.id, 'font-size', newSize + 'px');
		YAHOO.util.Cookie.set("news-size", newSize, { path: "/", expires: new Date("December 22, 2010") });
	}
	catch(e){}
};

YAHOO.util.Event.addListener('increaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'increase'});
YAHOO.util.Event.addListener('decreaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'decrease'});
YAHOO.util.Event.addListener(window, 'load', function(){
	try{
		var newsSize = YAHOO.util.Cookie.get("news-size", function(value){
	        	YAHOO.util.Dom.setStyle('news-main', 'font-size', value + 'px');
		});
	}
	catch(e){}
});

Now we let us have an extensive look at the code above.

We define a function updateFontSize which takes 2 parameters, the second one being json data we will be passing using YUI addListener method.
Line 3 checks whether we want to increase or decrease the font size. In any case we get the current font size of the text using
YAHOO.util.Dom.getStyle method which will return a value of 11px for example. We then use the parseInt function to return only the integer so that
we can increase/decrease it by 1;

After getting the new size in the newSize variable, we just apply it to the block of text using the YAHOO.util.Dom.setStyle method :

YAHOO.util.Dom.setStyle(params.id, 'font-size', newSize + 'px');

the params.id being the id on which we want the style to be applied on and passed through at line 16/17 above.

Line 11 just sets the cookie for future visits, giving it a name and an expiration date.

The whole block is surrounded by try catch statement.

Listeners

In line 16 and 17 we add event listeners to the respective images, one to increase the font size, the other one to decrease it

YAHOO.util.Event.addListener('increaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'increase'});
YAHOO.util.Event.addListener('decreaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'decrease'});

For simple understanding the above code just says when someone click on the increaseFont id, call the updateFontSize function,
with the id and the type as parameters. The parameter is the JSON data I was talking earlier.

Line 18 says when the after the window has loaded completely, we try to get the news-size cookie.

YAHOO.util.Event.addListener(window, 'load', function(){
	try{
		var newsSize = YAHOO.util.Cookie.get("news-size", function(value){

If the latter doesn’t exist, it
will return false, else it returns the value in it, and we just take the value and apply it to the block of text via the YAHOO.util.Dom.setStyle method.

var newsSize = YAHOO.util.Cookie.get("news-size", function(value){
	YAHOO.util.Dom.setStyle('news-main', 'font-size', value + 'px');
}

As always we surround the block with try catch statements.

Our final code looks that that :



	
		yui cookie
		
	
	
		
		
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa

Of course all this can be done with using the YUI library, but it’s my fav. ;-)

The html blog » css font dom

Simple YUI Cookie example – javascript text magnifier for your page

Getting started.

Now we let us have an extensive look at the code above.

Listeners

Our final code looks that that :