This simple project will show to the user how to increase and decrease the font size of text content in a one div class automatically using jQuery in HTML. Hope this tutorial will help you from your projects.

Creating Markup

Creating select element and the DIV tag where the text content located. Copy and paste this simple HTML source code to your BODY tag of your page.

1. <center
   
   >
   
2. <h2
   
   >
   
   Adjust Font Size:</
   
   h2
   
   >
   
3. <br
   
   /
   
   >
   
4. <select
   
   id
   
   =
   
   "zoom_Text"
   
   >
   
5. <option
   
   value
   
   =
   
   "15"
   
   >
   
   15 px </
   
   option
   
   >
   
6. <option
   
   value
   
   =
   
   "20"
   
   >
   
   20 px</
   
   option
   
   >
   
7. <option
   
   value
   
   =
   
   "30"
   
   >
   
   30 px</
   
   option
   
   >
   
8. <option
   
   value
   
   =
   
   "45"
   
   >
   
   45 px</
   
   option
   
   >
   
9. <option
   
   value
   
   =
   
   "50"
   
   >
   
   50 px</
   
   option
   
   >
   
10. <option
    
    value
    
    =
    
    "70"
    
    >
    
    70 px</
    
    option
    
    >
    
11. </
    
    select
    
    >
    
12. <br
    
    /
    
    >
    
13. <div
    
    id
    
    =
    
    "container"
    
    >
    
14. <div
    
    class
    
    =
    
    "content"
    
    >
    
15. <h2
    
    >
    
    Free Source Code</
    
    h2
    
    >
    
16. Do you have source code, articles, tutorials, web links, and books to share? You can write your own content here. You can even have your own blog.
    
17. </
    
    div
    
    >
    
18. </
    
    div
    
    >
    
19. </
    
    center
    
    >
    

This is the result of the source code above as shown in the image below.


JavaScript Source Code

Kindly copy and paste this link and script to your HEAD tag of your page.

1. <script type="text/javascript" src="jquery.js"></script>
   
2. <
   
   script type=
   
   "text/javascript"
   
   >
   
3. $(
   
   function
   
   (
   
   )
   
   {
   
4. 
   
5. $(
   
   "#zoom_Text"
   
   )
   
   .change
   
   (
   
   function
   
   (
   
   )
   
6. {
   
7. var
   
   size =
   
   $(
   
   this
   
   )
   
   .val
   
   (
   
   )
   
   ;
   
8. 
   
9. $(
   
   "#container"
   
   )
   
   .css
   
   (
   
   'font-size'
   
   ,
   
   size+
   
   'px'
   
   )
   
   ;
   
10. 
    
11. return
    
    false
    
    ;
    
12. }
    
    )
    
    ;
    
13. }
    
    )
    
    ;
    
14. </
    
    script>
    

Result

For the 15px font size.


For the 20px font size.


For the 30px font size.


Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download