Increase font size on the page with JQuery
Wednesday 23rd December 2009 by admin
Giving visitors to your site the ability to increase font size on the page – it’s available in most browsers tool bars – is one way to help accessibility and usability on your blog / site.
It can be easily achieved using a small bit of JQuery. Sounds complex, but with JQuery already built into WordPress all you need do is add this function into the header file (code setion 1) and add a little bit of text and CSS – (code section 2)
Code section 1
-
$(document).ready(function(){
-
-
// Reset Font Size
-
-
var originalFontSize = $(‘html’).css(‘font-size’);
-
-
$(".resetFont").click(function(){ $(‘html’).css(‘font-size’, originalFontSize); });
-
-
// Increase Font Size
-
-
$(".increaseFont").click(function(){
-
-
var currentFontSize = $(‘html’).css(‘font-size’);
-
-
var currentFontSizeNum = parseFloat(currentFontSize, 10);
-
-
var newFontSize = currentFontSizeNum*1.2;
-
-
$(‘html’).css(‘font-size’, newFontSize);
-
-
return false;
-
-
});
-
-
// Decrease Font Size
-
-
$(".decreaseFont").click(function(){
-
-
var currentFontSize = $(‘html’).css(‘font-size’);
-
-
var currentFontSizeNum = parseFloat(currentFontSize, 10);
-
-
var newFontSize = currentFontSizeNum*0.8;
-
-
$(‘html’).css(‘font-size’, newFontSize);
-
-
return false;
-
-
});
-
-
});
-
Code section 2
-
-
<div id="textsizing">
-
-
Font size:
-
-
<a class="increaseFont" title="Make text larger" href="#">Increase</a>
-
-
<a class="decreaseFont" title="Make text smaller" href="#">Decrease</a>
-
-
<a class="resetFont" title="Return to default size" href="#">Reset</a></div>
-
-
Once again, hope this helps
Popularity: 4% [?]
0
COMMENTS