SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Melbourne, Australia
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Changing text size with css and javascript?

    Hi folks.

    We're all well aware of the nasty font size problems on different browsers, and we all know that we must make our sites as accessible as possible. But these two problems seem mutually exclusive.

    To make text look the same on all platforms, you must define them in pixels, but then the user can't override this size in MSIE (NS and opera have no problem scaling absolute font sizes).

    I have an idea for a solution, but I am no programmer and would not know how to go about achieving it. I am hoping someone here can help me...

    What would be ideal would be the ability for users to adjust the text size of a page live by clicking on inline buttons (pehaps a small + and -). This would then instantly update the css and redraw the page. I want to define the base font size in the style sheet something like this:

    body, td {font-size: 12px;}

    ...and then define all other font sizes (eg headings) with percentage values relative to that base.

    If the user clicked on the + button once, it would change the style sheet to be a base font of 16px for example. If they clicked again, it would be 24px. The other fonts would all scale relative to the base.

    It would also be necessary for the size to be remembered across all pages so the user doesn't have to keep changing the default. Perhaps with a cookie?

    I've looked everywhere online for something like this, and the closest I've found is this: http://www.dansteinman.com/dynduo/ex...tscaling1.html but it only works on inline objects, not on the <body>

    I would be very greatful to anyone that can help me!

    Thanks!
    Neil Creek
    http://www.gravitoncity.com
    http://www.orionvisuals.com

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2000
    Location
    Northern California
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    does this help?

    http://glish.com/css/blogger/blogger.html

    This is a great resource for CSS ..
    within this template on the right of the page is
    a + & _ for font size.

    it may not be at all what you are thinking of or looking for..but

    hth

    humanz
    "...Planet lurches to the right as ideologies engage/suddenly it's
    repression, moratorium on rights/what did they think the politics of
    panic would invite/the person on the street shrugs "security comes
    first"/but the trouble with normal is it always gets worse!" -- Bruce Cockburn

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Melbourne, Australia
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's outstanding! It does exactly what I want, and more! However... The site I'm working on has to be compatible with v4+ browsers. The text formatting only works in msie5+ and NS6+.

    Does anyone know of a similar system (font family changing not needed) which will work on v4+ browsers?
    Neil Creek
    http://www.gravitoncity.com
    http://www.orionvisuals.com

  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by neilcreek
    That's outstanding! It does exactly what I want, and more! However... The site I'm working on has to be compatible with v4+ browsers. The text formatting only works in msie5+ and NS6+.

    Does anyone know of a similar system (font family changing not needed) which will work on v4+ browsers?
    You may have some problems then. I don't know which or how but older browsers don't have full support for css number 1 and number2 don't have full support of javascripts support for css. To put it simply those browser may not understand what javascript is trying to tell them.

    But since I don't code for those browser I can honestly say that this is more or less an educated guess

    [edit]
    Sorry thought of one thing you could do. Detect the actual browser and have different style sheets for each browser. So

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    if ((navigator.appVersion.indexOf("Mac") != -1)) {
    document.write("<LINK REL=stylesheet HREF=\"stylemac.css\" TYPE=\"text/css\">"); }
    else {
    document.write("<LINK REL=stylesheet HREF=\"stylewin.css\" TYPE=\"text/css\">"); }
    // -->
    </SCRIPT>
    should work well if you put in the correct code for each type of browser. For more info on browser detection try

    http://www.webreference.com/js/column6/index.html

    That article will explain severl different techniques. Best of luck
    Last edited by Maelstrom; Dec 31, 2001 at 01:56.
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2001
    Location
    Melbourne, Australia
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe that it's possible to set style with javascript. This page has an example of what I've come across during my research: http://www.webreference.com/dhtml/co...menuFrJSS.html This supposedly works in NS4. I have no idea about other platforms. Not being a programmer, I have no idea what to do with this anyway... Also there's the issue with setting the user's preference to all pages.

    I'd rather not call different style sheets for a number of reasons. Extra style sheets means more to download (our target audience regularly is limited to 28k or 33k), more complicated css management (this technique will be applied to hundreds of sites and could get messy with multiple css), and the fact that browser detection still leaves many holes as pointed out in the ALA article "Fear of style sheets": http://www.alistapart.com/stories/fear4/3.html (for relevent comment, scroll to "The scripting solution: foiled again").

    Maybe I'm asking too much, but I'm sure this must be doable.


    Thanks for your help thus far!
    Neil Creek
    http://www.gravitoncity.com
    http://www.orionvisuals.com

  6. #6
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by neilcreek
    I believe that it's possible to set style with javascript. This page has an example of what I've come across during my research: http://www.webreference.com/dhtml/co...menuFrJSS.html This supposedly works in NS4. I have no idea about other platforms. Not being a programmer, I have no idea what to do with this anyway... Also there's the issue with setting the user's preference to all pages.

    [/i]
    Ok I will say this nn4.7 has support for css (I thought I did say that) buts its support is weak and I am not sure if it will work with the particular command you want but here it is.
    Code:
    document.tags.p.fontSize="20pts";
    That will change all tags <p> to that fontsize. If you want to give them a class or an id you can do it this way

    Code:
    document.class.fontclass.all.fontSize="20pts";
    which would work on something like this
    Code:
    <p class="fontClass">blah</p>
    Thats a simple explanation for how nn4.7 uses css with javascript.

    With IE (after 5.5 for sure) & nn6.0 use

    document.getElementById('idname').style.fontSize="20pts";

    so a typical tag would look like this

    <p class="bob" id="bob">blah</p>

    You would access its attributes through any of the above.

    NOW!. The problem is you still have to use browser detection to make all of this work. So you are still going to have to hope the detection works because you are right in saying browser detection is weak.

    So to sum up
    Code:
    function adjustFont(){
        if (document.layers){   //Netscape 4
            document.tags.p.fontSize="20pts";
        }else if (document.all && document.getElementById){
             //IE5.5+
            document.getElementById("idname").style.fontSize="20pts";
        }else if (document.getElementById){ 
             //Netscape 6.0
            document.getElementById("idname").style.fontSize="20pts";
        }else{
            //other browser support
        }
    }
    Detecting the dom is more accurate than detecting the browser itself so you should have a lot of problem with that code.

    For references try
    http://members.aol.com/grassblad/
    www.webreference.com

    Both of these give excellent dhtml tutorials
    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.


Bookmarks

Posting Permissions

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