Search

Saturday, August 15, 2015
0 comments

ZoomIn and ZoomOut Text Example using JQuery

9:20 AMSaturday, August 15, 2015
Introduction: 

Here I will explain example of Text ZoomIn or ZoomOut example using JQuery or increase or decrease font size of blog/website dynamically on button click using jQuery in asp.net.

Description: 
 
In previous articles I explained ajax password strength validator and checker. This all things are related to Jquery. To read more article about JQuery which is implemented in asp.net.

To implement this we need to write the following code in aspx page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var getdiv = $('#test');

            //get zoomin button

            $('#zoomin').click(function () {

                var presentsize = getdiv.css('fontSize');
                var latestsize = parseInt(presentsize.replace("px", "")) + 1;
                $(getdiv).css("fontSize",latestsize + "px");

            });

            //get zoomout button

            $('#zoomout').click(function () {

                var presentsize = getdiv.css('fontSize');
                var latestsize = parseInt(presentsize.replace("px", "")) - 1;
                $(getdiv).css("fontSize", latestsize + "px");

            });

        })

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="test">
        Welcome to my blog: http://dotprogramming.blogspot.com
 
    </div>
        <input id="zoomin" type="button" value="+" />
        <input id="zoomout" type="button" value="-" />
    </form>
</body>
</html>

Code Generate the following output:

ZoomIn and ZoomOut Text Example using JQuery

Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top