Increase Font-Size On Click

Hi,

I'm looking to inrease accessibility, and was wondering what's the best way to implement an increase/decrease font-size feature. I know this can be done through the tools menu, but i'd like a button on my site, say 3 different font-sizes S, L and XL.

How would I go about doing this, really when the button is clicked it should only change the font-sizes of about 3 different DIV's.

Maybe a function which jus changes set style of the font-size for the 3 DIV's in question on click?
Or should I load a different style sheet altogether?

 

You need to use javascript for this. I recommend the jQuery framework to make it very simple.

Basically, you can have different classes for the different sizes you want. Then all it takes is something like this...

// When the button with the class "button_big" is clicked...
$(".button_big").click(function(){
// Add the class "big" which contains a different font size
$("p").addClass("big")
});

Code (markup):

 

So the above code will add the class BIG to every element on the page? I'm not experienced with JS at all to be honest apart from the basics, i've never used a library.

What would you think of something like this:

functiona {
divA.style.fontSize="20px"
divB.style.fontSize="20px"
divC.style.fontSize="20px"
divD.style.fontSize="20px"
}
Is this practical? Would it work?

So I would have 3 different functions for the 3 different font-sizes, activated on click?

 

Mine was just an example and could easily be changed. Basically, I told it to add the class "big" to all paragraphs on the page. The way you described wouldn't work, the easiest way is to do it like I described. Basically, you would wrap all the things you want to be controlled with the button in a special div, and then have your three buttons at the top of the page. Then, for each of the buttons, you would have a jquery statement, like the one i wrote above, saying to add the class for the relevant font size when the button is clicked.

So basically, your javascript is like this (in plain english - no point me writing the whole code right now) ..

// when the "small" button is clicked, add the "small" class to the appropriate text
// same thing for medium and large text

then your css is like this...

.small {
font-size: 80%;
}

etc.. with medium and large also having css classes.

Trust me, jquery will be the easiest way for you to do this.

Edit.. reread the code in my first post, I realized i had made a mistake. I commented it now to show you exactly what is happening.

 

Thanks for the swift and detailed response garrettheel, it's appreciated.

I'll look into JQuery now as i've never used it, then get down to implementing the feature.

I'll let you know how it goes, thanks again!

 

You're welcome, good luck. Just post here if you need a hand with the jQuery code, it's relatively simple.

 

I use the keyboard ..... CTRL + ..... to incrementally increase the content of web pages to whatever size I find comfortable for reading -- usually a couple of increments (CTRL - incrementally reduces).

James