Font size changer with jQuery

[crbn]

I took a shot at making a font size changer on a client's site using jQuery. I used a nice piece of code found from a blog, and got it working. However, I can't get it working with cookies, so that the size change would be persistent.

My code:

Code: Select all

$.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration
$.cookie('the_cookie', null); // delete cookie

$(document).ready(function(){

	$(".resizer").show();
	var $cookie_name = "FontSize";
	var originalFontSize = $('html').css('font-size');

	// if exists load saved value, otherwise store it
	if($.cookie($cookie_name)) {
		var $getSize = $.cookie($cookie_name);
		$("html").css({font-size : $getSize});
	}		
	else {
		$.cookie($cookie_name, originalFontSize);
	}

	var increaseclicks = 0;
	var decreaseclicks = 0;

	// Reset Font-Size.
	$(".resetFont").click(function(){
		$('html').css('font-size', originalFontSize);
		$.cookie($cookie_name, originalFontSize);
		increaseclicks = 0;
		decreaseclicks = 0;
	});

	// Increase Font Size
	$(".increaseFont").click(function(){
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);

	// use styles for tags. {IE6 fix} (because tag font size do not change on IE6)
		var newFontSize = currentFontSizeNum + 1;
		
		if (increaseclicks < 2) {
			$('html').css({'font-size': newFontSize});
			increaseclicks++;
			decreaseclicks--;
		}
		
		$.cookie($cookie_name, originalFontSize);
		return true;
	});

	// Decrease Font Size
	$(".decreaseFont").click(function(){
		var currentFontSize = $('html').css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum - 1;
		
		if (decreaseclicks <2) {
			// $('html').css('font-size', newFontSize); braces is an IE6 fix.
			$('html').css({'font-size': newFontSize});
			decreaseclicks++;
			increaseclicks--;
		}
		
		$.cookie($cookie_name, originalFontSize);
		return false;
});

});

Any help from a jQuery wizard?

[mauri]

Hi, I'm not a wizard... but i try...

I tried inserting your code in one page....
Firebug give me an error on:

Code: Select all

var $getSize = $.cookie($cookie_name);
$("html").css({font-size : $getSize});

I've "corrected" in

Code: Select all

var getSize = $.cookie($cookie_name);
$("html").css({"font-size" : getSize});

without the '$' of variable name and adding quotes on rule "font-size".

At this point, Firebug tells me "... $.cookie is not a function... "... Do you have inserted the jquery cookie plugin in your page?

Note:
the initial part of your code...

Code: Select all

$.cookie('the_cookie'); // get cookie
$.cookie('the_cookie', 'the_value'); // set cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // set cookie with an expiration
$.cookie('the_cookie', null); // delete cookie

is only a tutor? is not useful for your goal... Shows only how to set and get the cookie...

[crbn]

Duh, I guess I've been working for too long today to notice stuff like that first part of the code. I'll get a real cookie plugin and try again..

[crbn]

Got this working using another tutorial.

[Dr.CSS]

Would you mind sharing your solution?...

[crbn]

Ah, sure.

jQuery, I use this in an external file:

Code: Select all

$(document).ready(function(){

var startSize = $.cookie('fontSize');
var startSize = parseFloat(startSize);
var originalFontSize = $('html').css('font-size');

$('html').css('font-size', startSize);

var increaseclicks = 0;
var decreaseclicks = 0;

// Reset Font-Size.
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
increaseclicks = 0;
decreaseclicks = 0;
});

// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);

// use styles for tags. {IE6 fix} (because tag font size do not change on IE6)

var newFontSize = currentFontSizeNum + 1.5;
if (increaseclicks < 2) {
$('html').css({'font-size': newFontSize});
increaseclicks++;
decreaseclicks--;
}
return true;
});

// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum - 1.5;
if (decreaseclicks <2) {
// $('html').css('font-size', newFontSize); braces is an IE6 fix.
$('html').css({'font-size': newFontSize});
decreaseclicks++;
increaseclicks--;
}
return false;
});

});

Insert this JavaScript directly to your HTML:

Code: Select all

<__script__ type="text/javascript" language="javascript" src="*name of your jQuery file*">
<__script__ type="text/javascript" language="javascript">
window.onbeforeunload = leaveCookie;

function leaveCookie()
{
var FontSize = $('html').css('font-size');
var IntFontSize = parseFloat(FontSize, 10);
$.cookie('fontSize', IntFontSize);
}
</__script>

This sets the cookie when browser leaves the current page.

Finally you need three links in your HTML:

Code: Select all

<a href="#" class="resetFont">Reset font size</a>
<a href="#" class="increaseFont">Increase</a>
<a href="#" class="decreaseFont">Decrease</a>

Remember to set a font size to the html element in your CSS, or change the script accordingly. Should work with ems, pixels and points.

This allows two increases or decreases, so that the font size stays in acceptable size. Now I only need to tweak the cookie to store the number of clicks as well, because they reset every time a new page is loaded.

Used these two tutorials:
http://net.tutsplus.com/tutorials/javas ... your-text/
http://www.shopdev.co.uk/blog/text-resi ... th-jquery/