Style Switcher & Text Resizer combined?
I came across various stylish radio buttons that allow you to change the stylesheet (like Light, Dark, High Contrast) and carious text filters that allow you to change the size of the test (usually three, small, medium and large).
However, I cannot find a single switch / resizer that works well together, allowing permutations of the two.
i.e. so the user can choose a dark background with little text, or a dark background with large text, etc. It seems to me that this works when the user can choose one or the other styles (large text or high contrast, not a combination of the two).
Any ideas on what might be appropriate for this at all?
Thank,
Stephen
source to share
As easy as this will be, there is a lot to do with the CSS and Javascript you know.
The text editor usually changes the rule to look like
body p {
font-size: 12px;
}
and increase the font size up or down based on the click. So (in jQuery) you bind an event to your resizer, which looks something like this:
$("#resizer").click(function(){
$("body p").css("font-size", "18px");
});
Clearly you will need to change the selectors to match what you want to customize. This is one of the strategies.
Another way to do this (including your dark / light or other themes) is to have completely different stylesheets. It might not be ideal: 3 font sizes x 3 themes - 9.css files. Clap! Here's a nice entry that I won't duplicate here:
http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/
Good luck!
source to share