473,395 Members | 1,412 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

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

Jul 23 '05 #1
3 1703
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. :)

Jul 23 '05 #2
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
Jul 23 '05 #3
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


Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Jeff | last post by:
Hi All: I'm writing a page that I'm going to need some assistance with, using the IFrames... I know how to use them, but what I'd like to do is write a page (using ASP here BTW) that has 2-5...
8
by: Nicolás Lichtmaier | last post by:
Hi, some time ago I've written an article about this issue. It explain some differences in Explorer's and Mozilla's JavaScript/DOM. It has recently changed its URL, This is the new one: ...
9
by: bert76 | last post by:
can anyone suggest a couple of websites providing *compatible* javascript? of course there is http://javascript.internet.com/ http://javascriptkit.com/ and the likes, but time and again you have...
11
by: Kristoffer Arfvidson | last post by:
HI! I have a question.... when designing asp.net pages in vs.net I always see that labels are transformed to <span tags... I stopped using span and div before because of its lack of compatibility...
1
by: Pai | last post by:
Hello there, I need to make my .aspx pages compatible with both these browsers... Could anybody guide me to some tutorials or some tips I just have a <table> tag and a few <td> and <tr> in...
3
by: Ed | last post by:
When writing my ASP.NET C# programs, how can I ensure my UI and windows forms are cross-platform compatible? My users are on Windows IE 6, Mac OSX Safari and Mac OSX IE 5. What are some of the...
0
by: Sacha Vieux-Roy | last post by:
I implemented several web reports using crystalreports in visual studio.Net. They work fine on windows browsers. On mac browsers such as Safari the layout of the report is all messed up. What can I...
4
by: Java Guy | last post by:
I can find a lot of stuff on the internet about javascript, except how to I determine which version my IE6 is compatible with, or where to download javascript plugin/engine/what-ever for Windows...
3
by: trint | last post by:
My web site works just fine with Internet Explorer 6 and 7. But GridViews, FormViews and other parts of my site are either overlapping or not where they are supposed to be or missing alltogether...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.