» » Changing Your Blog's Font Size in Real Time

Changing Your Blog's Font Size in Real Time

Here today, let's see how JavaScript can be used to change the font size of your blog pages in real time. This is pretty convenient for your readers as they will be able to increase the size of the text at their wish.

Just include the following JS code in the head section of your blog (after <head> tag) or import through an external JS file. Please note, with this code, we are increasing and decreasing the font size for the entire body HTML element. If you wish to localize the effect, use a separate tag such as 'p', 'font', or 'span', and use the tag on the body of your HTML.

var minSize=6;
var maxSize=24;
function plusFont() {
var s = document.getElementsByTagName('body');
for(i=0;i<s.length;i++) {
if(s[i].style.fontSize) {
var t = parseInt(s[i].style.fontSize.replace("px",""));
} else {
var t = 10;
}
if(t!=maxSize) {
t += 1;
}
s[i].style.fontSize = t+"px";
}
}
function minusFont() {
var s = document.getElementsByTagName('body');
for(i=0;i<s.length;i++) {
if(s[i].style.fontSize) {
var t = parseInt(s[i].style.fontSize.replace("px",""));
} else {
var t = 12;
}
if(t!=minSize) {
t -= 1;
}
s[i].style.fontSize = t+"px";
}
}

Here are the buttons to increase and decrease font size: In order to see the code in action, simply click these buttons now.







You need to create buttons like these on your blog's page as well with the following HTML code.


<INPUT TYPE="button" VALUE="+" onClick="plusFont();">
<INPUT TYPE="button" VALUE="-" onClick="minusFont();">
You have read this article Blogging Tips with the title Changing Your Blog's Font Size in Real Time. You can bookmark this page URL http://neurotica-exotica.blogspot.com/2009/03/changing-your-blog-font-size-in-real.html. Thanks!

No comment for "Changing Your Blog's Font Size in Real Time"

Post a Comment

Subscribe to: Post Comments (Atom)