Compatible for all browsers. How!?

  • Thread starter jfancy-Transport Canada
  • Start date
J

jfancy-Transport Canada

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)
}
 
R

Random

jfancy-Transport Canada said:
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)
}

....


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. :)
 
R

RobG

jfancy-Transport Canada said:
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...=resizeBodyText&rnum=1&hl=en#27daff01160f440b>

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

jfancy-Transport Canada

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;

------------------------------------------------------
jfancy-Transport Canada said:
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...=resizeBodyText&rnum=1&hl=en#27daff01160f440b>

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,048
Latest member
verona

Latest Threads

Top