Skip to main content

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();">

Comments

  1. Why bother?

    This is a built-in feature of browsers.

    Why bother to duplicate existing functionality?

    ReplyDelete
  2. 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. @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

What Is the Difference Between Hardcover and Paperback?

Today, my reader, Rahman contacted me with a doubt:

Dear Lenin, would you explain why there are two types of books: hardcover and paperback?
This is quite a simple affair and there are explanatory articles to be found at various places on the Net. Here is my addition.

Hardcover

A hardcover aka hardback is a book bound with thick protective cover, with usually a paper or leather dust jacket over the main cover. The aim of hardcover is protection and durability. These books are mainly for long-term use and collectors’ editions. Hardcover books last far longer than the corresponding paperbacks. They do not get damaged easily thus making them perfect for reference guides, great literary works, etc.

In addition, there is a difference in the type of paper used to print hardcover books. The paper used is long-lasting acid-free type. Acid-free paper has a pH value of 7 (neutral) which makes it highly durable. The papers are stitched and glued to the spine.

Hardbacks are prepared for commercial …

En Dash, Em Dash, and Hyphen

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-combination, Ctrl + Num…

What Is the Meaning of the Word 'Ghajini'? Story and Trivia of Aamir Khan's New Film [Special]

[Special Entry]



Aamir Khan's latest film is titled a little weirdly for the taste of Hindi filmgoers. 'Ghajini': They have never heard of such a name, and such a word never existed in Hindi or in any other Indian language.

The name Ghajini is the name of the villain of the film. In Tamil version, the name of the villain was Laxman.

As a Tamil moviegoer, I have already watched Ghajini and know the story in full.

So, What Does the Title Mean?

In Tamil, the title of the film is inspired by the story of Mahmud of Ghazni, an ancient invader of India. This person was so persistent in invading India that he continued trying after several failures. In the film too, the protagonist is such persistent in finding out and killing the villain of the film, who had killed his girlfriend, Kalpana (played by Asin). Aamir's Character (named Sanjay Ramaswamy in Tamil), is a short-term amnesiac, who cannot remember anything more than fifteen minutes.

You may ask then how the Ghazni became…