Resize Text

**Salchester** · Jul 26, 2007 14:09

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>

**gRoberts** · Jul 27, 2007 02:48

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

**Salchester** · Jul 27, 2007 12:12

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?

**gRoberts** · Jul 27, 2007 12:24

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>

**Salchester** · Jul 27, 2007 14:03

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?

User Tag List

Thread: Resize Text

Thread Tools

Display

Resize Text

Bookmarks

Bookmarks

Posting Permissions