SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Resize Text

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

    Resize Text

    Hi Folks,

    How can the following script be adapted, in order for it to work in IE as well as FF?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script>
    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);
     
    }
    </script>
    </head>
    
    <body>
    hjkhjkhjkhjk
    </body>
    </html>

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here you go,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <script type="text/javascript">
                var currentWindowSize;
                window.onload = function() {
                    currentWindowSize = getWindowSize();
                }
                window.onresize = function() {
                    var newWindowSize = getWindowSize();
                    if(newWindowSize[0] > currentWindowSize[0]) {
                        currentWindowSize = newWindowSize;
                        setDocumentFontSize('large');
                    } else if(newWindowSize[0] < currentWindowSize[0]) {
                        currentWindowSize = newWindowSize;
                        setDocumentFontSize('small');
                    }
                };
    
                function setDocumentFontSize(size) {
                    if(document.documentElement)
                        document.documentElement.style.fontSize = size;
                    /*else if (document.style.fontSize)
                        document.style.fontSize = size;*/
                    else
                        alert('unable to set fontSize to \'' + size + '\'');
                }
    
                function getWindowSize() {
                  var myWidth = 0, myHeight = 0;
                  if( typeof( window.innerWidth ) == 'number' ) {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
                  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight;
                  }
                  return [myWidth, myHeight];
                }
            </script>
        </head>
        <body>
            
            Some text
    
            blah blah blah
    
        </body>
    </html>

    HTH


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

    What did you change, how did you make it compatible with IE?
    Is there anyway the script can be edited, in order for it to increment the text size, larger the window is resized, and Vice-Versa?

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    documentElement isn't available in Firefox IIRC. So you have to deal with that first. But! I've just realised i've editted out the part that deals with Firefox? And it still works. Strange.

    As for the DIV's etc,

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <script type="text/javascript">
                var currentWindowSize;
                window.onload = function() {
                    currentWindowSize = getWindowSize();
                }
                window.onresize = function() {
                    var newWindowSize = getWindowSize();
                    if(newWindowSize[0] > currentWindowSize[0]) {
                        currentWindowSize = newWindowSize;
                        /*setDocumentFontSize('large');*/
                setElementFontSize('large', document.getElementById('test'));
                    } else if(newWindowSize[0] < currentWindowSize[0]) {
                        currentWindowSize = newWindowSize;
                        /*setDocumentFontSize('small');*/
                setElementFontSize('small', document.getElementById('test'));
                    }
                };
    
                function setDocumentFontSize(size) {
                    if(document.documentElement)
                        document.documentElement.style.fontSize = size;
                    else if (document.style.fontSize)
                        document.style.fontSize = size;
                    else
                        alert('unable to set fontSize to \'' + size + '\'');
                }
    
                function setElementFontSize(size, el) {
                    el.style.fontSize = size;
                }
    
                function getWindowSize() {
                  var myWidth = 0, myHeight = 0;
                  if( typeof( window.innerWidth ) == 'number' ) {
                    //Non-IE
                    myWidth = window.innerWidth;
                    myHeight = window.innerHeight;
                  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                    //IE 6+ in 'standards compliant mode'
                    myWidth = document.documentElement.clientWidth;
                    myHeight = document.documentElement.clientHeight;
                  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                    //IE 4 compatible
                    myWidth = document.body.clientWidth;
                    myHeight = document.body.clientHeight;
                  }
                  return [myWidth, myHeight];
                }
            </script>
        </head>
        <body>
            
            Some text
    
            blah blah blah
    
        <div id="test">Blah Blah Blah<div>
    
        </body>
    </html>


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

    Are you saying it's not possible to increment the text size the larger the window is resized, and decrement the text size the smaller the window is resized?


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
  •