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

Another Tiny List of Confusables

By VJ
Earlier, you may remember we published a list of confusable words . Here we are again, with such a list of words. Abjure/Adjure: Abjure means "to formally renounce (give up) something" such as a position. Adjure on the other hand means 'to appeal to' or 'solemnly order'. The governor decided to abjure his position due to political pressure. Normally, adjuring to the subordinates doesn't give many results. Amount/Number: Use amount when you have uncountable subject. Use number when it is countable. The amount of love one gets depends on the number of friends one has. Appraise/Apprise: Appraise is the word applied to quantitative evaluation of something. Apprise means 'communicate' or 'inform'. Appraising diamonds is the work of an expert. Joe apprised me of the schedule of events. Attorney/Lawyer/Solicitor: These terms are highly misinterpreted and confused by many people. Let me clarify. In the US, an attorney is any member
Post a Comment
Read more