Modifying and resizing the text of your web sites or blog sometimes can’t be easy or a loss of time. Web developers have been able to find a way to resize text of websites; they use a javascript code. That code can be programmed to resize text to fit your choice only a simple and single click. That javascipt code could be used to define text in points, pixels, em, as a percentage of its parent element or font-size.
Code JAVASCRIPT :
$(document).ready(function() {
var resizeFont = $('[id$=content]');
$("a[id$=btnIncrease]").click(function() {
var size = $(resizeFont).css("font-size");
var newSize = parseInt(size.replace(/px/, "")) + 1;
$(resizeFont).css("font-size", newSize + "px");
});
$("a[id$=btnDecrease]").click(function() {
var size = $(resizeFont).css("font-size");
var newSize = parseInt(size.replace(/px/, "")) - 1;
$(resizeFont).css("font-size", newSize + "px");
});
var originalFontSize = $('#content').css('font-size');
$(".resetFont").click(function(){
$('#content').css('font-size', originalFontSize);
});
});
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to create font resize with jquery</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link rel="Stylesheet" media="screen" type="text/css" href="design.css" />
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div align="center" class="navTools">
<a href="#" id="btnIncrease">+</a>
<a href="#" id="btnDecrease">-</a>
<a href="#" class="resetFont">reset</a>
</div>
<h1> div#content</h1>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie lobortis elementum.
Vivamus laoreet, felis et luctus congue, lectus odio ornare metus, at scelerisque mauris arcu
consequat nibh. Nunc quis nisi erat. Sed lobortis, quam a gravida auctor, nisi massa rhoncus
orci, a egestas magna dolor a nisi. Aliquam vel pellentesque felis. Aliquam imperdiet quam
at odio ullamcorper aliquet eget eu tellus. Maecenas non magna nisi. Vestibulum ullamcorper
rutrum orci a rhoncus. Donec tincidunt blandit lectus,
</div>
</body>
</html>
Code CSS :
body
{
background-color:black;
color:white;
font:100% Arial,sans-serif;
}
div.navTools a
{
text-decoration:none;
color:black;
font-weight: bold;
background:#EFEFEF;
padding:10px;
}
div#content
{
background:#252525;
padding:15px 0 15px 10px;
color:#b1b1b1;
border:1px dashed #343434;
}