473,320 Members | 1,746 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,320 software developers and data experts.

Changing built in methods for browser compatibility

Instead of doing repetitive checks throughout my code, or defining new
methods that won't work unless they are included, I have taken the
approach of redefining existing methods in order to make them as cross
browser compatible as possible.

For example:

if(!document.getElementById)
{
if(document.all)
document.getElementById = function(id) { return document.all[id]; }
else if(document.layers)
document.getElementById = function(id) { return
document.layers[id]; }
else
browserUnsupported()
}

I have a few other similar methods in a crossbrowser.js file, which I
include in every html file I create.

However, I am stumped on how to make a similar redefined method for
"addEventListener" and other methods to be added to each html element.

I was hoping to be able to add it through a prototype to the root
HTMLElement type. Unfortunately, that doesn't seem to propagate the
changes to all the subtypes such as "span" (HTMLSpanElement). I can
however add it directly to the HTMLSpanElement and it works.

I guess that I can make an array of all the element prototypes, and
then cycle through that adding whatever methods I want to each element.
However, if there is a better, less kludgy way to do this, I'd like to
know about it.

Also, I'm curious of other's opinions of this approach and its
disadvantages compared to traditional cross browser compatibility
approaches.

Finally, if someone else has done something similar, it could be very
helpful if they uploaded to linked to their code, so that I don't
repeat something that has already been done.

Jul 23 '05 #1
5 3070
ASM
Trenqo 0 wrote:
Instead of doing repetitive checks throughout my code, or defining new
methods that won't work unless they are included, I have taken the
approach of redefining existing methods in order to make them as cross
browser compatible as possible.

For example:
n=document.all?'ie':document.getElementById?'dom': document.layers?'nn':'';

function getElemByDiv(divId) {
var d = n=='ie'&&n!=dom? document.all(divname) :
n=='dom'? document.getElementById(divname) :
n=='nn'? document.layers[divname] :
'';
return d
}

function changeStyleDiv(divId,styl,attr,u) {
var d = getElemByDiv(divname);
d = n='nn'? d : d.style;
u = n='nn'? '' : u;
d.styl = attr+u;
}

then you need to know if you're addressing to tree of :
- images
- links
- forms

I do not think you can reach a span with NN4 ( ? )
I have a few other similar methods in a crossbrowser.js file, which I
include in every html file I create.
if the are few -> OK
(not join a lot)
Finally, if someone else has done something similar, it could be very
helpful if they uploaded to linked to their code, so that I don't
repeat something that has already been done.


It'll not me
I prefer specific funtions
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #2
ASM wrote:
Trenqo 0 wrote:
Instead of doing repetitive checks throughout my code, or defining new
methods that won't work unless they are included, I have taken the
approach of redefining existing methods in order to make them as cross
browser compatible as possible.

For example:

n=document.all?'ie':document.getElementById?'dom': document.layers?'nn':'';


Your identifiers are misleading in that IE is not the only browser that
supports document.all nor is 'nn' the only browser that supports
document.layers, supAll and supLayer might be better identifiers.
function getElemByDiv(divId) {
var d = n=='ie'&&n!=dom? document.all(divname) :
n=='dom'? document.getElementById(divname) :
n=='nn'? document.layers[divname] :
'';
return d
}
That function, as written, will not work in NN4.xx series browsers on a
layer tag that is nested within another layer.
function changeStyleDiv(divId,styl,attr,u) {
var d = getElemByDiv(divname);
d = n='nn'? d : d.style;
u = n='nn'? '' : u;
d.styl = attr+u;
}

then you need to know if you're addressing to tree of :
- images
document.images['imageName']. no need for any other code as just about
every JS browser supports the images collection.
- links
- forms

I do not think you can reach a span with NN4 ( ? )


If it is absolutely positioned. But, who supports NN4 anymore?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #3
ASM
Randy Webb wrote:
ASM wrote:

n=document.all?'ie':document.getElementById?'dom': document.layers?'nn':'';
Your identifiers are misleading in that IE is not the only browser that
supports document.all


Did somebody says that 'ie' means "There is IE" ? ?
it means what it means : "supports document.all"
function getElemByDiv(divId) {
var d = n=='ie'&&n!=dom? document.all(divname) :
n=='dom'? document.getElementById(divname) :
n=='nn'? document.layers[divname] :
'';
return d
}

That function, as written, will not work in NN4.xx series browsers on a
layer tag that is nested within another layer.


right :-(
then you need to know if you're addressing to tree of :
- images


document.images['imageName']. no need for any other code as just about
every JS browser supports the images collection.


I would have to say
firstable you need to adress to correct tree if exits
then, if not, you try to call by ID
But, who supports NN4 anymore?


Nigerian people ? south south-america ?
Me ?
:-)
--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #4
fox


Trenqo 0 wrote:
Instead of doing repetitive checks throughout my code, or defining new
methods that won't work unless they are included, I have taken the
approach of redefining existing methods in order to make them as cross
browser compatible as possible.

For example:

if(!document.getElementById)
{
if(document.all)
document.getElementById = function(id) { return document.all[id]; }
else if(document.layers)
document.getElementById = function(id) { return
document.layers[id]; }
else
browserUnsupported()
}

I have a few other similar methods in a crossbrowser.js file, which I
include in every html file I create.

However, I am stumped on how to make a similar redefined method for
"addEventListener" and other methods to be added to each html element.
Here's a demo:

http://fxmahoney.com/demo/layer_addlistener.htm

view source...
and visit with NN4...

there's a version of document.getElementById that recurses all layers
(just in case you have embedded layers)

as for other "methods" in NN4, use *watch* (there is an example of using
style.left and setting clientLeft at the same time). When you click on
the rectangle, it will move +5 to the right by setting
layerref.style.left as you would newer browsers. You should be able to
take it from there... just pay attention to how attributes work in
modern browsers.

I was hoping to be able to add it through a prototype to the root
HTMLElement type. Unfortunately, that doesn't seem to propagate the
changes to all the subtypes such as "span" (HTMLSpanElement). I can
however add it directly to the HTMLSpanElement and it works.

I guess that I can make an array of all the element prototypes, and
then cycle through that adding whatever methods I want to each element.
However, if there is a better, less kludgy way to do this, I'd like to
know about it.

Also, I'm curious of other's opinions of this approach and its
disadvantages compared to traditional cross browser compatibility
approaches.
Bob Clary at Netscape, back in '02, thought this was the "way to go" too.


Finally, if someone else has done something similar, it could be very
helpful if they uploaded to linked to their code, so that I don't
repeat something that has already been done.

Jul 23 '05 #5
On 14/07/2005 01:52, Trenqo 0 wrote:
Instead of [...] defining new methods that won't work unless they are
included, I have taken the approach of redefining existing methods in
order to make them as cross browser compatible as possible.
Exactly how do these two things differ? If you don't include either set
of code - the wrappers or new methods - then you're likely to end up
with failure. A well-designed collection of re-usable code can be small
and fast, so there's no reason why you can't include it wherever necessary.
For example:

if(!document.getElementById)
{
if(document.all)
[...]
else
browserUnsupported()
}
Exactly what do you intend for this browserUnsupported function? It
certainly doesn't seem to be a flexible way of affording graceful
degradation, which is certainly something you should provide if you're
designing for cross-browser compatibility.

To me, the final else clause should always return null so that a call is
still meaningful, even if it doesn't provide you with the object
reference you were looking for. When that failure condition occurs, the
calling code can then choose how to handle it. You could also attach a
flag to this final function to indicate that it never succeed, which
might be useful when you need to distinguish between failure due to lack
of support, and failure due to a missing element.

[snip]
However, I am stumped on how to make a similar redefined method for
"addEventListener" and other methods to be added to each html
element.
You cannot, at least not if you're goal is compatibility.
I was hoping to be able to add it through a prototype to the root
HTMLElement type.
As far as I know, only Mozilla and Opera 8 allow modification of host
objects through a prototype object, and these browsers will already
support much (perhaps all) of what you will try to emulate anyway.
Unfortunately, that doesn't seem to propagate the changes to all the
subtypes such as "span" (HTMLSpanElement).
It does in at least the two browsers I mention, but IE, for example,
doesn't provide either a HTMLElement interface, or a prototype property,
on its host objects.

[snip]
Also, I'm curious of other's opinions of this approach and its
disadvantages compared to traditional cross browser compatibility
approaches.


Well I'd say it's doomed to failure as the browsers which do not support
DOM methods are typically the ones that don't allow extensions to their
host objects. You're limited to defining new objects and methods in
those cases.

As has been mentioned in other recent threads, you need to be careful
that you don't end up producing massive libraries and sending them
as-is. I do have some code which is similar to what you have in mind,
but whenever it's used, it's trimmed down to only what's needed, then
run through a code minimiser to strip out the comments and whitespace
that existed in the original.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Jul 23 '05 #6

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

Similar topics

4
by: Jez Naisbitt | last post by:
Hi Guys, After a break of 2 years I'm now re-visiting the world of java. I recall on my last foray that I had to stick to java 1.1 so I could deploy applets from a server and obtain maximum...
3
by: Rob Oldfield | last post by:
Just a quick and hopefully straightforward question.... are there any issues with web sites based on .Net not working correctly (or at all) for clients using non IE browsers (Mozilla and Firefox...
16
by: chris | last post by:
im new to javascript but slowly getting better what i want to do is have some text on the screen and when an event happens for example click a button the text would change to what i want. how...
2
by: DartmanX | last post by:
I doubt this is possible, but I want to ask, just in case it is. I have a project going using Google Maps. This project spits out an HTML page template for people to post to their website and...
2
by: Mark | last post by:
I have it in my head that I saw a marketing document from Microsoft with the total number of classes and methods in the .NET Framework. Something like 70,000 methods? I don't need precise numbers,...
3
by: ms | last post by:
Hi Everyone, You all would be aware of the fact that we boast about .net supporting multiple web browsers. I hope we have all experienced that our screen layouts look different in every other...
4
by: Maxwell2006 | last post by:
Hi, I am struggling with making my website compatible with multiple browsers and versions. Is there any tool that shows me how my pages look like in different browsers
27
by: David Golightly | last post by:
This is just a quick poll for all you web devs out there: What browsers do you test on/are concerned about compatibility with? Obviously, you're going to test on current-generation browsers such...
29
by: Quarco | last post by:
This one is driving me nuts.... var tbl = document.createElement("table"); var tbody = document.createElement("tbody"); for(var i=0; i<10; i++) { var row =...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.