I was telling you in a previous article – Javascript – text resize – how you can give your site’s visitors the possibility to see your page’s content at different text sizes, using javascript. Let’s take this further and think a little about the user… now, if he really needs a bigger text size, then he will have to use those buttons or links on each page – not so convenient, right?

Well, don’t you worry about this because that’s what we have cookies for!

Using the same example as in the previous article, here is what you have to do:

1. Add two more functions to the javascript file for cookie’s handling

Javascript code:

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

The createCookie function has three parameters: the name and value of the cookie and the number of days it is to remain active. If you set the number of days to 0 the cookie is trashed when the user closes the browser. If you set the days to a negative number the cookie is trashed immediately.
In my example, I used “textsizestyle” as cookie’s name, javascript variable textsize as value and I set it to be active for 365 days: createCookie("textsizestyle", textsize, 365);.

The readCookie function has only one parameter: the name of the cookie. It returns the value of that cookie or null.
In my example, I used “textsizestyle” as cookie’s name: readCookie("textsizestyle");

More info on these two functions and cookies in general Go to Quirksmode site.

2. Use createCookie to store user’s preferred text size

I used it in the fsize function, so that each time the user change the text size, the font value is stored in the cookie. Here is the modified fsize function:

function fsize(size,unit,id){
var vfontsize = document.getElementById(id);
if(vfontsize){
vfontsize.style.fontSize = size + unit;
createCookie("textsizestyle", textsize, 365);
}
}

3. Use readCookie to change text size on rendering

I added the following piece of code at the end of the page to read the cookie’s value and in case there is a value stored into the cookie to force the page content to be render at that specific font size.

<script type="text/javascript">
var cookie = readCookie("textsizestyle");
textsize = cookie ? cookie : 10;
fsize(textsize,'px','content');
</script>

To make it easy, I have put them all js functions in a javascript file, ready for you to download and add to your site.

[ Download Javascript Text Resize File ]

That’s it! Enjoy!

If you want to give your site’s visitors the possibility to see your page’s content at different text sizes, you can do it with the following javascript text resize solution.

First you should decide which part of the page will be affected by text resizing and mark it with an id – in my example id=”content”. It can be a div or a table or the entire page if you want.

Alright, the javascript code..

Simple Text size Switcher

function fsize(size,unit,id){
var vfontsize = document.getElementById(id);
if(vfontsize){
vfontsize.style.fontSize = size + unit;
}
}

This function has 3 parameters: size (like 10, 80, 2), unit (like px, %, em) and id (like content).

Next add links for text resize – you can use text or images for these – for example:

<a href="javascript:fsize(10,'px','content');"> Increase size </a>
<a href="javascript:fsize(14,'px','content');"> Reduce size </a>

There you have a simple text size switcher!

Dynamic Text Size Changer

I wanted to change the text size dynamically by 2 px at each click, so I changed the code a little bit. I used another function to calculate the new value of the text size by adding or subtracting 2 out of a js variable (textsize) which holds the current text size value.

Here is what you need to add into the javascript code:

var textsize = 10;
function changetextsize(up){
if(up){
textsize = parseFloat(textsize)+2;
}else{
textsize =parseFloat(textsize)-2;
}
}

Now, add onclick event on those links to call the new function and also change the first parameter of fsize function with the js var (textsize) – like this:


<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(1);"> Increase size </a>
<a href="javascript:fsize(textsize,'px','content');" onclick="changetextsize(0);"> Reduce
size </a>

That should do it! Enjoy!

It’s about time to highlight some of my favourite WP plugins that can help you to make money online.
Please note that these plugins may or may not work on your particular WordPress installation, as it will depend on your version of WP and the latest plugin upate.

1. All-in-One SEO Pack – Great for auto-adding of meta tags, optimizing titles, etc. Simple to install.

2. AdSense Manager – Makes it easier for you to post your Adsense ads within your WordPress blogs (even within posts). You can change different types of ads. And, it’s widget-enabled. You can also optionally ‘donate’ part of your ad space to the creator of this plugin.

3. Ad Rotator – If you plan to run different affiliate links or your own direct ads, then this might be a good way to show the different ads you’ve got without overcrowding your blog with too many ads.

4. Amazon Simple Admin – Enables you to insert Amazon products within your blog posts.

5. Amazon Smartlinks Widget – Another way to make money off your Amazon affiliate links. It can post your Wish List, Amazon Bestsellers, etc. with your affiliate ID linked to the displays. Also widgetized.

6. Text Link Ads – If you wish to run text link ads, then you gotta have the plugin that comes when you set up your TLA account. It’s also now widget-enabled.

7. WP Directory – Looking to start directories, but don’t want to handle a massive directory software or application? Try this simple solution that you can manage via WordPress. You can create paid listings, sponsored links, marketplace, etc. Really useful!

8. textLink Adder – A good little plugin that enables you to sell direct text links or run your own affiliate links.

9. Quick Shop – A sidebar widget that enables you to add a Paypal button, either for donations or for selling an item or two. Has a mini shopping cart feature.

10. All in One AdSense and YPN – Enables you to add Adsense or Yahoo Publishing Network ads in to your posts.

11. Ad-minister – Helps you to manage your blog’s ads, including ad rotation.

12. AdServe – A plugin that helps you to manage direct advertising on your blog. It comes various options (how many impressions available, types of banners, etc.)

Be sure to do a test drive to check your WordPress version compatibility with this plugin each.
Enjoy!