jhint
asked on
Changing font size in browser
How do you create text on the web page that can be changed in size by the viewer in his browser by using his change size button?
Simple text I create in Frontpage and Word XP doesn't seem to allow this to happen. It just stays the size set when authored.
Simple text I create in Frontpage and Word XP doesn't seem to allow this to happen. It just stays the size set when authored.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
It depends on the code. FrontPage and word generates a code with CSS font-size defines. if you remove all the font settings (font-size, or font) you will then be able to change the font size with the browser charachter settings.
You can of course provide different CSS stylesheets (with small, medium and large font sizes) and switch between them using a JavaScript function that is activated by a click of a button that JS displays on each page.
I find this very useful for group training events (small for printing, medium for individual PC screens, large for whole-group data projector).
This approach is more work but gives you MUCH more control of the displays NOT just font-size.
<script language="JavaScript">
document.write('<form><inp ut type=button name=changeSize value="Change text size" onClick="cycleCSS()"></for m>');
function cycleCSS() {
currentCSS=document.styleS heets[0].h ref;
if (currentCSS=='small.css') {
document.styleSheets[0].hr ef='medium .css'
document.forms[0].changeSi ze.value=' Medium --> Large text';
}
if (currentCSS=='medium.css') {
document.styleSheets[0].hr ef='large. css'
document.forms[0].changeSi ze.value=' Large --> Small text';
}
if (currentCSS=='large.css') {
document.styleSheets[0].hr ef='small. css';
document.forms[0].changeSi ze.value=' Small --> Medium text';
}
}
</script>
See URL below for example of use:
http://www.active-media-solutions.co.uk/international/listitems2.asp
HTH
I find this very useful for group training events (small for printing, medium for individual PC screens, large for whole-group data projector).
This approach is more work but gives you MUCH more control of the displays NOT just font-size.
<script language="JavaScript">
document.write('<form><inp
function cycleCSS() {
currentCSS=document.styleS
if (currentCSS=='small.css') {
document.styleSheets[0].hr
document.forms[0].changeSi
}
if (currentCSS=='medium.css')
document.styleSheets[0].hr
document.forms[0].changeSi
}
if (currentCSS=='large.css') {
document.styleSheets[0].hr
document.forms[0].changeSi
}
}
</script>
See URL below for example of use:
http://www.active-media-solutions.co.uk/international/listitems2.asp
HTH
ASKER
Thanks. I now have to ask another question. Perhaps it should be a new entry in the system or just an extentsion to this question. But in any case - how do I rid my web page of style sheet code? I tried the Remove formatting options in Word and Frontpage but they didn't work. For some reason they don't seem to regard style sheets as formatting?!?!!?
I hope I don't have to do it manually. Can I set the programs to NOT insert style sheet codes in the first place?
I hope I don't have to do it manually. Can I set the programs to NOT insert style sheet codes in the first place?
I am not familier with FrontPage and therefore cannot answer, sorry.