Compatible for all browsers. How!?

Discussion in 'Javascript' started by jfancy-Transport Canada, May 25, 2005.

  1. I have this code here that reads in a javascript file and increases or
    decreases font by its relative size (same thing as View, Text Size,
    Large, small, etc.) I am developing this for Transport Canada and I
    need some help. Here is my code. I need it to be compatible with IE,
    Mozilla, Netscape and Opera. Most versions of these browsers has to be
    compatible. If you could help me out the least bit would greatful.
    Here's the code:

    HTML:


    <html>
    <head>

    <script language="javascript" src="textsize2.js"> </script>
    </head>
    <body>

    <h1>Hello there</h1>
    <h2>Test</h2>
    anything.

    <input type="button" onclick="resizeBodyText(+2, 'n')" value="Font +" >
    <input type="button" onclick="resizeBodyText(-2, 'n')" value="Font -" >

    <input type="button" onclick= "resizeBodyText(0, 'y')" value="Reset">
    <input type="button" onclick= "clearCookie()" value="Clear Cookie">

    </body>
    </html>

    -------------------------------------------------------------------


    JAVASCRIPT FILE:


    var current = 0
    var basesize = parseFloat(getCookie("fontFactor"))

    window.onload=function(){
    resizeBodyText(basesize, "n")
    }



    function resizeBodyText(factor, reset){
    if (reset=="y")
    factor = (current * -1);
    if (document.getElementsByTagName){
    var a = document.getElementsByTagName('*');
    } else if (document.all){
    var a = document.all;
    } else {
    return; // No point in continuing
    }

    // exit if currentStyle or style not supported
    if (!a[0].currentStyle || !a[0].style ) return;

    current += factor;
    var s, an, au, i=a.length;
    while ( --i ){
    s=a.currentStyle.fontSize;
    an = parseFloat(s); // Get the number part
    au = s.replace(an,''); // Get the units
    a.style.fontSize = an + factor + au;
    }
    setCookie("fontFactor", current)
    }


    function getCookie(name){
    var dc = document.cookie;
    var index = dc.indexOf(name + "=");
    if (index == -1) return null;
    index = dc.indexOf("=", index) + 1; // first character
    var endstr = dc.indexOf(";", index);
    if (endstr == -1) endstr = dc.length; // last character
    return unescape(dc.substring(index, endstr));
    }
    function setCookie(name, value){
    document.cookie= name + "=" + escape(value);
    }



    function clearCookie(){
    setCookie("fontFactor", 0)
    }

    ------------------------------------------------------------------
    PLEASE HAVE A LOOK. THANKS SO MUCH. ANY SUGGESTIONS, FEEL FREE
    jfancy-Transport Canada, May 25, 2005
    #1
    1. Advertising

  2. jfancy-Transport Canada

    Random Guest

    jfancy-Transport Canada wrote:
    > I have this code here that reads in a javascript file and increases or
    > decreases font by its relative size (same thing as View, Text Size,
    > Large, small, etc.) I am developing this for Transport Canada and I
    > need some help. Here is my code. I need it to be compatible with IE,
    > Mozilla, Netscape and Opera. Most versions of these browsers has to be
    > compatible. If you could help me out the least bit would greatful.
    > Here's the code:
    >


    ....

    > JAVASCRIPT FILE:


    ....

    > while ( --i ){
    > s=a.currentStyle.fontSize;
    > an = parseFloat(s); // Get the number part
    > au = s.replace(an,''); // Get the units
    > a.style.fontSize = an + factor + au;
    > }
    > setCookie("fontFactor", current)
    > }
    >


    ....

    > ------------------------------------------------------------------
    > PLEASE HAVE A LOOK. THANKS SO MUCH. ANY SUGGESTIONS, FEEL FREE


    Use CSS to assign a font-size to certain elements, esp. body and table.
    Start at 1em.

    Use JavaScript to increase the font-size of ONLY the body element.

    For a complex page, this script of yours could take a while as it loops
    through _every_ element and changes its style.

    em font-sizes are relative and inherited. Thus, you could define
    something like this:

    <body style=font-size:1em >
    <h2 font-size:2em >stuff</h2>
    <p>things</p>
    </body>

    The 'stuff' will appear twice as large as the 'things' below it.
    Increasing the font-size of the <body /> will automatically increase
    the font-sizes of everything it contains.

    So, for instance, the following statement will double the size of
    everything in the entire document:

    document.body.style.fontSize = '2em';


    Exceptions include anything that has been given an absolute size (in
    'pt' or 'px', for instance). Also, some elements (especially tables)
    will need to be assigned a relative font-size first.

    In this case, the table would not change size:
    <body style=font-size:1em >
    <table />
    </body>

    In this case, it would:
    <table style=font-size:1em />


    You can also use floats to specify an 'em' font size. Be aware that the
    rendering of text will (usually) only change when the float calculates
    to an actual point size, and you may (as per usual) find some slight
    differences in the way each engine on each platform renders the result.
    But designs are best when they're not overly rigid anyway. :)
    Random, May 25, 2005
    #2
    1. Advertising

  3. jfancy-Transport Canada

    RobG Guest

    jfancy-Transport Canada wrote:
    > I have this code here that reads in a javascript file and increases or
    > decreases font by its relative size (same thing as View, Text Size,
    > Large, small, etc.) I am developing this for Transport Canada and I
    > need some help. Here is my code. I need it to be compatible with IE,
    > Mozilla, Netscape and Opera. Most versions of these browsers has to be
    > compatible. If you could help me out the least bit would greatful.
    > Here's the code:

    [...]

    A cross-browser version was posted here:

    <URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/9d826a73a25612c5/27daff01160f440b?q=resizeBodyText&rnum=1&hl=en#27daff01160f440b>

    Note that it is still a bad idea to programatically change the font
    size.



    --
    Rob
    RobG, May 25, 2005
    #3
  4. What do you think of This!?
    -----------------------------

    here's the new js file:

    ----------------------------------------------
    getStyle(el, styleProp)

    var current = parseInt(getCookie("fontFactor")
    if (isNaN(current))
    current=0;

    window.onload(resizeBodyText(current, "n"))

    resizeBodyText(factor, reset)
    {
    if (window.getComputedStyle)

    if (reset=="y")
    factor= (current * -1)
    window.alert(current + " " + factor)

    if (document.getElementsByTagName) {
    var a = document.getElementsByTageName('*');
    } else if (document.all) {
    var a = document.all;
    } else {
    return;
    }

    current += factor;

    if (!a[0].getComputedStyle || !a[0].style ) return;

    var s, an, au, i=a.length;

    while( --1) {
    s=a..getComputedStyle.fontSize;
    an = parseFloat(s);
    au = s.replace(an,'';
    a.style.fontSize = an + factor + au;

    } else if (window.currentStyle) {

    if (reset=="y")
    factor= (current * -1)
    window.alert(current + " " + factor)

    if (document.getElementsByTagName) {
    var a = document.getElementsByTageName('*');
    } else if (document.all) {
    var a = document.all;
    } else {
    return;
    }

    current += factor;

    if (!a[0].currentStyle || !a[0].style ) return;

    var s, an, au, i=a.length;

    while( --1) {
    s=a..currentStyle.fontSize;
    an = parseFloat(s);
    au = s.replace(an,'';
    a.style.fontSize = an + factor + au;
    } else
    return;

    ------------------------------------------------------

    RobG wrote:
    > jfancy-Transport Canada wrote:
    > > I have this code here that reads in a javascript file and increases or
    > > decreases font by its relative size (same thing as View, Text Size,
    > > Large, small, etc.) I am developing this for Transport Canada and I
    > > need some help. Here is my code. I need it to be compatible with IE,
    > > Mozilla, Netscape and Opera. Most versions of these browsers has to be
    > > compatible. If you could help me out the least bit would greatful.
    > > Here's the code:

    > [...]
    >
    > A cross-browser version was posted here:
    >
    > <URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/9d826a73a25612c5/27daff01160f440b?q=resizeBodyText&rnum=1&hl=en#27daff01160f440b>
    >
    > Note that it is still a bad idea to programatically change the font
    > size.
    >
    >
    >
    > --
    > Rob
    jfancy-Transport Canada, May 26, 2005
    #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. =?Utf-8?B?U2FjaGEgVmlldXgtUm95?=

    Is CrystalReport Compatible with browsers on the Macintosh

    =?Utf-8?B?U2FjaGEgVmlldXgtUm95?=, Jun 9, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    363
    =?Utf-8?B?U2FjaGEgVmlldXgtUm95?=
    Jun 9, 2005
  2. Danny Lu

    is all the .obj or .o file compatible?

    Danny Lu, Aug 15, 2005, in forum: C Programming
    Replies:
    12
    Views:
    593
    Michael Wojcik
    Aug 17, 2005
  3. El Kabong

    Browsers, browsers! Quo vadis?

    El Kabong, May 11, 2007, in forum: HTML
    Replies:
    23
    Views:
    878
    dorayme
    May 13, 2007
  4. trint
    Replies:
    3
    Views:
    393
    bruce barker
    Sep 30, 2007
  5. pantagruel
    Replies:
    0
    Views:
    226
    pantagruel
    Feb 17, 2006
Loading...

Share This Page