The html blog » cookie http://htmlblog.net The web sandbox of Asvin Balloo Wed, 07 Oct 2009 17:20:33 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Simple YUI Cookie example – javascript text magnifier for your page http://htmlblog.net/simple-yui-cookie-example/ http://htmlblog.net/simple-yui-cookie-example/#comments Mon, 30 Jun 2008 06:11:16 +0000 asvin http://htmlblog.net/?p=6 Cookie

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 :

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. 		<title>yui cookie</title>
  6. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	</head>
  9. <div><img src="A+.gif" alt="increase font size" id="increaseFont" /></div>
  10. <div><img src="A-.gif" alt="decrease font size" id="decreaseFont" /></div>
  11. <div id="news-main">
  12. 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
  13. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa 	</div>
  14.  
  15. 	</body>
  16. </html>
  17.  

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).

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. 		<title>yui cookie</title>
  6. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	</head>
  9. <div><img src="A+.gif" alt="increase font size" id="increaseFont" /></div>
  10. <div><img src="A-.gif" alt="decrease font size" id="decreaseFont" /></div>
  11. <div id="news-main">
  12. 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
  13. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
  14. 		</div>
  15.  
  16. 		<!-- js -->
  17. 		<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  18. 		<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/cookie/cookie-beta-min.js"></script>
  19. 		<!-- /js -->
  20. 	</body>
  21. </html>
  22.  

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

  1.  
  2. var updateFontSize = function(o, params){
  3. 	try{
  4. 		if(params.type == 'increase'){
  5. 			newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) + 1;
  6. 		}
  7. 		else{
  8. 			newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) - 1;
  9. 		}
  10.  
  11. 		YAHOO.util.Dom.setStyle(params.id, 'font-size', newSize + 'px');
  12. 		YAHOO.util.Cookie.set("news-size", newSize, { path: "/", expires: new Date("December 22, 2010") });
  13. 	}
  14. 	catch(e){}
  15. };
  16.  
  17. YAHOO.util.Event.addListener('increaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'increase'});
  18. YAHOO.util.Event.addListener('decreaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'decrease'});
  19. YAHOO.util.Event.addListener(window, 'load', function(){
  20. 	try{
  21. 		var newsSize = YAHOO.util.Cookie.get("news-size", function(value){
  22. 	        	YAHOO.util.Dom.setStyle('news-main', 'font-size', value + 'px');
  23. 		});
  24. 	}
  25. 	catch(e){}
  26. });
  27.  

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 :

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. 		<title>yui cookie</title>
  6. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	</head>
  9. <div><img src="A+.gif" alt="increase font size" id="increaseFont" /></div>
  10. <div><img src="A-.gif" alt="decrease font size" id="decreaseFont" /></div>
  11. <div id="news-main">
  12. 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
  13. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
  14. 		</div>
  15.  
  16. 		<!-- js -->
  17. 		<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  18. 		<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/cookie/cookie-beta-min.js"></script>
  19. 		<!-- /js -->
  20.  
  21. 		<script type="text/javascript">
  22. 		var updateFontSize = function(o, params){
  23. 			try{
  24. 				if(params.type == 'increase'){
  25. 					newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) + 1;
  26. 				}
  27. 				else{
  28. 					newSize = parseInt(YAHOO.util.Dom.getStyle(params.id, 'font-size'), 10) - 1;
  29. 				}
  30.  
  31. 				YAHOO.util.Dom.setStyle(params.id, 'font-size', newSize + 'px');
  32. 				YAHOO.util.Cookie.set("news-size", newSize, { path: "/", expires: new Date("December 22, 2010") });
  33. 			}
  34. 			catch(e){}
  35. 		};
  36.  
  37. 		YAHOO.util.Event.addListener('increaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'increase'});
  38. 		YAHOO.util.Event.addListener('decreaseFont', 'click', updateFontSize, {"id" : 'news-main', "type" : 'decrease'});
  39. 		YAHOO.util.Event.addListener(window, 'load', function(){
  40. 			try{
  41. 				var newsSize = YAHOO.util.Cookie.get("news-size", function(value){
  42. 	        			YAHOO.util.Dom.setStyle('news-main', 'font-size', value + 'px');
  43. 				});
  44. 			}
  45. 			catch(e){}
  46. 		});
  47. 		</script>
  48. 	</body>
  49. </html>
  50.  

Download sample demo.

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

]]> http://htmlblog.net/simple-yui-cookie-example/feed/ 2