Maintaining state between function calls

Discussion in 'Javascript' started by melissa.lombard@gmail.com, Jun 10, 2005.

  1. Guest

    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>
     
    , Jun 10, 2005
    #1
    1. Advertising

  2. Guest

    I guess I should add that I would prefer to do it without cookies as
    well... Otherwise problem solved :)
     
    , Jun 10, 2005
    #2
    1. Advertising

  3. <> wrote in message news:...
    > 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.

    --
    Stephen Chalmers
     
    Stephen Chalmers, Jun 10, 2005
    #3
  4. Guest

    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>
     
    , Jun 10, 2005
    #4
  5. <> wrote in message news:...
    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>


    --
    Stephen Chalmers http://makeashorterlink.com/?H3E82245A

    547265617375726520627572696564206174204F2E532E207265663A205451323437393134
     
    Stephen Chalmers, Jun 11, 2005
    #5
  6. <> wrote in message news:...
    >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>


    --
    Stephen Chalmers http://makeashorterlink.com/?H3E82245A

    547265617375726520627572696564206174204F2E532E207265663A205451323437393134
     
    Stephen Chalmers, Jun 11, 2005
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?Tm92aWNl?=
    Replies:
    1
    Views:
    485
    John Saunders
    Sep 24, 2004
  2. Pete
    Replies:
    2
    Views:
    467
  3. Brett Cramer
    Replies:
    2
    Views:
    3,903
    Brett Cramer
    Oct 16, 2003
  4. muzzy
    Replies:
    1
    Views:
    249
    Jan Limpens
    Nov 7, 2003
  5. Bob
    Replies:
    5
    Views:
    262
Loading...

Share This Page