Social Networks

We received some query from onlinewebapplication reader that asked for how to increase and decrease text font size dynamically using JQuery. We made very simple tutorial to understand the concept that how you can control the test size of text in a div or entire page using hyperlink button or any any clickable control, on click of the button call a function which will increase or decrease the test font size base on the action.

text-size-jquery

Demo

 

JavaScript:

Call the jquery.min.js reference and in (document).ready(function() you can write below JavaScript code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('a').click(function()
{
var theElement = $("#text").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

if ( (this).id == "largerTextLink")
{
textSize += 2;
}
else
{
textSize -= 2;
};

$('p').css("font-size", textSize + unitOfMeasurement);

return false;
});
});
</script>

HTML Code:

<div>
<p id="text">
This is the tecgnology blog onlinewebapplication.com. This is some text. This is some text. This is some text. This
is some text. This is some text. This is some text. This is some text. This is some
text. This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text. This
is some text. This is some text.
</p>
<a href="#" id="smallerTextLink">Smaller Text</a>

<a href="#" id="largerTextLink">Larger Text</a>
</div>

 

None found.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>