Dynamically Changing The Font Size Of Your Website

1 Flares 1 Flares ×

Visitors can dynamically change the font size of any web site by using the ctrl key with mouse scroll but as a fact most of the users don’t know the use of this short cut method to dynamically change the font size of a web site. Though it is simple but worth adding a font resizer to your website.Dynamic Font Size

When you use the keyboard and mouse shortcut key to change the font size the whole web page gets zoomed which some times look odd for reading. But with the method I am going to explain you can control the font size of a specific portion of a web page.

So this is a simple JavaScript tutorial which will show how to resize the font of a website. Here we will provide the control to user to increase or decrease the font size of a particular tag of html, let’s say for paragraph tag <p>.

Add the below JavaScript code inside the header section of your webpage:

<script language=”JavaScript” type=”text/javascript”>
 function dynamiFontSize(incrmt){ 
            var para = document.getElementsByTagName(‘p’);  \
            for(n=0; n<para.length; n++) {   
                        if(para[n].style.fontSize) {      
                                    var size = parseInt(para[n].style.fontSize.replace(“px”, “”));   
                        } else {      
                                    var size = 12;   
                        }   
                                    para[n].style.fontSize = size+incrmt + ‘px’;  
                        }
            }
</script>

Add the below html code to your webpage to show a link to increase or decrease font size, (You can customize the code to show a graphic in increasing order or something else):

<a href=”javascript:dynamiFontSize(1)”>Font++</a>
<a href=”javascript:dynamiFontSize(-1)”>Font–</a>

This JavaScript code can be extended to dynamically resize the font size of any html element or tag.

Guru

+Ayodhyanath Guru holds a B.Tech degree in Electrical Engineering and has worked with various prestigious clients in the IT industry and presently working as a Software Engineer. He is a part time blogger and presently authors the Jafaloo.Com blog. Being a tech enthusiast Guru likes to surf the web and blogs about interesting technical topics like How-To guides, freewares, Tutorials, Software, Gadgets, web applications etc. Apart from blogging he likes coding in Java/J2EE and PHP.

You may also like...

1 Response

  1. Jone says:

    Good article. Is there a way to get more than one element in the
    document.getElementsByTagName
    such as (‘lable’,’p’,’h1′) ??

1 Flares Twitter 0 Facebook 0 Google+ 1 LinkedIn 0 1 Flares ×