You’ve probably seen the three A’s on various websites, especially public sector websites; that you can click on to increase the font size on the web site. I’m personally not a huge fan of those. In my opinion it is much better to explain to the user how they can use the built in browser functionality to do this instead. This will also increase the font size on all websites not just the one you created. You could do this by linking to a page with an explanation and screenshots of how to do this in the most popular browsers.
However sometimes I still need to create those three A’s. Below is a little jQuery plugin that does this.
See the demo
Font resizing plugin
This plugin will create an ordered list with three links to increase the font size. The plugin adds three different classes to the body element, which then can be used to set the base font size.
body.small {
font-size: 80%;
}
body.medium {
font-size: 120%;
}
body.large {
font-size: 140%;
}The plugin code.
(function($) {
$.fn.fontresizing = function(customOptions) {
var options = $.extend({}, $.fn.fontresizing.defaultOptions, customOptions);
var bodyClasses = '' + options.smallClass + ' ' + options.mediumClass + ' ' + options.largeClass + '';
return this.each(function() {
$(this).append('<ol class="' + options.fontresizingClass + '"><li><a href="" class="' + options.smallClass + '">A</a></li><li><a href="" class="' + options.mediumClass + '">A</a></li><li><a href="" class="' + options.largeClass + '">A</a></li></ol>');
$('ol.' + options.fontresizingClass + ' a').click(function() {
var cssClass = $(this).attr('class');
$('body').removeClass(bodyClasses).addClass(cssClass);
createCookie('fontresizingClass', cssClass, options.cookieDuration);
return false;
});
var fontresizingClass = readCookie('fontresizingClass');
if (fontresizingClass == options.smallClass || fontresizingClass == options.mediumClass || fontresizingClass == options.largeClass) {
$('body').removeClass(bodyClasses).addClass(fontresizingClass);
}
// cookie functions http://www.quirksmode.org/js/cookies.html
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;
}
});
};
$.fn.fontresizing.defaultOptions = {
smallClass: 'small',
mediumClass: 'medium',
largeClass: 'large',
fontresizingClass: 'font-resizing',
cookieDuration: 365
};
})(jQuery);Breaking it down
We start by creating a private scope for our jQuery code. The reason for this is so we don’t have to worry about conflicts with other libraries.
(function($) {
...
})(jQuery);We then add a new method to the jQuery.fn object
(function($) {
$.fn.fontresizing = function(customOptions) {
...
};
})(jQuery);Combine the custom options with the default options.
(function($) {
$.fn.fontresizing = function(customOptions) {
var options = $.extend({}, $.fn.fontresizing.defaultOptions, customOptions);
...
};
$.fn.fontresizing.defaultOptions = {
smallClass: 'small',
mediumClass: 'medium',
largeClass: 'large',
fontresizingClass: 'font-resizing',
cookieDuration: 365
};
})(jQuery);Next we iterate over the jQuery object or jQuery wrapper set, and return “this” (the current jQuery object), so we don’t break the jQuery chaining functionality.
(function($) {
$.fn.fontresizing = function(customOptions) {
var options = $.extend({}, $.fn.fontresizing.defaultOptions, customOptions);
var bodyClasses = '' + options.smallClass + ' ' + options.mediumClass + ' ' + options.largeClass + '';
return this.each(function() {
...
});
};
$.fn.fontresizing.defaultOptions = {
smallClass: 'small',
mediumClass: 'medium',
largeClass: 'large',
fontresizingClass: 'font-resizing',
cookieDuration: 365
};
})(jQuery);Now we come to the actual code for creating the links and attaching click events to them.
(function($) {
$.fn.fontresizing = function(customOptions) {
var options = $.extend({}, $.fn.fontresizing.defaultOptions, customOptions);
var bodyClasses = '' + options.smallClass + ' ' + options.mediumClass + ' ' + options.largeClass + '';
return this.each(function() {
$(this).append('<ol class="' + options.fontresizingClass + '"><li><a href="" class="' + options.smallClass + '">A</a></li><li><a href="" class="' + options.mediumClass + '">A</a></li><li><a href="" class="' + options.largeClass + '">A</a></li></ol>');
$('ol.' + options.fontresizingClass + ' a').click(function() {
var cssClass = $(this).attr('class');
$('body').removeClass(bodyClasses).addClass(cssClass);
createCookie('fontresizingClass', cssClass, options.cookieDuration);
return false;
});
...
});
};
$.fn.fontresizing.defaultOptions = {
smallClass: 'small',
mediumClass: 'medium',
largeClass: 'large',
fontresizingClass: 'font-resizing',
cookieDuration: 365
};
})(jQuery);Lastly we have the cookie functions to read and create the cookie to hold the font size choices the user has made.
...
var fontresizingClass = readCookie('fontresizingClass');
if (fontresizingClass == options.smallClass || fontresizingClass == options.mediumClass || fontresizingClass == options.largeClass) {
$('body').removeClass(bodyClasses).addClass(fontresizingClass);
}
// cookie functions from http://www.quirksmode.org/js/cookies.html
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;
}
...Usage
To use the plugin simply add a reference to the jQuery library file, and copy the code into your page. After you’ve done that you can use it by calling the fontresizing method
// With default options
jQuery(function($) {
$('#tools').fontresizing();
});
// With custom options
jQuery(function($) {
$('#tools').fontresizing({
smallClass: 'small',
mediumClass: 'medium',
largeClass: 'large',
fontresizingClass: 'font-resizing',
cookieDuration: 365
});
});Print plugin
Another thing that many clients ask for is a print link. Below is a little jQuery plugin that creates the link and attaches a click event that triggers the browsers print dialog.
(function($) {
$.fn.print = function(customOptions) {
var options = $.extend({}, $.fn.print.defaultOptions, customOptions);
return this.each(function() {
$(this).append('<a href="" class="' + options.printClass + '">' + options.printText + '</a>');
$('a.' + options.printClass + '').click(function() {
window.print();
return false;
});
});
};
$.fn.print.defaultOptions = {
printClass: 'print',
printText: 'Print'
};
})(jQuery);Here we also generate the link with JavaScript, so that users who don’t have JavaScript wont see it – since they cannot use it anyway. When you click on the link you’ll see the print dialog; use this with CSS to create a printer friendly version of your page.
To create CSS rules for print either use the @media
@media print {
/* CSS rules here */
}or link to an external CSS file and add the media=”print” attribute.
<link rel="stylesheet" href="styles/print.css" media="print" type="text/css" />
Usage
// With default options
jQuery(function($) {
$('#tools').print();
});
// With custom options
jQuery(function($) {
$('#tools').print({
printText: 'Print this page'
});
});Download the code or see the demo
RSS feed
Twitter
.