SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Resize Text

  1. #1
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize Text

    Hi,

    How do I make the size of text change when the window is resized or the screen resolution is changed?

    I know how to do it with div, but how do you do it with text?

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ** thought I was in javascript forum, comments related javascript **

    When you are resizing a div, there is an event you can capture, when resizing the whole browser window, hmm I donno, especially if you resize the screen res which is totally outsize the web browser, how to capture that?

    Maybe a listener for the body element's width?
    Last edited by abb; Jul 23, 2007 at 18:07. Reason: thought I was in javascript forum

  3. #3
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize Text

    When you are resizing a div, there is an event you can capture.
    Can you give me an example?

    The screen resolution will change the size of the window (if maximized) anyway, so don't worry about the screen resolution.

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyhow checkout the onresize event handler here:
    http://developer.mozilla.org/en/docs...ement.onresize
    Last edited by abb; Jul 24, 2007 at 17:37. Reason: typo

  5. #5
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize Text

    How do I resize text using this?

  6. #6
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,804
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  7. #7
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers. But, how do I resize text upon the window being resized?

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is very rough code, but it will resize the body's tags fontSize
    Code JavaScript:
    var window_width = document.documentElement.clientWidth;
     
    window.onresize = function(){
     
      var current_width = document.documentElement.clientWidth;
      if ( current_width > window_width )
      {
        document.documentElement.style.fontSize = 'large';
        window_width = current_width;
      }
      else
     {
        document.documentElement.style.fontSize = 'small';
        window_width = current_width;
      }
     
      alert('check: '+current_width);
     
    }
    Works as expected on Firefox.

    PROBLEM: IE 7 will run the code 2 times for some reason, anybody know why?

  9. #9
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I activate your code in a new .html document?

  10. #10
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    put it in <head> inside <script>, note that it doesn't work in IE properly

  11. #11
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    window.onresize IE actually fires more than 2 times, to work around that, just specify font sizes specific popular screen sizes. Same thing, put this within <head> within <script>
    Code JavaScript:
    window.onload = function () {
     
      window.onresize = function() { // fires many times in IE
     
        var current_width = document.documentElement.clientWidth;
     
        if ( current_width > 1000 && current_width < 1200 )
        {
           document.documentElement.style.fontSize = '1em';
        }
        else if (  current_width > 1200 && current_width < 1600 )
        {
          document.documentElement.style.fontSize = '1.1em';
        }
        else // all other sizes
        {
          document.documentElement.style.fontSize = '.9em';
        }
     
      }
    }


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
  •