Skip to main content

Changing Your Blog's Font Size in Real Time

By VJ
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();">
Labels:

Comments

  1. AnonymousMarch 4, 2009 at 3:47 AM

    Why bother?

    This is a built-in feature of browsers.

    Why bother to duplicate existing functionality?

    ReplyDelete
  2. AnonymousMarch 4, 2009 at 7:11 AM

    Great tip...
    But I had one doubt, If you change the font dynamically, will the page elements change their position,like sidebar moving from side to below the main post bar.(I hope I am able to explain it correctly).

    ReplyDelete
  3. AnonymousMarch 4, 2009 at 9:09 PM

    @Thorne, this is a built-in functionality for several browsers. But there are browsers without this functionality, and there are people who don't know about it at all. It's just a convenience.

    @Amol, No they won't. To know, just try the buttons in the post.

    ReplyDelete

Post a Comment

Comments are moderated very strictly

Popular posts from this blog

Power of Short Sentences

By VJ
Post dedicated to Thomas Hardy (see History Today below). There are monster sentences like the one you encounter as the first paragraph of Oliver Twist by Charles Dickens . One of my friends, whom I am getting equipped for his IELTS ( what is this? ), told me that the examination recommends long sentences. In writing classes also, I guess it’s longer sentences most tutors promote. But indubitably shorter sentences are more powerful . We will see why. Take a long sentence for instance: Tom Cruise, one of the finest actors in the whole world, is perhaps the most powerful celebrity to exist ever according to Time Magazine, but many people still dispute this fact and point out that there are more powerful and popular actors than Cruise, though they were unsuccessful in providing the total number of fans, who liked the films of those actors. This is a long sentence and it is very confusing . Though it has a logical construction and conveys a meaning, it falters in many occasions and seems ...
1 comment
Read more

Creative Writing: Crafting Characters With Emotional Appeal in Mind

By VJ
When you read the greatest fiction works ever, have you ever asked what was so compelling about them that you not only kept reading it, but you ended up reading all other major works of the writer? It may well be because the writer touched your emotional quotient quite a bit. Every reader has a unique taste . Some like to read suspense thrillers , some tender love stories, and some others dark horror and bloodshed stories . That’s why there are all sorts of genres out there. When a writer gives you what exactly you want, you will keep reading. Here we come to the emotional appeal. Character Imperfection Perfect characters may not always be the upshot of a writer’s deliberation. It may well be due to ignorance . Usually the upcoming writers take it for granted that if they create perfect characters, they will be able to garner a bigger audience . It is not true. You have to ask yourself what a character would do in a particular situation. Perfect characters—perfect gunmen, perfect...
1 comment
Read more

En Dash, Em Dash, and Hyphen

By VJ
We have three types of dashes in use: The hyphen, En Dash, and the Em Dash. In this post, we will see how to use them all correctly. Hyphen (-) The hyphen is the minus key in Windows-based keyboards. This is a widely used punctuation mark. Hyphen should not be mistaken for a dash . Dash is different and has different function than a hyphen. A hyphen is used to separate the words in a compound adjective, verb, or adverb. For instance: The T-rex has a movement-based vision. My blog is blogger-powered. John’s idea was pooh-poohed. The hyphen can be used generally for all kinds of wordbreaks . En Dash (–) En Dash gets its name from its length. It is one ‘N’ long (En is a typographical unit that is almost as wide as 'N'). En Dash is used to express a range of values or a distance: People of age 55–80 are more prone to hypertension. Delhi–Sidney flight was late by three hours. In MS Word, you can put an En Dash either from the menu, clicking Insert->Symbol or by the key-combinatio...
11 comments
Read more