Increse Decrease Font Size | Zoom In Zoom Out Text Size Using jQuery

By
Advertisement
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.

<!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.
Output of Increse Decrease Font Size | Zoom In Zoom Out Text Size Using jQuery
Download Sourcecode:

You can download the entire html from the below link.
Source code of Increse Decrease Font Size | Zoom In Zoom Out Text Size Using jQuery

You May Also Like...


0 comments:

Post a Comment

Online Casino