[thelist] javascript browser/platform/css help needed

Tom Dell'Aringa pixelmech at yahoo.com
Tue Oct 29 09:44:01 CST 2002


Marlene,

I'm not sure why you want to modify this, but I would suggest dumping
it altogether. IMO its a horrible way to do things. You can't be 100%
sure it's working correctly anyway. I imagine you want to modify it
because you are having some problems with newer browsers.

Why not use CSS instead and relative units and let the user scale the
font to what they want. I've been using EMs now for quite some time
effectively for this. It leaves the control in the users hands, and
the code is simple and effective.

Now, font sizing is one of the many Holy War(tm) topics, so you are
going to get a lot of stuff coming off this post - just to warn you.

Anyway, here's how it works:

In your CSS, set the base size in your body rule:

BODY{
font-size: 70%;
}

Here you will have a Holy War(tm) on what percentage to start out
with. Some say you can only use 100%. Regardless, I normally use
70-80% and it works great for me on ALL platforms, mac and pc. Proof
is in the pudding.

Now everything in your document will be X%(whatever you choose to set
it at) of the users default font setting.

Now you simply change your headers and your other items to relate to
that setting, for example:

h1{
font-size: 1.4em;
}

h2{
font-size: 1.3em;
}

h5{
font-size: 1.0em;
}

.smallText
{
font-size: 0.8em;
}

Note you use the em value everywhere else. 1.0em = X%.

You can look at my site to see how it works, try looking at it in
different browsers and changing the font size.

This way you can ditch the awful JS, which saves you headaches of all
sorts.

HTH

Tom
--- Marlene Bruce <marlene at underoneleaf.com> wrote:
> Hi folks,
>
> I have a Javascript which detects browser/platform and then serves
> the appropriate font sizes from within the Javascript. A former
> co-worker made it for me a year or so ago, and now I need to modify
> it for a new use.
>
> Since I'm not up on Javascript, what I want this to do is:
> * For Win IE 4 and up, and Mac IE 5 and up, to serve the font sizes
> as indicated (no modifiers).
> * For Win Netscape 4, to serve the font sizes with a +1 modifier.
> * For Mac IE 4 and Netscape 4, to serve the font sizes with a +3
> modifier.
> * For non-IE/Netscape browsers (Opera, iCab, etc.), to serve the
> font
> sizes as indicated (no modifiers).
>
> Below is a snippet, with only one of the style sheet definitions
> included (as an example).
>
> Can someone help me modify what I have to achieve what I want to
> do?
>
> --------------------
>
> <!-- hide script from old browsers
>
> var BrowserType='NS';
> var Platform='Win';
> var ver_str = navigator.appVersion;
> var ver_info = ver_str.split(';');
> var version=4;
> var style_sheet=0;
> var font_1=7;
> var font_2=10;
> var font_3=11;
> var font_4=12;
> var font_5=16;
> var font_6=18;
> var modifier=0;
>
> if(navigator.appName == 'Microsoft Internet Explorer')
> {BrowserType = 'IE';}
> if(navigator.platform.substr(0,3)=='Mac')
> {Platform = 'Mac';}
> if(BrowserType=='IE')
> {version = ver_info[1].substr(6,ver_info[1].length);}
> else
> {version = parseFloat(ver_str);}
> if(Platform == 'Win')
> {
>   if(BrowserType == 'NS')
>   {
>    if(version < 5)
>    {modifier=1;}
>   }
> }
> else
> {
>   if(BrowserType == 'NS')
>   {
>    if(version < 5)
>    {modifier=1;}
>   }
> }
> document.write('<style type="text/css">\n');
> document.write('p, body, td, ul, ol, li\n{\nfont-family: Verdana,
> Arial, Geneva, sans-serif;\nfont-size:
> '+(font_4+modifier)+'px;\ncolor: #000000;\n}\n');
> document.write('</style>\n');
>
> //end hiding script from old browsers -->
>
> --------------------
>
> Thanks in advance,
> Marlene
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
> http://lists.evolt.org Workers of the Web, evolt !


=====
var me = tom.pixelmech.webDeveloper();

http://www.pixelmech.com/
http://www.maccaws.com/
[Making A Commercial Case for Adopting Web Standards]

__________________________________________________
Do you Yahoo!?
HotJobs - Search new jobs daily now
http://hotjobs.yahoo.com/



More information about the thelist mailing list