SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Saskatoon, Canada
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Increase/Decrease Font Buttons

    I was wondering if I could get some different people's opinions:

    What do you think is the best method to let your users increase or decrease the font size on a web site? (ie. whatdoiknow.org)

    Is there a good method of doing this that avoids javascript, and uses pure CSS?

    Thanks for your input.
    Hamnet.
    Adopt A Beard.com: Get peace of mind with a piece of mine.

  2. #2
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately not. JavaScript is the only way to go.

    HTML Code:
    <script type="text/js">
    function setFont(element,size)
    {
      if (document.getElementById(element))
      {
        document.getElementById(element).style.font-size = size+'em';
      }
    }
    </script>
    <button id="btn1" onclick="setFont('this','1')" value="1" />
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Saskatoon, Canada
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately not. JavaScript is the only way to go.
    What about a method like ProjectSeven's SwapClass extension? Would it be possible to change one class that had "font-size=12px;" to another class that had "font-size=16px;"?

    Is this a decent alternative?
    Hamnet.
    Adopt A Beard.com: Get peace of mind with a piece of mine.

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    581
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hamnet
    What about a method like ProjectSeven's SwapClass extension? Would it be possible to change one class that had "font-size=12px;" to another class that had "font-size=16px;"?

    Is this a decent alternative?
    Yes that would be another way to do it. Still have to use JS, though.
    I will not flame the newbies,
    I will not flame the newbies,
    I will flame the newbies...
    Table free is the way to be!

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2002
    Location
    Saskatoon, Canada
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes that would be another way to do it. Still have to use JS, though.
    Sigh... I guess I can't escape using javascript then. Oh, well. Thanks, BluDragon.
    Hamnet.
    Adopt A Beard.com: Get peace of mind with a piece of mine.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    UK
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, the way to go is to set up your font sizes using ems. Then if the user has a need - accessibility problem for example - they will set the base / min font size in their browser and everything will adjust automatically.

    See also 'setting fonts in css' in this forum.

    Regards
    Geoff


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
  •