jQuery one of the my favorite JavaScript framework. Its is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.
I used it many of my projetcs. Today i am going to show you how to allow visitors to increase or decrease the text size (font size) on your website?This is important from an accessibility point of view to give your users the ability to re-size the text.
1. Html Part
This is a simple page. we are attaching here jQuery main file. I am using it from google code. You can find many of the JavaScript library’s direct link from there (http://code.google.com/apis/ajaxlibs/). You don’t need to host it on your own server.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Text/font resizing</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
</head><body><div><a href=”#” id=”large”>Large</a></div>
<div><a href=”#” id=”small”>Small</a></div>
<div id=”txt”><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p></div>
</body>
</html>
2. CSS Part
#txt{ color:#000000; clear:both; width:100%; font: 12px Arial, Helvetica, sans-serif;}
3. Script Part
just add this function in to your HTML head. In this script we will setup some variable to use when the input buttons are clicked. The variable ourText will be our paragraph ‘p’ to resize. The variable currFontSize gets the current font size of the paragraph. we can also use any ‘id’ there also if we want to increase or decrease font/text size of the whole div or any indivisible div. like
var ourText = $(‘#txt’);
$(function(){
$(‘div a’).click(function(){
var ourText = $(‘p’);
var currFontSize = ourText.css(‘fontSize’);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == ‘large’) {
finalNum *= 1.2;
}
else if (this.id == ‘small’){
finalNum /=1.2;
}
ourText.css(‘fontSize’, finalNum + stringEnding);
});
});
</script>
And that’s it, this is a quick and simple font resizing script by using jQuery
To see a Live demo. Click here
To download a demo file. Click here
cheers!!
Joginder Poswal
Awesome post buddy. Its very easy and useful. I would try this on my new theme design for WordPress. Thanks for sharing.
thanks buddy
Thanks, If its worked in single div…….