Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Compatible for all browsers. How!? (http://www.velocityreviews.com/forums/t918284-compatible-for-all-browsers-how.html)

jfancy-Transport Canada 05-25-2005 06:44 PM

Compatible for all browsers. How!?
 
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[i].currentStyle.fontSize;
an = parseFloat(s); // Get the number part
au = s.replace(an,''); // Get the units
a[i].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


Random 05-25-2005 07:32 PM

Re: Compatible for all browsers. How!?
 
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[i].currentStyle.fontSize;
> an = parseFloat(s); // Get the number part
> au = s.replace(an,''); // Get the units
> a[i].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. :)


RobG 05-25-2005 10:51 PM

Re: Compatible for all browsers. How!?
 
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#27d aff01160f440b>

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



--
Rob

jfancy-Transport Canada 05-26-2005 12:40 PM

Re: Compatible for all browsers. How!?
 
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.[i].getComputedStyle.fontSize;
an = parseFloat(s);
au = s.replace(an,'';
a[i].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.[i].currentStyle.fontSize;
an = parseFloat(s);
au = s.replace(an,'';
a[i].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#27d aff01160f440b>
>
> Note that it is still a bad idea to programatically change the font
> size.
>
>
>
> --
> Rob




All times are GMT. The time now is 10:07 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.