[OT] auto-resizing text according to current window width

Discussion in 'Javascript' started by Kerberos, Oct 23, 2004.

  1. Kerberos

    Kerberos Guest

    This afternoon I tweaked a script that does just that: independantly on
    the screen resolution of the visitor, if he/she resizes his current
    window, text size will increase/decrease alone. Pretty handy when you want
    your content to automatically adapt to the user's current window ;-)
    This script in action: http://osresources.com/resizing_content.html
    Not only is the text justified, but also the actual size changes according
    to current window width, and image proportions also always remains 33%
    (thanks to Jake)

    --
    K.

    http://www.osresources.com/


    1. Put this inside the body tag:
    onload="ts('body',0);" onresize="ts('body',0);"

    2. Paste this code in the body, if pasted in the head it won't work:

    <script type="text/javaScript">
    function ts( trgt,inc ) {
    w = 640;
    h = 480;
    NS4Plus = (document.layers) ? 1 : 0;
    IE4Plus = (document.all) ? 1 : 0;
    if (navigator.appName=="Netscape") {
    w = window.innerWidth;
    h = window.innerHeight;
    }
    if (IE4Plus) {
    /* The script must be inside the body tags - there is no body in the head
    of the document */
    w = document.body.clientWidth;
    h = document.body.clientHeight;
    }
    // alert(w+'x'+h);

    //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( '12px','14px','16px','18px','20px','24px','28px','36px' );
    var startSz;
    if (w <= 800) startSz = 0;
    else if (w <= 1024) startSz = 1;
    else if (w <= 1152) startSz = 2;
    else if (w <= 1268) startSz = 3;
    else if (w <= 1600) startSz = 4;
    else if (w <= 1900) startSz = 5;
    else startSz = 2;
    if (!document.getElementById) return
    var sz = startSz
    sz += inc;
    if ( sz < 0 ) sz = 0;
    if ( sz > 7 ) sz = 7;
    startSz = sz;
    var d = document,cEl = null,i,j,cTags;
    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 ];
    }
    }
    </script>
     
    Kerberos, Oct 23, 2004
    #1
    1. Advertising

  2. Kerberos

    Randy Webb Guest

    Kerberos wrote:

    > This afternoon I tweaked a script that does just that: independantly on
    > the screen resolution of the visitor, if he/she resizes his current
    > window, text size will increase/decrease alone. Pretty handy when you
    > want your content to automatically adapt to the user's current window ;-)
    > This script in action: http://osresources.com/resizing_content.html
    > Not only is the text justified, but also the actual size changes
    > according to current window width, and image proportions also always
    > remains 33% (thanks to Jake)
    >


    That is about the *worst* thing I have seen in a while. I resize my
    browser so I can see more, yet I don't see more. Thats real intuitive.

    Just glad it doesn't "work" in my preferred browser (Mozilla).

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Oct 24, 2004
    #2
    1. Advertising

  3. Kerberos

    Kerberos Guest

    Em Sat, 23 Oct 2004 20:05:23 -0400, Randy Webb <>
    escreveu:

    > That is about the *worst* thing I have seen in a while. I resize my
    > browser so I can see more, yet I don't see more. Thats real intuitive.


    A customer asked for this because he said he doesn't want a fixed width
    design of his web site. I said that in %, his design would look very
    streched on large screens such as 1600x1200 and above. Then I showed him
    this solution of having the whole content proportional, and he said this
    is what he wants. He also said he doesn't like black bars in movies on
    television, and fixed-width content on web sites is similar to this. Oh
    well, the most important is that he's now happy with his new web site ;-)


    > Just glad it doesn't "work" in my preferred browser (Mozilla).


    Really? I tried it with Mozilla on FreeBSD and it worked just fine...
    I'll try it on Windows.


    --
    K.

    http://www.osresources.com/
     
    Kerberos, Oct 24, 2004
    #3
  4. Kerberos

    Kerberos Guest

    Em Sat, 23 Oct 2004 20:05:23 -0400, Randy Webb <>
    escreveu:

    > Just glad it doesn't "work" in my preferred browser (Mozilla).
    >


    It is working fine on Mozilla v.1.7.3 for Windows.

    --
    K.

    http://www.osresources.com/
     
    Kerberos, Oct 25, 2004
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. UJ
    Replies:
    3
    Views:
    1,052
  2. AndrewF
    Replies:
    1
    Views:
    823
    Bruce Barker
    Oct 10, 2005
  3. linkswanted
    Replies:
    1
    Views:
    970
  4. Seige
    Replies:
    12
    Views:
    440
    Matt Kruse
    Jun 23, 2006
  5. visu
    Replies:
    3
    Views:
    175
    totalstranger
    Mar 1, 2007
Loading...

Share This Page