Thursday, August 8, 2013

Zoom In/Zoom Out Website Content using JavaScript

Zoom In/Zoom Out Website using JavaScript When user clicks on  "A" the website content Zooms In and When user Clicks on "a" the website content Zooms out.

JavaScript Code:

<script type="text/javascript">
    var min = 8;
    var max = 18;
    function zoominLetter() {
        var p = document.getElementsByTagName('p');
        for (i = 0; i < p.length; i++) {
            if (p[i].style.fontSize) {
                var s = parseInt(p[i].style.fontSize.replace("px", ""));
            } else {
                var s = 12;
            }
            if (s != max) {
                s += 1;
            }
            p[i].style.fontSize = s + "px"
        }
    }
    function zoomoutLetter() {
        var p = document.getElementsByTagName('p');
        for (i = 0; i < p.length; i++) {
            if (p[i].style.fontSize) {
                var s = parseInt(p[i].style.fontSize.replace("px", ""));
            } else {
                var s = 12;
            }
            if (s != min) {
                s -= 1;
            }
            p[i].style.fontSize = s + "px"
        }
    }
</script>

ASPX Code:

<a href="javascript:zoominLetter();"><b>A</b></a>
<a href="javascript:zoomoutLetter();"><b>a</b></a>
<div style="width: 400px">
   <p>Musakkhir Sayyed is a Software Engineer working in Constraint Technologies Pvt Ltd, Pune. He has been a programmer/Software Developer for past 2 years specializing in .NET/C# development. Currently, he is a Silverlight, WPF/Sharepoint developer specializing in BCS Services. </p>
   </div>
    <asp:Label ID="lblUserBrowser" runat="server"></asp:Label>

Screen Shot 1:


No comments :

Post a Comment