Tuesday, 8 April 2014

How to increase and decrease font size of text content using JQuery?

Description:

Welcome to Jqueryjohn.com.

In this article, I will explain how to increase and decrease font size of the page using Jquery.  

Lot of websites provides users with an option to increase or decrease the font size of the page for better reading experience.

In the below program, I have used small JavaScript code to change the font size of the page at client side.

When the page loads, font size is set to 14px by default. When the user clicks the button, font size is increased or decreased by 2 Px.

For live demo, click here.

Example program:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var defSize = 14;
            var size = defSize + "px";
            $(".divOne").css("font-size", size);
            $('#btnZoomIn').click(function () {
                defSize = defSize + 2;
                var size = defSize + "px";
                $(".divOne").css("font-size", size);
                return false;
            });
            $('#btnZoomOut').click(function () {
                defSize = defSize - 2;
                var size = defSize + "px";
                $(".divOne").css("font-size", size);
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="divOne">
            Welcome to Jqueryjohn.com. This is Technical blog related to Scripting Languages.
            Jqueryjohn.com offers jquery related articles with code snippets. Jqueryjohn.com
            also has jquery tutorials with examples. It is easy to learn for beginners. Donec.
        </div>
        <asp:Button ID="btnZoomIn" runat="server" Text="Zoom In" />
        <asp:Button ID="btnZoomOut" runat="server" Text="Zoom Out" />
    </div>
    </form>
</body>
</html>

Increase or decrease font size of the page dynamically, Adjusting font size with jquery, resize font size using jquery , change font size using jquery, dynamically change font size of the webpage using jquery

at No comments:

How to dynamically display sum of all textbox values to another textbox using JQuery?

Description:

Welcome to Jqueryjohn.com.

In this article, I will explain how to display sum of all textbox values using Jquery.  

One of my readers asked me one question that how to sum of all textbox values while user typing on client side. So I decided to write post for this.

Whenever user change the value of the textbox, sum of the textbox values are calculated and displayed on other textbox.

For live demo, click here.

Example program:

<html>
<head>
    <title>Sum Textbox Values using JQuery</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.addValue').each(function () {
                $(this).keyup(function () {
                    SumValues();
                });
            });
        });
        function SumValues() {
            var sum = 0;
            $('.addValue').each(function () {
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                    $(this).css("background-color", "#FEFFB0");
                }
                else if (this.value.length != 0) {
                    $(this).css("background-color", "red");
                }
            });
            $('#totalValue').val(sum);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td>
                Value 1 :
            </td>
            <td>
                <input id="Text1" type="text" class="addValue" />
            </td>
        </tr>
        <tr>
            <td>
                Value 2 :
            </td>
            <td>
                <input id="Text2" type="text" class="addValue" />
            </td>
        </tr>
        <tr>
            <td>
                Sum Value:
            </td>
            <td>
                <input id="totalValue" type="text" disabled="disabled" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>


Display sum of all textbox values to another textbox using JQuery, sum of all textbox values while typing, sum values in textbox while typing
at No comments: