How to make this FireFox Compatible

[carthik]

Hi all ,

I am designing a webpage which uses javascript for Table highlighting

Here is the Script :

<script type="text/javascript">
/********************************************************************************************
* Author - Karthikeyan Sabhanatarajan .
* Contact - karthiknatrajan@gmail.com
*********************************************************************************************/
function highlightEffect(e,color,txtclr)
{
 var trig=e.srcElement;
 var temp;
 if(trig.tagName=='TD'||trig.tagName=='FONT'){
	 name=trig.id;
	 if(trig.tagName=='TD')
	 {
	 trig.style.backgroundColor=color;
	 document.getElementById(trig.id+"Text").style.color=txtclr;
	 }
	 else
	 {
	 trig.style.color=txtclr;
	 temp=trig.parentNode;
	 while(temp.tagName!='TD')
	 {
	 temp=temp.parentNode;
	 }
	 
	 temp.style.backgroundColor=color;
	 }
 }
}

How do i make it firefox compatible .

This is the webpage that uses this script

http://karthiknatrajan.googlepages.com/bottomleft.htm

This works in IE and Opera

But Firefox says that

Error: trig has no properties
Source File: http://karthiknatrajan.googlepages.com/bottomleft.htm
Line: 33

How do i corect this .. should i have to explicitly include the event ..

Help me fix this

[Twey]

 var trig=(e.srcElement || e.target);

[carthik]

Should i have to do a browser check to assign this ..

Why is that firefox implementation is different ??

[carthik]

Its working fine now. .

Where can i study all these differences ??

[Twey]

Why is that firefox implementation is different ??

You should be asking yourself, why is the IE implementation different. Firefox tends to stick to standards, preferring to make the Web experience better for users than to corner a little extra market share, but Microsoft like to drive people away from competitive products; since their excuse for a browser currently has most of the market, they can get away with making it vastly incompatible with most of the rest of the Web, causing people to design IE-only sites, causing more people to use IE, causing more people to design IE-only sites...

Where can i study all these differences ??

You've got a copy of both browsers and an Internet connection, haven't you? That's really all the documentation you need. If you're not satisfied with that, also see the Mozilla web developer docs and the Microsoft Developer Network. A quick google on the browser name you want to get it working in and the code you use to make it work in the other browser works wonders, too.

[mwinter]

I am designing a webpage which uses javascript for Table highlighting

If you're starting this from scratch, why not do so with decent, modern markup? The use of presentational elements and attributes is deprecated, and not the way to go, nowadays.

Take a look at an example of a more robust, and up-to-date approach. The script and style sheet are embedded for simplicity, but should be exported to external files.

Notice how simple the markup is? The rounded corners add a little bloat, but it's much simpler than the notation you planned to employ.


For those interested in content negotation:

The corners are a little rough in that example. In my test version, I employed content negotiation to serve grayscale PNGs with alpha transparency to produce a much smoother curve, but unfortunately my ISP doesn't provide the same support. The variant files used to perform the negotiation are on the server and have the same names as the GIF images, but with a '.var' extension. The PNG images obviously have a '.png' extension.

The style sheet would reference these variant files, rather than the GIF or PNG images, directly. The negotiation mechanism isn't perfect; because of the broken Accept HTTP header sent by MSIE, the PNG corners had to be marked down in quality. This means that browsers like Opera, which give genuinely equal value to GIF and PNG, receive the GIF versions. The only way around this is to use server-side scripting to clean up Microsoft's mess and consider the general media range (*/*) to be of very low quality, at which point the qs (source quality) values can be reversed making the PNG versions preferred.

Oh, how I hate IE.

Mike

[Twey]

Mike: Your server serves that page as ISO-8859-1 rather than UTF-8, rather damaging the és in RÉSUMÉ. HTML entities anyone?

[mwinter]

Your server serves that page as ISO-8859-1 rather than UTF-8, rather damaging the és in RÉSUMÉ.

Unfortunately, it doesn't serve that document with any charset parameter. My ISP uses Zend, which is a steaming pile of you-know-what.

My Firefox detected the document to be encoded in UTF-8, so I didn't see any problems, and I admit to forgetting that server's crappiness. Perhaps my auto-detection settings are different than yours?

HTML entities anyone?

True, but pressing and releasing Ctrl+Shift, then typing 00e9, then Ctrl+Shift again is just a little quicker.

I could add a meta element, but it's only a demonstration, and it accomplishes that well enough.

Mike

[Twey]

Heh... hats off to SCIM
Although... hm, yes, faster by two keypresses. I tend to use Xcompose rather than SCIM for the basic accented characters, because I have more settings to cycle through.
Besides, Alt Gr + (;, shift+e) is even faster

[mwinter]

Besides, Alt Gr + (;, shift+e) is even faster

Alt Gr+E or Ctrl+Alt+E works well here, too. However, as I tend to look up the entity references anyway (at least the ones I don't tend to use too often), I may as well use the Unicode codepoint.

Mike