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

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 k

4 Effective Ways to Write About a Boring Topic

  With the plethora of interesting topics to write about, you’re fortunate enough to get the “boring” one. While it can be a pain for many writers to wind up with such a task, I’m telling you now there are ways to make yours more interesting than it is. So if you find yourself stuck with the dreariest topic to fill in a blog about, don’t fret. Here are the four best ways to unburden yourself. 1. Never a boring topic, only a boring writer. Here’s the hard fact: It’s never about the topic being boring. It’s about the writer making it boring. For instance, you’re supposed to write about aquariums. I know, how can you continuously make this topic interesting, right? Well, you’d be surprised just in how many ways you can make it an enticing read. Start by listing down the basic “what”, “where”, “when” and “how” surrounding the topic. You can ask (and research) about “What material was first used to make aquariums?” or even “How the first aquarium was built?” or “What are

5 Simple Ways To Improve Your Writing

As writers, we’re always pushing the envelope to express ourselves better than we did before. However there are times when we plateau, when our writing just doesn’t feel natural. Worse yet, there are times when we can’t get a good paragraph out. Those are times when we start thinking about pushing ourselves and our writing. When you need to tweak and boost your writing up a notch, it’s always good to try something constructive.  For those who could use a couple of tips, here are a few that are sure to help improve your writing and keep it from going stale. 1.Imitate Different Authors If you read other writers for inspiration, why not actively imitate their writing? Once you walk in another writer’s shoes for a bit, writing as they write, you get an idea on how to approach writing about things in ways you normally wouldn’t.  Moreover, it will force you to pay attention to what makes someone else’s writing style unique which, in turn, will help you find ways to make your