SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Another question about font resizing

    There are several threads in this forum about using various scripts to increase/decrease your font size, but none of them directly address my question. And I know the objections re: browsers have their own zooming functions and therefore Web sites don't need to include this, but in the redesign I'm doing, others desire the function. So I get to include it....

    The intent is to have image/text links in a sidebar for "increase" and "decrease." All fairly straightforward, and there are a ton of scripts out there that do this. But I'm not finding a good one that works with font-sizing in percentages, as the site uses. Most of the switcher scripts I've found use pixel sizes. Any recommendations?

    Note: I'm a thrashing, floundering idiot when it comes to using scripts, so talk slowly....

  2. #2
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you say percentages, do you mean a percentage of the current size? So, if a font was given as 12pt, and you wanted to increase to 150% size (increase by 50%), it would be 18pt?

    Are you using pt, px, em?
    Humbly,

    Smola

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hi Smola, and thanks for responding.

    I've set the body font-size at 13px in the global reset. After that, it's almost all percentages, i.e. font-size: 110% for this element or font-size: 95% for that element.

    Hope that's what you were asking.

  4. #4
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha. When you allow the user to adjust bigger or smaller, what kind of increment were you thinking? And I assume there is a maximum and minimum?
    Humbly,

    Smola

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Smola View Post
    Gotcha. When you allow the user to adjust bigger or smaller, what kind of increment were you thinking? And I assume there is a maximum and minimum?
    I'm thinking fairly simple: decreasing would take it down either 1 or 2 steps (i.e. "smaller," "x-small") and the same for increasing. I see no need to provide the ability to resize either direction past, say, two steps either way.

    Two of my biggest requirements are for the script and its related commands to get along with the existing stylesheet -- i.e. leave it as is unless triggered -- and to be able to return to the default sizing/styling across the board. A lot of these style switchers/resizers (using both scripts and multiple CSS sheets), once they're activated, never quite return the page to its default appearance without a refresh.

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    After such probing questions, I'm left wondering if there's an answer in the offing....

    And, after some discussion on the CSS boards, I've changed the font-size percentages to ems. (Should have done that long ago, I know better.) Any thoughts as to a resizing script written for ems as opposed to pixels?

  7. #7
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,880
    Mentioned
    48 Post(s)
    Tagged
    0 Thread(s)
    Giving it some thought now. Your body is set to a certain size and all other text is based on that? ie 110%, 1.2em, etc?

    Can you not with js just change the body base size? Then all the others should adjust according to that?

    jQuery:
    $("body").css("font-size","14px");

    Just a suggestion, not sure if it will work or not.

    Good luck

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by NightStalker-DNS View Post
    Can you not with js just change the body base size? Then all the others should adjust according to that?
    jQuery:
    $("body").css("font-size","14px");
    Just a suggestion, not sure if it will work or not.
    Good luck
    You know, that actually crossed my mind, but I'm so JS-ignorant, I didn't know if it would work. Anyone want to chime in here?

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    NightStalker's suggestion will work if all your font-sizes are specified relatively (i.e. in EMs or &#37.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    NightStalker's suggestion will work if all your font-sizes are specified relatively (i.e. in EMs or %).
    They are.

    Doofus question: How would I write that as a small, standalone script that would function as a font switcher (or alternate CSS)?

  11. #11
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,880
    Mentioned
    48 Post(s)
    Tagged
    0 Thread(s)
    Ok, will first you will have to make a reference to jquery.js
    then underneath that make a reference to your custom js file. eg. jFontResize.js

    then in there have the following:
    Code:
    var increments = 2;
    var currentSize = 13;
    
    $(function() {
         currentSize = parseInt($("body").css("font-size").replace("px",""));
    
         $(".increaseFont").click(function() {
               var newSize = currentSize+increments;
               $("body").css("font-size",newSize+"px");
         });
         $(".decreaseFont").click(function() {
               var newSize = currentSize-increments;
               $("body").css("font-size",newSize+"px");
         });
    });
    That is a quick/easy and dirty way of doing it, im sure there might be better ways to do this, but yea. You would also wana do some checking so that the font size does not go over a certain size or below a certain size.

    or alternatively check this out:
    http://net.tutsplus.com/tutorials/ja...-of-your-text/
    http://dev-tips.com/featured/jquery-...-font-resizing

    I hope this helps a bit.

    PS. then all you need to do is put the classes on ur links increaseFont and decreaseFont respectfully.

  12. #12
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Night. I'm going to experiment with your code and the Dev-Tips code tonight. (The slider is a bit much for my purposes.)

  13. #13
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, interesting.

    Your script works nicely, except there's no way to return to the default size once you begin activating the resizer. It's limited to larger-than-normal and smaller-than-normal. Also, it just provides one step up/down.

    The DevTips works very well (almost too well -- you can enlarge the text pretty much ad infinitum to the point of ridiculousness), but I'm such a glump that I don't know how to translate the form buttons the example uses into text links. Buttons won't work in the design, even styled (the links are in a UL).

    Edit: Drew Douglass of DevTips is very helpful. He rewrote the script to accomodate anchored links. Seems to work great! Excellent recommendation, Night.


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
  •