4

Changing font size Dynamically

Posted on 9:34 AM by prajeesh and filed under , ,

In some websites we can see buttons like A A A to increse font size of your website for giving readability to disabled people also,we can do it many ways,one option is to dynamically change css or using javascript.here is a simple method using javascript to do this.


Step 1: Add the following Javascript in the insde the <HEAD> tag of your HTML.


<script language="JavaScript" type="text/javascript">


function changeFontSize(inc)


{


var p = document.getElementsByTagName('p');


for(n=0; n<p.length; n++) {


if(p[n].style.fontSize) {


var size = parseInt(p[n].style.fontSize.replace("px", ""));


} else {


var size = 12;


}


p[n].style.fontSize = size+inc + 'px';


}


}


</script>



Step 2: Insert the following HTML anywhere in your blog - you can customize the text or replace it with visual graphics (like the alphabet A - one small and the other one slightly large)

<a href="javascript:changeFontSize(1)">Increase Font Size</a>
<a href="javascript:changeFontSize(-1)">Decrease Font Size</a>

You can extend this to either all the HTML elements on your blog or limit it to only the text sections. The font size is specified in pixels.



Shout it kick it on DotNetKicks.com
4
Responses to ... Changing font size Dynamically
Unknown said... May 14, 2008 at 9:28 PM

Wow ,Yaar ..You are truly smart ..You have a whole lot of information there ..Do update I can atleast check it out sometime..Now my fiels is completely IT support to users so no way to develop these so iam happy that I can go to ur blog for these...

Regards
jasmine

Bariski said... December 23, 2008 at 6:27 AM

XML error message: Element type "p.length" must be followed by either attribute specifications, ">" or "/>

This is the error message I am getting when applying this :|

hima said... October 6, 2009 at 11:12 PM

hi rajesh this hima
can give simple example for this font size change and how to bind this font size to dropdown list control in asp.net pls give reply asap thanks.

prajeesh said... October 6, 2009 at 11:27 PM

Hi Hima,
here is a simple example showing changing font using button click, you can modify this as per your requirement
Javascript: Change font property using javascript
<script>
document.getElementById('myElement').style.font= 'font-style font-variant font-weight font-size/line-height font-family';
</script>
//Font Style options include: italic, normal, oblique, and inherit
//Font Weight options include: normal, bold, lighter, bolder, and inherit
//font-size/line-height is usually numeric, for example 12px.
//font-family options: there is a myriad of options for font-family. The //quickest way to see them is to open up Microsoft word and view the font //options.
Working Example of Font Change on Button Click:
<input name="Button1" onclick="document.getElementById ('myTextBox').style.font= 'normal bold 18px Times New Roman';" type="button" value="Button 1" />

<input name="Button2" onclick="document.getElementById ('myTextBox').style.font= 'normal normal 15px Cataneo BT';" type="button" value="Button 2" /><br />
<input name="myTextBox" id="myTextBox" type="text" value="Change Me" />

Post a Comment