Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing font size...

    Howdy, firstly, newbie to the group, but have a bit of web dev ex, no JS though, tis what lead me here in first place. I'll stop boring you now...

    I'm wanting to place to two graphics on a web page, one a big minus sign and one a big plus sign. When these graphics are clicked, depending on the graphic, if the MINUS one is clicked I want the font size of the entire webpage to go down one point and likewise with the PLUS button, but have the font size increase in size by one point.

    Is this possible? If so, could anyone divulge the script or point me
    in the direction of somewhere that uses a technique like this?

    Any help would be great coz this has stumped me now for a couple of days!

    Cheers,

    ih.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What you suggest is no simple task for a novice. You want to dynamically switch styles. Here are some online examples, perhaps you can learn from them.

    http://www.meyerweb.com/ui/setup.html

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts

  • #4
    New Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Firstly, Adios, that's exactly what I was looking for.

    Secondly, does anyone know a way of whenever the user makes the font size bigger by using this function that I could store this value then use this as the default size in any further pages accessed by them.

    Also, could the size change be restricted so say for instance, it can't go below the size of 12 or above the size of 24?

    I'm thinking maybe place the size selected in a session variable, but as stated, my javascript knowledge is very minimal.

    Any ideas?

    Thanks so far though...

    ih.

    ps. I'm using this code...

    <script>
    function change(val) {
    changetxt.style.fontSize=parseInt(changetxt.style.fontSize)+val;
    }
    </script>

    <div id="changetxt" style="font-size: 8px">

    Put page here!

    <a href="#" onclick="change(1)">+</a> <a href="#" onclick="change(-1)">-</a>

    </div>

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,050
    Thanks
    0
    Thanked 251 Times in 247 Posts
    <script>
    function change(val) {
    fsize=parseInt(changetxt.style.fontSize)+val;
    if (fsize==11) fsize=12;
    else if (fsize==25) fsize=24;
    changetxt.style.fontSize=fsize;
    }
    </script>

    <div id="changetxt" style="font-size: 12px">

    Put page here!

    <a href="#" onclick="change(1)">+</a> <a href="#" onclick="change(-1)">-</a>

    </div>

    if you want the size to be the same through all the pages, you have to save the size to a cookie.

  • #6
    New Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok dokey, I'm getting further but I can't seem to get what I want to work. I've not been able to create a cookie called FontSize but I can't do much else with it.

    What I'd like is for it to check this cookie first, if it has a value then use this as the starting font size, if not, just bypass and start it at 12.

    Here's my code anyway so you's can show me the folly of my ways.

    Again, thanks so far for all the help and pointers.

    ih.


    <html>
    <head>

    <script>

    function change(val) {
    fsize=parseInt(changetxt.style.fontSize)+val;
    if (fsize==11) fsize=12;
    else if (fsize==25) fsize=24;
    changetxt.style.fontSize=fsize;

    var expdate = new Date();
    expdate.setTime (expdate.getTime() + (1000 * 60 * 60 * 24 * 31));
    setCookie ("FontSize", fsize, expdate);
    }

    function setCookie (name, value, expires) {
    if (!expires) expires = new Date();
    document.cookie = name + "=" + escape (value) +
    "; expires=" + expires.toGMTString() + "; path=/";
    }


    function getCookie (name) {
    var dcookie = document.cookie;
    var cname = name + "=";
    var clen = dcookie.length;
    var cbegin = 0;
    while (cbegin < clen) {
    var vbegin = cbegin + cname.length;
    if (dcookie.substring(cbegin, vbegin) == cname) {
    var vend = dcookie.indexOf (";", vbegin);
    if (vend == -1) vend = clen;
    return unescape(dcookie.substring(vbegin, vend));
    }
    cbegin = dcookie.indexOf(" ", cbegin) + 1;
    if (cbegin == 0) break;
    }
    return null;
    }



    </script>

    </head>
    <body>

    <div id="changetxt" style="font-size: 12px">

    <p>
    This script allows you to change the size of the text on screen
    and saves the size as a cookie, so whenever you click refresh, it
    'should' refresh the page in the same size of font!
    </p>

    <p>
    <a href="#" onclick="change(1)">+</a> <a href="#" onclick="change(-1)">-</a>
    </p>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •