How to use jQuery to create a font resize
October - 9 - 2010 by
Arbaoui Mehdi
Hi, I'm Arbaoui Mehdi. I'm the editor of Depotwebdesigner and Codamaniacs,the Site Manager of both Tutoslinux, and Rabbitemplate. I spend too much time in front of the computer.
Contact Author : support@depotwebdesigner.com
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;
}
Tags:ajax, clean, css, font resize, javascript, Jquery, Tutorials, web 2.0, webdesigner, xhtml
Thanks for u r information
its very useful
Reply
This is such a great resource that you are providing and you give it away for free. I enjoy seeing websites that understand the value of providing a prime resource for free. I truly loved reading your post. Thanks!
Reply
Michael Silva Reply:
January 13th, 2011 at 7:18 pm
What about when someone clicks to another page on your site. With this method, the size changes the user made will NOT go with them to a new page within your site.
Reply
So for this example is just to show how you used resizeFont, so it’s up to you to develop according to your need
Reply
This is cool! Simple and no extra scripts to be linked or embeded. Works perfectly! Just wondering how to control the maximum/minimum font-size that it can be resized. I wish to have some kind of control over the font-size. Thanks!
Reply