Maintaining state between function calls

M

melissa.lombard

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').href="size1.css"
}
function useSize2() {
document.getElementById('StylesheetReference').href="size2.css"
}
function useSize3() {
document.getElementById('StylesheetReference').href="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').href = "size1.css")
{
document.write("<p><a href=\"#\" onMouseDown=\"useSize2()\">Increase
size</a></p>")
}
else if (document.getElementById('StylesheetReference').href =
"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').href =
"size3.css") {
document.write("<p><a href=\"#\" onMouseDown=\"useSize2()\">Decrease
size</a></p>")
}
//-->
</script>
</center>
</body>
</html>
 
M

melissa.lombard

I guess I should add that I would prefer to do it without cookies as
well... Otherwise problem solved :)
 
S

Stephen Chalmers

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').href="size1.css"
}
function useSize2() {
document.getElementById('StylesheetReference').href="size2.css"
}
function useSize3() {
document.getElementById('StylesheetReference').href="size3.css"
}
file://-->
</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').href = "size1.css")
{
document.write("<p><a href=\"#\" onMouseDown=\"useSize2()\">Increase
size</a></p>")
}
else if (document.getElementById('StylesheetReference').href =
"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').href =
"size3.css") {
document.write("<p><a href=\"#\" onMouseDown=\"useSize2()\">Decrease
size</a></p>")
}
file://-->
</script>
</center>
</body>
</html>

You're using the assignment operator '=' when you need the equality operator '=='
if (document.getElementById('StylesheetReference').href = "size1.css")

That test will always evaluate true regardless of the actual value.
 
M

melissa.lombard

Ah yes, sorry. I *did* fix that, but it still does not work, the link
href value still seems to be returning the default of "size1.css".
Anyhoo, I thought of a different solution, that changes the querystring
parameter to track the text size:
------------------------------­------------------------------­-------
<html>
<head>
<link id="StylesheetReference" rel="stylesheet" type="text/css"
href="size1.css" />

<script type="text/javascript" language="JavaScript">
<!--
function useSize1ByUrl() {
location.search = "ts=1"
}
function useSize2ByUrl() {
location.search = "ts=2"
}
function useSize3ByUrl() {
location.search = "ts=3"
}
function useSize4ByUrl() {
location.search = "ts=4"
}
//-->
</script></head>
<body><center>
<p>This is a mock-up of using Javascript to dynamically change the
font-size :)
<br /> ...As well as dynamically choose which links to show</p>
<table border="1" bgcolor="lightblue">
<script type="text/javascript" language="JavaScript">
<!--
if (location.search == "" || location.search == "?ts=1") {
document.getElementById('StylesheetReference').href="size1.css"
document.write("<tr><td onClick=\"useSize2ByUrl()\"><a
href=\"#\">Increase size</a></td></tr>")
}
else if (location.search == "?ts=2") {
document.getElementById('StylesheetReference').href="size2.css"
document.write("<tr><td onMouseDown=\"useSize3ByUrl()\">Increase
size</td></tr>")
document.write("<tr><td onMouseDown=\"useSize1ByUrl()\">Decrease
size</td></tr>")
}
else if (location.search == "?ts=3") {
document.getElementById('StylesheetReference').href="size3.css"
document.write("<tr><td onMouseDown=\"useSize4ByUrl()\">Increase
size</td></tr>")
document.write("<tr><td onMouseDown=\"useSize2ByUrl()\">Decrease
size</td></tr>")
}
else if (location.search == "?ts=4") {
document.getElementById('StylesheetReference').href="size4.css"
document.write("<tr><td onMouseDown=\"useSize3ByUrl()\">Decrease
size</td></tr>")
}
//-->
</script>
</table></center></body></html>
 
S

Stephen Chalmers

Ah yes, sorry. I *did* fix that, but it still does not work, the link
href value still seems to be returning the default of "size1.css".

Yes it would, because that is the value coded in the html and at the point you'r reading it, no attempt has
been made to change it.


Anyhoo, I thought of a different solution, that changes the querystring
parameter to track the text size:

<SNIP>

There's no need to have four blocks of code to handle the different values of the search parameter, or to have
four functions to reload the page with the appropriate parameter. In fact, there's no need to reload the page
at all.

Try this:

<html>
<head>
<link id="StylesheetReference" rel="stylesheet" type="text/css"
href="size1.css" />

<script type="text/javascript" language="JavaScript">

var maxSize=4, fSize=1;

for(var i=0; i<maxSize && location.search!="?ts="+(i+1); i++) /*read parameter*/
;

fSize=(i==maxSize) ? 1 : i+1; /*if not found, use 1*/

function useSize( theSize )
{
if( theSize <= maxSize && theSize >= 1 ) /*ensure selected size within range*/
{
var ssRef=null;

fSize=theSize;

/*Set stylesheet and select visibility of links*/

if( document.getElementById && (ssRef=document.getElementById('StylesheetReference')) )
{ ssRef.href="size"+theSize+".css";
document.getElementById('incBtn').style.visibility=(fSize==maxSize?'hidden':'visible');
document.getElementById('decBtn').style.visibility=(fSize==1?'hidden':'visible');
}
}

}

</script>
</head>
<body>
<center>

<!-- Split-infinitive deleted -->

<p>This is a mock-up of using Javascript to change the font-size dynamically :) <br />
....As well as choose dynamically which links to show</p>
<table border="1" bgcolor="lightblue">

<script type="text/javascript">
if(document.getElementById) /*Display links */
{
document.write("<tr id='decBtn'><td onClick='useSize(fSize-1)'><a href='#'>Decrease size</a></td></tr>")
document.write("<tr id='incBtn'><td onClick='useSize(fSize+1)'><a href='#'>Increase size</a></td></tr>")
useSize(fSize); /*set initial stylesheet, which initilises visibility of buttons*/
}
</script>
</table>
</center>
</body>
</html>
 
S

Stephen Chalmers

Ah yes, sorry. I *did* fix that, but it still does not work, the link
href value still seems to be returning the default of "size1.css".

It would, because that is the value coded into the html and at the point you're reading it, no attempt has
been made to change it.

Anyhoo, I thought of a different solution, that changes the querystring
parameter to track the text size:

<SNIP>

There's no need to have four blocks of code to handle the different values of the search parameter, or to have
four functions to reload the page with the appropriate parameter. In fact, there's no need to reload the page
at all.

Try this:

<html>
<head>
<link id="StylesheetReference" rel="stylesheet" type="text/css"
href="size1.css" />

<script type="text/javascript" language="JavaScript">

var maxSize=4, fSize=1;

for(var i=0; i<maxSize && location.search!="?ts="+(i+1); i++) /*read parameter*/
;

fSize=(i==maxSize) ? 1 : i+1; /*if not found, use 1*/

function useSize( theSize )
{
if( theSize <= maxSize && theSize >= 1 ) /*ensure selected size within range*/
{
var ssRef=null;

fSize=theSize;

/*Set stylesheet and select visibility of links*/

if( document.getElementById && (ssRef=document.getElementById('StylesheetReference')) )
{ ssRef.href="size"+theSize+".css";
document.getElementById('incBtn').style.visibility=(fSize==maxSize?'hidden':'visible');
document.getElementById('decBtn').style.visibility=(fSize==1?'hidden':'visible');
}
}
}

</script>
</head>
<body>
<center>

<!-- Split-infinitive deleted -->

<p>This is a mock-up of using Javascript to change the font-size dynamically :) <br />
....As well as choose dynamically which links to show</p>
<table border="1" bgcolor="lightblue">

<script type="text/javascript">
if(document.getElementById) /*Display links */
{
document.write("<tr id='decBtn'><td onClick='useSize(fSize-1)'><a href='#'>Decrease size</a></td></tr>")
document.write("<tr id='incBtn'><td onClick='useSize(fSize+1)'><a href='#'>Increase size</a></td></tr>")
useSize(fSize); /*Set initial stylesheet, which initilises appropriate visibility of buttons*/
}
</script>
</table>
</center>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top