SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2007
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript to change font size

    Hi,

    I have a client (nursing home) who would like to use a javascript they saw on another website that allows the guest to increase or decrease the font size. I have incorporated it into my website page, but if you increase it too much, then the navigation bar goes out of wack. Is there anyway to limit the number of times a person increases the font size so this won't happen? Or is there away to set it up so it just affects the text in the body of the page.

    Hope this makes sense...


    link to page:
    http://www.sitesbysarah.com/oaknoll/aboutus.htm


    Textsizer.JS code:

    HTML Code:
    // JavaScript Document
    
    
    //Specify affected tags. Add or remove from list:
    var tgs = new Array( 'div','td','tr');
    
    //Specify spectrum of different font sizes:
    var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
    var startSz = 2;
    
    function ts( trgt,inc ) {
    if (!document.getElementById) return
    var d = document,cEl = null,sz = startSz,i,j,cTags;
    
    sz += inc;
    if ( sz < 0 ) sz = 0;
    if ( sz > 6 ) sz = 6;
    startSz = sz;
    
    if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
    
    cEl.style.fontSize = szs[ sz ];
    
    for ( i = 0 ; i < tgs.length ; i++ ) {
    cTags = cEl.getElementsByTagName( tgs[ i ] );
    for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
    }
    } 
    
    Thanks,
    Sarb

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I consider it poor to script text size changes, which ranks with me the same as providing a print and bookmark buttons.

    The web browser already has full and complete text size capabilities. Some browsers even remember the text size settings to use on different websites.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That script is using the old HTML fint size settings which web pages should no longer use. The font sizes should be set in the stylesheet and while you can change the stylesheet font sizes from JavaScript there is never a need to since if you code them the right way in the stylesheet your visitors will see them the way they want anyway by configuring their browser appropriately.

    Providing buttons in the page to change font size was the 20th century way of doing things before browsers started supporting stylesheets.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Addict
    Join Date
    Apr 2006
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Those are all true points - the underlying problem is that the nav is table-based, and the tables getting blown out of whack by the font-size change. You might be able to fix it with css. Or maybe it's time to sell them on a redesign and table-less css layout

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That the page will screw up when a visitor resizes the text is one of the reasons for not using HTML tables for layout.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Or at the very least, can the navigation come out of tables and set in em-sized containers? So that at least that part can scale okay? The only people who cannot already scale the text are users of IE when the font size is set in px anyway (and IE7 can zoom).
    Or is there away to set it up so it just affects the text in the body of the page.
    If the guests are all using IE, then setting the menu in px fonts while the body text in em or % or pt fonts would get you what you want... though that's a poor solution : )


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
  •