Zoom in and Zoom out Text using jQuery
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain that how to implement Zoom in and Zoom out Text (Change Text size) using JavaScript and jQuery.
Code for HTML Page
Implementation:On the HTML page I have shown how to change i.e. Zoom in or Zoom out the Text size of text of whole page or particular section or part of page using JavaScript or jQuery There will be many monitor dimensions and resolutions, so sometimes users unable to read the information because of small text as per not ok according to their sight and hence they can use this option to Zoom In or Zoom out Text size for improved visibility of the text. In the HTML section of the webpage, I have placed two HTML Anchor tags which will be work to increase or decrease the font size of the page. For both the HTML Anchor tags I have attached jQuery Click event handler within which I have first check the font size of the page within the BODY section and based on increase and decrease button will clicked by the user to increasing or decreasing the font size respectively.
Here i am giving the complete code for HTML page for the both options for particular section or part of Page as well as for the complete webpage or complete section of the page. You can copy and paste the code on your HTML page and enjoy the execution of the code.
Change (Zoom in or Zoom out) Font Size of particular section or part of Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using Asp.Net</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 16px;
}
.font-button
{
background-color: #0090CB;
height: 50px;
width: 50px;
display: inline-block;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 25pt;
cursor: pointer;
}
</style>
</head>
<body>
<div>
I am the founder of this site <a href="https://usingaspdotnet.blogspot.com" target="_blank">Using ASp.Net</a>,
and also work as an Independent Consultant. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
<br /> <br />
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. <br />
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old. Richard
McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words <br />
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections
1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum </div>
<hr />
<a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".font-button").bind("click", function () {
var size = parseInt($('body').css("font-size"));
if ($(this).hasClass("plus")) {
size = size + 2;
} else {
size = size - 2;
if (size <= 10) {
size = 10;
}
}
$('body').css("font-size", size);
});
});
</script>
</body>
</html>
Explanation
It is same like as first code that I explained above, the only difference here is that instead using BODY tag in jQuery selector I am a using the ID of the DIV, so that only font size the text inside the that DIV is changed.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Using Asp.Net </title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 16px;
}
.font-button
{
background-color: #0090CB;
height: 50px;
width: 50px;
display: inline-block;
color: #fff;
text-align: center;
line-height: 50px;
font-size: 25pt;
cursor: pointer;
}
</style>
</head>
<body>
<b>Using Asp.Net</b>
<hr />
<div>
I am the founder of this site <a href="https://usingaspdotnet.blogspot.com" target="_blank">Using ASp.Net</a>,
and also work as an Independent Consultant. <br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'sstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
<br /> <br />
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. <br />
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old. Richard
McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words <br />
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections
1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum </div>
<hr />
<a class="font-button plus">A+</a> <a class="font-button minus">A-</a>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".font-button").bind("click", function () {
var size = parseInt($('#content').css("font-size"));
if ($(this).hasClass("plus")) {
size = size + 2;
} else {
size = size - 2;
if (size <= 10) {
size = 10;
}
}
$('#content').css("font-size", size);
});
});
</script>
</body>
</html>
Conclusion: In above code, I explained that how to implement Zoom in and Zoom out Text (Change Text size) using JavaScript and jQuery. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment