onblur() not working with mozilla

[tijo]

Hi,

I am facing an issue with the onblur() event. The requirement is when i click a small icon in my html page a small rectangular overlay containing some text message should appear and it should disappear when I click any where else on the page.

I have implemented the situation using java script. To bring the overaly using java script, the display property of a div is made visible and to make the same overlay hidden i have used the onblur() event.

<div id="linker3" class="linker" onBlur="showBlur('linker3')" > </div>
The id linker3 is the name of the popup layer as i use 5 similar pop ups.

class linker defines the properties of the pop up.

.linker{
    background: url(Images/box.gif) no-repeat;
    width: 128px;
    height: 46px;
    margin: 30px 0 0 0;
    position: absolute;
    z-index: 80;
    display: none;
}
 

function showBlur(id){
var box=document.getElementById(id);
box.style.display='none';
}



This is working fine for IE6 but not for mozilla. Could you please help

[shane3341436]

Did you check what error appears in the firefox error console?

[tijo]

No error is shown in the error console. Is the issue due to the fact that mozilla doesn;t recognize onblur() event.

[shane3341436]

Firfox do recognize onblur function. Though, make sure that if the function is being called or not, something like inserting alert() inside the function.

[tijo]

Hi,

When i repalced the onblur event with ondblclick(), it worked fine for both IE and Mozilla, ie the overlay div was made dispaly none uisng the same script.

<div id="linker2" class="linker" ondblclick="showBlur('linker2')" > </div>

When If repalced it with onblur(), IE alone recognizes

Do you know any other way to meet this requirement

[shane3341436]

Another way may be using the javascript timer functions.After some time interval you can hide the popup.

[tijo]

No That cannot be done in this application. This pop up should be closed only when a click is made some where else on the page. Can you suggest a method.

[shane3341436]

what about onmouseout() function?

[tijo]

Sorry,

The client requires a click outside that div to close the popup

[shane3341436]

then use the onclick event of the body element. There seems a real problem with onblur event in the 'div' for the firefox.
Or there is a tricky way to force input element behave like div. The onblur method works fine in input elements.

[acoder]

That's correct. Firefox doesn't support onblur for divs. See notes on this ref. page. This is correct behaviour - see supported events for div and span.

The workaround is to use onclick on the document and check that the div is not the target.