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

Expandable Post Summaries on Blogger

By VJ
One of my readers, Chris contacted me with a question: A few days ago, when I checked your blog, it had this cute feature; there were teasers (previews) for each post, with links to expand to the full post. I have a Blogger blog myself, and I would like to implement this feature. Could you post directions for this? Thanks Chris Well, Chris, the standard term for the post teasers is Expandable Post Summaries . In self-hosted blogs, this feature is prevalent and it is also an indication of professional blog design . Or it has been made so by widespread use of this feature in professional blogs. In Blogger blogs, this feature is not available directly from the dashboard. However, a minor Blogger tweak can give you this effect. Though there is official Blogger help for this tweak, it is not rated understandable by most people. What You Should Know Before You Do This There is a catch to expandable post summaries, however, which made me get rid of this a few days ago. Through this, ...
17 comments
Read more

Unethical Business Practices by Associated Content (AC)

By VJ
Useful Resources Freelance job at Constant Content Freelance for a 6 figure income Get paid to write on the Internet 25 Ways to write for income on the Internet Work from home as a virtual assistant Freelance for fortune 500 companies Today’s Internet slogan is ‘Content is King’ . If you have well-written, keyword rich content, without grammatical errors, then you can rank very high on search engine results, thus making a lot of money. With this business idea, several companies have sprung up, and Associated Content (who call themselves, People’s Media Company) is one among them. Here, we will try to find answers to these questions: 1. What exactly is Associated Content (if you don’t already know this)? 2. Is it really worthwhile to work with them? 3. Why should you steer right clear of them? What is Associated Content (AC) Associated Content (AC) is a website, in which you can earn money submitting content (text, video, audio, or images) . Anyone from anywhere in the...
53 comments
Read more

What Is DoFollow? Guide: How to Make Blogspot Blogs Dofollow?

By VJ
Dear friends, this is a blog notification post. I have decided to make my blog, DoFollow. You will find the comment policy updated on the sidebar about this (please look at the left sidebar). [Edit: The blog is no longer DoFollow due to loads of spam comments it attracted ] Backlinks are very important for your websites. They are like votes cast by one respectable website to another, and they will greatly increase the site’s traffic. When one gets many backlinks, one’s site’s ranking in search engine results will skyrocket. Search engines use programs called search bots or web crawlers to access and index web pages. That’s how you see websites in the search results of Google and Yahoo!. If your site ranks high for any search terms related to the products you promote, you can get several potential customers (a very daunting task indeed). Now, in order for you to get business, you must rank high in search engines , and the most important thing that will help you in this is link build...
55 comments
Read more