OnClick event on DIV in Mozilla does not work?

Onclick event on a div-layer works in IE6, but does not work in FireFox 0.8

[Mobull]

I have a piece of code which does not seem to work in Firefox but does in IE. I rather want it to work on both since it holds a piece of navigation. I have 5 tabs which show and hide when you press the layer.
One tab example I posted below:

<!-- tab Product start -->
<div id="tabProdIntro" class="tab1A" onMouseOver="style.cursor='hand';" onclick="showTabs('tabProdIntroActive', 'divIntro'), scrollbarPosition('divIntro');">Introductie</div>
<div id="tabProdIntroActive" class="tab1B" onMouseOver="style.cursor='hand';" onclick="showTabs('tabProdIntroActive', 'divIntro');" style="visibility:visible;">Introductie</div>
<!-- tab Product end -->

if you click tabProdIntro it runs showTabs which hides tabProdIntro and shows tabProdIntroActive (this tab has a different color and simulates the effects of a tabbed page). The style of tabProdIntroActive is set to active since this is the first tab and should be active. In the style of the tabs (classes tab1A & tab1B) I included two different images: the active tab-image and the inactive tab-image. It all works perfect in IE.

However...in Firefox the onclick event on this DIV does not seem to work. Is there a way to get it working?

[BlobFisk]

Hi Mobull,

Is a scripting error of any kind being thrown?

Both onClick showTab functions seem to be doing the same thing...

[Rambo Tribble]

Try this.style.~etc.

[Mobull]

unfortunately I get no Javascript error. It seems it just not works on a DIV.
the style settings are used in the Javascript function. In the javascript all Tabs are first switched off, then the Tab which is clicked is turned on. This happens with the style attribute.
It is more Div and javascript related than Style related I guess...

[Rambo Tribble]

Most likely, it is DOM related, as there are subtle differences in what IE and Moz variants will accept. Moz is generally stricter. For instance, IE will often let you get away with leaving out the document part of a dot notation object reference while Moz will not. It might be useful to post your functions, as it may well be the code within them that is the problem.

You might try breaking out Venkman, the Moz JavaScript debugger. I'm not sure it's included in the FF download, but I'm sure it's available. It's included by default in Moz, itself. NS, too.

[Mobull]

To get it working I had this script to show and hide the tabs and the Divs.

[b]function showTabs[/b](showtab, showdiv){
 if (document.getElementById!= null)
document.getElementById(tabProdIntroActive).style.visibility='hidden';
document.getElementById(tabProdTestenActive).style.visibility='hidden';
document.getElementById(tabProdOntwerpActive).style.visibility='hidden';
document.getElementById(tabProdMaatPrijsActive).style.visibility='hidden';
document.getElementById(tabProdTestimonialsActive).style.visibility='hidden';
document.getElementById(divIntro).style.visibility='hidden';
document.getElementById(divOntwerp).style.visibility='hidden';
document.getElementById(divTesten).style.visibility='hidden';
document.getElementById(divMaatPrijs).style.visibility='hidden';
document.getElementById(divTestimonials).style.visibility='hidden';
document.getElementById[showtab].style.visibility='visible';
document.getElementById[showdiv].style.visibility='visible';
else if (document.all)
document.all.tabProdIntroActive.style.visibility='hidden';
document.all.tabProdTestenActive.style.visibility='hidden';
document.all.tabProdOntwerpActive.style.visibility='hidden';
document.all.tabProdMaatPrijsActive.style.visibility='hidden';
document.all.tabProdTestimonialsActive.style.visibility='hidden';
document.all.divIntro.style.visibility='hidden';
document.all.divOntwerp.style.visibility='hidden';
document.all.divTesten.style.visibility='hidden';
document.all.divMaatPrijs.style.visibility='hidden';
document.all.divTestimonials.style.visibility='hidden';
document.all[showtab].style.visibility='visible';
document.all[showdiv].style.visibility='visible';
}

[Rambo Tribble]

Why the square brackets on the getElementById() for the element made visible? Additionally, where an element ID is entered directly in getElement~, there should be quotes around the ID name (string literals are always enclosed in quotes).

[StupidScript]

Re: Your CSS

Do the classes specified as your DIV paramteres include position attributes?

i.e.
.tab1A { position:relative }
.tab1B { position:absolute }

It used to be that Mozilla-based products needed a position attribute in order to recognize the DIV or LAYER element for script manipulation. In addition, Mozilla-based products did not used to recognize the "id" attribute, prefering the "name" attribute instead, although I imagine they should recognize it in the newer products.

Try adding a name="tab1A" to your DIV tags and including a "position:relative" attribute in your stylesheet.

[Mobull]

To Rambo:
I'm gonna see if that will work. Is there a reason why "onMouseOver="style.cursor='hand'" does not work either?

To StupidScript:
All elements are absolute positioned

[Rambo Tribble]

Yes, Mobull, you have to define what object the style refers to and then assign a value to it. I believe "hand" is IE only, you need "pointer". Try this:

onmouseover="this.style.cursor='pointer'"

[Bernard Marx]

Yes. With a stylesheet, it's good enough simply to declare the selector twice, once with 'hand', once with 'pointer'. I'm not sure what would happen if you tried this with script. Anyways, here's some code for the top of your script:

[blue]var CSS_POINTER = "pointer"
if(document.all)
{
CSS_POINTER = "hand"
if(!document.getElementById)
  document.getElementById = function(id){return this.all[id]} 
}[/blue]

This means you can write:

onmouseover="this.style.cursor=CSS_POINTER"

You can also do away with the

if(document.all)

block in the showTabs function.

A couple of lines have

getElementById

used with square brackets. Best change them to round ones.

[Mobull]

Those square brackets are needed in IE to fill it with the variables:

function showTabs(showtab, showdiv){

If I change it in normal brackets then it will search for an ID called showtab & showdiv. But that is wrong. Or am I just thinking too much in the IE way :D

About the mousepointer: thanks gonna try that stylesheet with the pointer out. Looks good!

[Rambo Tribble]

When using the standards-compatible document.getElementById(), the brackets should always be parentheses. It is the use of quotes within the parentheses that triggers either variable substitution (no quotes) or interpretation as a string literal (with quotes). The square brackets are strictly for the IE-only DOM of document.all.

[sk2400]

I hate Microsoft for letting everyone code badly and get away with it. The trick I have found is to use:

<div id="tabProdIntro" class="tab1A" onMouseOver="style.cursor='hand';" onclick="showTabs(getElementById('tabProdIntroActive'), ... )

Works on both and results in the same coding for the function.

Oh and I have seen one or two web sites go through and define the variables at the end of pages to overcome this i.e.

VAR tabProdIntroActive = getElementById('tabProdIntroActive') ;

so the call showTabs(tabProdIntroActive..) works in both.

This drives me potty.

[Bernard Marx]

I hate Microsoft for letting everyone code badly and get away with it

In this case, this is no fault of MS. document.all is a leftover from IE4 (a time when the equivalent Netscape was nuts, DOM-wise). It is left there for backward-compatibility with legacy scripts. This does have the unfortunate by-product of "letting people get away with it", as you say.

My post #11 shows that it is easy to equip any lingering IE4 document objects your page might come across with a

[blue]getElementById[/blue]

method. Use this once, and you can forget about

[blue]document.all[/blue]

for the rest of the script.

Oh and I have seen one or two web sites go through and define the variables at the end of pages to overcome this i.e.

VAR tabProdIntroActive = getElementById('tabProdIntroActive') ;

so the call showTabs(tabProdIntroActive..) works in both.

This drives me potty.

That was DHTML's prime design specification.

Assigning your elements to vars, even better arrays, is - I say - a good one. It makes coding easier, and is more efficient (doesn't make repeated use of the cpu-costly,

getElementById

). A couple of issues, that may crop up:

1. As IE uses id's as global varNames for elements, you will run into difficulties if you use the same global varName (exact capitalisation) for an element, without using the

[blue]var[/blue]

keyword. The upshot of this is that, when using a function to do your initialising, you cannot use the same varName for a global as the element's id unless you have previously declared it as a global at the top of the script (as all good boys & girls do anyway).

2. Some quirky browsers may have a problem with attempts to reference elements before the document has fully loaded. I'm not sure. It's common to have statements like these in a function called onload. But then you lose the chance for the browser to do some work while any images are loading.

Oh yes. To make a function accept either an id string or an object reference - as you are talking about - you could do this:

[blue]function hello(ref)
{
 ref = document.getElementById(ref)¦¦ref
 ....
 
(browsers 4+)[/blue]

It's possibly more efficient to check for argument type, but it doesn't look as tidy.

And (this is it, honest)

onMouseOver="style.cursor='hand';"

Looks like you're still under the unfluence of MS Bad Code College :)