I would like to add dynamic text sizing to a website. There will be
three text sizes. When the default is used, only the "Increase text
size" button is shown. When the maximum size is used, only the
"Decrease text size" button is shown. And otherwise, both buttons are
shown.
I've been working on a mockup as follows at the end, but my issue is
that once I have manipulated an element of the HTML DOM, if I access it
again to check it's value, I will only get the original value in the
document. To do the dynamic buttons, I need to maintain some kind of
state between function calls, so that I know what the current size is.
Can I even do this with Javascript or am I barking up the wrong tree?
-Melissa
-------------------------------------------------------------------
<html>
<head>
<link id="StylesheetReference" rel="stylesheet" type="text/css"
href="size1.css" />
<script type="text/javascript" language="JavaScript">
<!--
function useSize1() {
document.getElementById('StylesheetReference').hre f="size1.css"
}
function useSize2() {
document.getElementById('StylesheetReference').hre f="size2.css"
}
function useSize3() {
document.getElementById('StylesheetReference').hre f="size3.css"
}
//-->
</script>
</head>
<body>
<center>
<h1>bob-0-matic</h1>
<p>This is a mock-up of using Javascript to dynamically change the
font-size :)</p>
<script type="text/javascript" language="JavaScript">
<!--
if (document.getElementById('StylesheetReference').hr ef = "size1.css")
{
document.write("<p><a href=\"#\" onMouseDown=\"useSize2()\">Increase
size</a></p>")
}
else if (document.getElementById('StylesheetReference').hr ef =
"size2.css") {
document.write("<p><a href=\"#\" onMouseDown=\"useSize3()\">Increase
size</a></p>")
document.write("<p><a href=\"#\" onMouseDown=\"useSize1()\">Decrease
size</a></p>")
}
else if (document.getElementById('StylesheetReference').hr ef =
"size3.css") {
document.write("<p><a href=\"#\" onMouseDown=\"useSize2()\">Decrease
size</a></p>")
}
//-->
</script>
</center>
</body>
</html>
