Skip to main content

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

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


Labels:

Comments

Post a Comment

Popular posts from this blog

Code To Convert rupees(numbers) into words using C#.Net

By
Introduction: In my previous article I have explained about how to validate emailid using javascript . In this article I am going to explain about code used to convert rupees(numbers) into words using C#.Net . Explanation: For explanation purpose I have a page. It has a textbox to input the numbers. And when you click on the convert to words button then it will convert the input numbers into words and shows it in the below label. Below is the C# code used to do this functionality. public static string NumbersToWords( int inputNumber) {     int inputNo = inputNumber;     if (inputNo == 0)         return "Zero" ;     int [] numbers = new int [4];     int first = 0;     int u, h, t;     System.Text. StringBuilder sb = new System.Text. StringBuilder ();     if (inputNo < 0)     { ...
16 comments
Read More...

C# Extension Methods Example

By
In this article i am going to explain about Extension Methods  with example. Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type. If you do implement extension methods for a given type, remember the following points: An extension method will never be called if it has the same signature as a method defined in the type. Extension methods are brought into scope at the namespace level. For example, if you have multiple static classes that contain extension methods in a single namespace named Extensions, they will all be brought into scope by the using Extensions; directive. ...
Post a Comment
Read More...

Puzzles for kids - 12 Days Of Christmas

By
According to the traditional song, on the first day of Christmas (25th December), my true love sent to me: . A partridge in a pair tree On the second day of Christmas (26th December), my true love sent to me THREE presents: . Two turtle doves . A partridge in a pear tree On the third day of Christmas (27th December and so on) my true love sent to me SIX presents: . Three French hens . Two turtle doves . A partridge in a pear tree This carries on until the the twelfth day of Christmas, when my true love sends me: Twelve drummers drumming Eleven pipers piping Ten lords a-leaping Nine ladies dancing Eight maids a-milking Seven swans a-swimming Six geese a-laying Five gold rings Four calling birds Three French hens Two turtle doves A partridge in a pear tree After the twelve days of Christmas are over, how many presents has my true love sent me altogether? Our Solution: 1 + 3 + 6 + 10 + 15 + 21 + 28 + 36 + 45 + 55 + 66 + 78 = 364 presents Which is really interesting when you think ...
Post a Comment
Read More...