Overview:
In this tutorial i am going to explain about how to increase and decrease font size or how to zoom in and zoom out text using jQuery and javascript. WE can increase and decrease font size or zoom in and zoom out text for the entire page as well as for a particular part of the page.
Description:
Here i have created a new html page and then i have included the jQuery library in the head section of the html. Then i have added content inside a div wit id contentdiv and i have two anchror tags - one for increasing the font and another one is for decreasing the font. On clicking on this i will check it has a clas plus or minus. If it has a plus class then i will get the font size of that particular div and then add the font size by 1 and assign it back to the div. If it has a minus class then i will subtract the font size by 1 and assign it back to the div.
Below is the entire code which i used.
Output:
Now if you open the html in the browser you can see the output like below.
Download Sourcecode:
You can download the entire html from the below link.
In this tutorial i am going to explain about how to increase and decrease font size or how to zoom in and zoom out text using jQuery and javascript. WE can increase and decrease font size or zoom in and zoom out text for the entire page as well as for a particular part of the page.
Description:
Here i have created a new html page and then i have included the jQuery library in the head section of the html. Then i have added content inside a div wit id contentdiv and i have two anchror tags - one for increasing the font and another one is for decreasing the font. On clicking on this i will check it has a clas plus or minus. If it has a plus class then i will get the font size of that particular div and then add the font size by 1 and assign it back to the div. If it has a minus class then i will subtract the font size by 1 and assign it back to the div.
Below is the entire code which i used.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
body {
font-family: Arial;
font-size: 16px;
}
.fontbtn{
width: 40px;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
font-size:25px;
padding:5px;
cursor: pointer;
}
.plus{background-color: green;}
.minus{background-color: red;}
</style>
</head>
<body>
<a class="fontbtn plus">A+</a> <a class="fontbtn
minus">A-</a>
<hr />
<div id="contentdiv">
There are
many variations of passages of Lorem Ipsum available, but the majority have
suffered alteration in some form, by injected humour, or randomised words which
don't look even slightly believable. If you are going to use a passage of Lorem
Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators on the Internet tend to repeat
predefined chunks as necessary, making this the first true generator on the
Internet. It uses a dictionary of over 200 Latin words, combined with a handful
of model sentence structures, to generate Lorem Ipsum which looks reasonable.
The generated Lorem Ipsum is therefore always free from repetition, injected
humour, or non-characteristic words etc.
</div>
<script type="text/javascript">
$(function () {
$(".fontbtn").bind("click", function () {
var size = parseInt($('#contentdiv').css("font-size"));
if ($(this).hasClass("plus")) {
size = size + 1;
} else {
size = size - 1;
if (size <= 10) {
size = 10;
}
}
$('#contentdiv').css("font-size", size);
});
});
</script>
</body>
</html>
Output:
Now if you open the html in the browser you can see the output like below.
You can download the entire html from the below link.
Comments
Post a Comment