Style Switcher & Text Resizer Combined?

Question

Hi there,

I've came across various style switchers that allow you to change the stylesheet (i.e. Light, Dark, High Contrast), and carious text-resizers that allow you to resize the test (usually with Three A's, small, medium and large).

However, I can't seem to find a single switcher/resizer that works well together by allowing permutations of the two.

i.e. so the user can choose a dark background with small text, or a dark background with large text, etc. I can only seem to get this working where the user can choose one or the other styles (large text or High Contrast, not a combination of the two).

Any ideas on anything that may be suitable for this at all?

Thanks,

Stephen

Answer 1

How easy this will be to accomplish will have to do a lot with how much about CSS and Javascript you know.

A text-resizer will typically change a rule that looks like

body p {
    font-size: 12px;
}

and increase the font-size up or down based on the click. So (in jQuery) you'd bind an event to your resizer that looks something similar to this:

$("#resizer").click(function(){
    $("body p").css("font-size", "18px");
});

Clearly you'll need to change the selectors around to match just what you'd like to adjust. This is one strategy.

Another way to do it (that might include your dark/light or other themes) would be to have entirely different stylesheets. This might not be ideal: 3 font sizes x 3 themes is 9 .css files. Yikes! Here's a pretty good writeup that I won't duplicate here:

http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/

Good luck!