Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to increase font size of website by just single click

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 233
    Comment on it

    Hello Readers if you want to make a switch button that will increase your font size of webpage then you can learn to code it here.

    first you have to create html page name it click.html, It's code will go like this:-

    <!doctype html>  
    <html lang="en">  
       <head>  
          <meta charset="utf-8">  
    
          <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
          <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
          <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
    
       </head>  
       <body>  
          <div class="DefaulFont">  
            You are here at JavaTpoint  
          </div>  
          <div class="DefaulFont">  
    JavaTpoint is commited to provide easy and point to point learning of various tutorials.  
          </div>  
          <br />  
          <input type="button" id="ToggleFont" value="Switch Class" />  
       </body>  
    </html> 
    

    Now you have to add the custom script, This will go like this:-

    <script>  
                 $(function() {  
                    $('#ToggleFont').click(function(){  
                       $(".DefaulFont").switchClass("DefaulFont","BigFont",'fast');  
                       $(".BigFont").switchClass("BigFont","DefaulFont",'fast');  
                       return false;  
                    });  
                 });  
              </script>  
    

    Last you have add some CSS to it:-

          <style>  
             .BigFont  
             {  
                font-family: NewTimesRoman;  
                font-size: large;  
                font-weight: bold;  
                color: Red;  
             }  
             .DefaulFont  
             {  
                font-family: Arial;  
                font-size: small;  
                font-weight: bold;  
                color: Blue;  
             }  
          </style>  
    

    Now when you load this html page, A toggle link will generate, this link will increase the fontsize of your webpage when click first time. And when user click it second time then it will reset the fontsize and make the fontsize default.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: