Using JS to change font sizes at runtime

[Zucarita9000]

I have a DIV with some text in it, and I'd like to have two links to resize the text using JS. I was thinking about using two functions -Bigger() and Smaller()- that would change font sizes when the links are clicked.

The Div has and ID of "ArticleText", and the font definitions are on an external CSS file:

#ArticleText { font: 12px Arial; color: #424242;}

The "font" property is what I want to change at runtime. Any ideas?

 

[ugh]

There are 2 ways you can take to achieve this depending on how you code your HTML/CSS. You can either use document.getElementById or document.getElementsByTagName. If you'd like to apply the font size change on a single entity, use the document.getElementById("ENTITY_ID"). If you want to apply the style to a range of tags e.g. <p>/<div> use the latter.

Once you've obtained an element from either one of the methods, just do:

el.style.fontSize = <increment/decrement>

HTH.

 

[Zucarita9000]

So, would something like this work?

function Bigger(){
document.getElemetById('ArticleText');
ArticleText.style.fontsize = ArticleText.style.fontsize+1;
}

The thing is, inside the "ArticleText" object, there will be other objects, such as tables and divs with different style definitions. The function should change the font size regardless of wich style are inside the "ArticleText" object.

 

[torpid]

Is this an article editor? If not why would you want to offer this feature? It sounds like a lot of work considering the user's can increase the text size in their browser themselves, without all the fancy javascript which may only work in certain browsers.

 

[Zucarita9000]

Originally posted by: torpid
Is this an article editor? If not why would you want to offer this feature? It sounds like a lot of work considering the user's can increase the text size in their browser themselves, without all the fancy javascript which may only work in certain browsers.

I know!. That's exactly what I told our client, but he wants it anyway. He's such a PITA. Anyway, I ended up charging him an extra $200 for that feature alone, but it's giving me a headache. I thought it was gonna take a couple of hours to deploy, so I need some extra help 😉

 

[torpid]

Originally posted by: Zucarita9000

Originally posted by: torpid
Is this an article editor? If not why would you want to offer this feature? It sounds like a lot of work considering the user's can increase the text size in their browser themselves, without all the fancy javascript which may only work in certain browsers.

I know!. That's exactly what I told our client, but he wants it anyway. He's such a PITA. Anyway, I ended up charging him an extra $200 for that feature alone, but it's giving me a headache. I thought it was gonna take a couple of hours to deploy, so I need some extra help 😉

Is this an IE only site? You could try using the children property and then traverse it like a tree. For each child, you could see if it has the necessary property and then set it, then handle its children too.

 

[Zucarita9000]

No, it should be compatible with Firefox and the stupid Netscape browser too... I don't care about Opera, really.

 

[torpid]

Are you sure that getElementByID works in non IE browsers? You may find this troublesome to say the least in netscape.

 

[ugh]

It's actually done this way:

function Bigger(){
var el = document.getElemetById('ArticleText');
el.style.fontsize = el.style.fontsize + 1;
}

This works with IE5.5+ and Mozilla. NS4 doesn't work coz it has no support for DOM.

Instead of coding a web-based HTML editor, I think you can look for a freeware version of one online. Try Googling for it 🙂

Ahh... Something for you:

http://www.dynarch.com/projects/htmlarea/

 

[replicator]

Originally posted by: torpid
Are you sure that getElementByID works in non IE browsers? You may find this troublesome to say the least in netscape.

getElementById is the w3c DOM core standard.

Non IE browsers are in most cases more compliant than IE.