2

I’ve seen this issue before but have found no concrete answers so far. I have an onmouseout event which works in practically everything but Firefox. It’s not even showing up in Firebug, which makes no sense at all.

Here are the offending lines of code:

<div id="MarketBox3" class="MarketBox" style="top: 205px;">
<div id="TimeBox3Cont" class="TimeBox"><h3 ifirefoxd="TimeBox3" style="color: white; text-     shadow: 0px 0px 5px #000; letter-spacing: 1px; font-size: 12px;"></h3></div>
<div id="TimeBar3" class="TimeBar" style="left: 300px; width: 300px;" onmouseover="CheckOpen(3)" onmouseout="document.getElementById('intext3').innerText = 'bla bla'">
<div id="MarketName3" class="MarketName">
<div id="inbox3" style="position: absolute; top: -2px; height: 30px; width: 300px;">
<h3 id="intext3" style="color: white; text-shadow: 0px 0px 2px #000; letter-spacing: 1px; font-size: 16px;">Frankfurt - Germany</h3>
</div>
</div>
</div>
</div>

Can anyone have a crack at what’s going on? It literally works fine in everything except Firefox.

TRiG
  • 10,148
  • 7
  • 57
  • 107
Aaron Cole
  • 333
  • 2
  • 11

1 Answers1

5

This works just fine:

<div id="MarketBox3" class="MarketBox" style="top: 205px;">
<div id="TimeBox3Cont" class="TimeBox"><h3 id="TimeBox3" style="color: white; text-     shadow: 0px 0px 5px #000; letter-spacing: 1px; font-size: 12px;"></h3></div>
<div id="TimeBar3" class="TimeBar" style="left: 300px; width: 300px;" onmouseover="document.getElementById('intext3').innerText = '111'" onmouseout="document.getElementById('intext3').innerText = 'bla bla'">
<div id="MarketName3" class="MarketName">
<div id="inbox3" style="position: absolute; top: -2px; height: 30px; width: 300px;">
<h3 id="intext3" style="color: white; text-shadow: 0px 0px 2px #000; letter-spacing: 1px; font-size: 16px;">Frankfurt - Germany</h3>
</div>
</div>
</div>
</div>

Demo on JS Fiddle.

There might be a problem with your CheckOpen() function,

Try 

onmouseover="alert(1)"

onmouseout="alert(2)"

instead of 

onmouseover="CheckOpen(3)"

Another Suggestion

It seems that Firefox treats innerText differently than other browsers.

Using a javascript library will erase this problem because it will automatically take care of differences in browser behavior.

I tried using jQuery and it works fine.

<div id="MarketBox3" class="MarketBox" style="top: 205px;">
<div id="TimeBox3Cont" class="TimeBox"><h3 id="TimeBox3" style="color: white; text-     shadow: 0px 0px 5px #000; letter-spacing: 1px; font-size: 12px;"></h3></div>
<div id="TimeBar3" class="TimeBar" style="left: 300px; width: 300px;" onmouseover="javasript:function f(){ $('#intext3').text('bla bla');} f(); " onmouseout="javasript:function g(){ $('#intext3').text('1111');} g(); ">
<div id="MarketName3" class="MarketName">
<div id="inbox3" style="position: absolute; top: -2px; height: 30px; width: 300px;">
<h3 id="intext3" style="color: white; text-shadow: 0px 0px 2px #000; letter-spacing: 1px; font-size: 16px;">Frankfurt - Germany</h3>
</div>
</div>
</div>
</div>

Demo on JS Fiddle.

Community
  • 1
  • 1
Mihai
  • 2,740
  • 31
  • 45
  • Ive already tried this and just about everything else I can think of, nothing works, Ive also changed my version of firefox just to make sure it wasn't a bug with that particular version. But thanks for the suggestion =) – Aaron Cole Nov 14 '12 at 07:48
  • Interestingly, the jsfiddle doesn't work... Hmmm Im going to try another computer – Aaron Cole Nov 14 '12 at 07:50
  • I've defined a function in the onmousout event, and it works fine. The problem seems to be with document.getElementById('intext3').innerText = 'bla bla' – Mihai Nov 14 '12 at 07:52
  • Thanks for the help, your quite correct and it shouldn't have been in there at all, I did a find and replace on all 'innerText' entries to 'textContent' but somehow those got missed haha. – Aaron Cole Nov 14 '12 at 08:23