Script.aculo.us effect not working in Firefox?

[Toby Inkster]

Does anyone have any idea why this effect using script.aculo.us is working
in Opera, but not Firefox?

http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip.html

(I've not had the courage to even try it in IE yet!)

Any ideas for a fix?

Thanks

 

[Martin Honnen]

Does anyone have any idea why this effect using script.aculo.us is working
in Opera, but not Firefox?

http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip.html

Error: target.innerText has no properties
Source File:
http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip_files/bubble-t.js
Line: 47

innerText is not defined in the W3C DOM, it is orginally part of the IE
4 (and later) HTML DOM and Opera in its attempt to work with as many
pages as possible supports it too. Mozilla mainly supports innerHTML
from the IE 4 DOM but has not made an attempt to support innerText. The
W3C DOM Level 3 Core has a similar property named textContent that
Firefox 1.0 and later support, additionally the W3C DOM Level 2 allows
you to concatenate the nodeValue properties of all text nodes yourself
if needed.


You get a further error
Error: elem has no properties
Source File:
http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip_files/bubble-t.js
Line: 108
with Firefox on that page.

 

[Tim Streater]

Does anyone have any idea why this effect using script.aculo.us is working
in Opera, but not Firefox?

http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip.html

(I've not had the courage to even try it in IE yet!)

Any ideas for a fix?

Thanks

FireFox Mac 2.0.0.1 gives:

When you hover onto the link:

Error: target.innerText has no properties
Source File:
http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip_files/bubbl
e-t.js
Line: 47

When you hover off:

Error: elem has no properties
Source File:
http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip_files/bubbl
e-t.js
Line: 108

In safari you get a new baloon each time you hover on.

-- tim

 

[Toby Inkster]

Does anyone have any idea why this effect using script.aculo.us is working
in Opera, but not Firefox?
http://examples.tobyinkster.co.uk/Balloons2/Balloon tooltip.html
(I've not had the courage to even try it in IE yet!)

My thanks to Martin and Tim. I've made a couple of changes, and it now
seems to be working in Opera, Firefox, and surprisingly MSIE 6!

http://examples.tobyinkster.co.uk/Balloons3/Balloon tooltip.html

In iCab I'm nearly there, but I don't think I have the patience to figure
out what's going wrong for such a small user base (the final script
won't perform anything essential, so I'm not too worried about it not
working for a small percentage of people), so I've just bailed out with:

if (navigator.vendor=='iCab')
return 1;

in the initialisation function.

I don't even seem to be close with Safari though. Does anyone know of a
Javascript debugging tool for Webkit or KHTML?

Or have I done something obviously dumb? Although I consider myself a
decent programmer, Javascript is far from my forte, so I'm probably
churning out a bunch of rubbish here.

Thanks in advance for any more advice you can give,

 

[RobG]

My thanks to Martin and Tim. I've made a couple of changes, and it now
seems to be working in Opera, Firefox, and surprisingly MSIE 6!

http://examples.tobyinkster.co.uk/Balloons3/Balloon tooltip.html

In iCab I'm nearly there, but I don't think I have the patience to figure
out what's going wrong for such a small user base (the final script
won't perform anything essential, so I'm not too worried about it not
working for a small percentage of people), so I've just bailed out with:

if (navigator.vendor=='iCab')
return 1;

in the initialisation function.

I don't even seem to be close with Safari though. Does anyone know of a
Javascript debugging tool for Webkit or KHTML?

It's always good to read the FAQ:

<URL: http://www.jibbering.com/faq/index.html#FAQ4_43 >

Safari reports:

Value undefined (result of expression target.previous) is not object.
http://examples.tobyinkster.co.uk/Balloons3/Balloon tooltip_files/bubble-t.js

Line 106

Which is the last line of:

function balloonClose (e)
{
var target = $(Event.element(e));
var elem = target.previous('div');

Or have I done something obviously dumb? Although I consider myself a
decent programmer, Javascript is far from my forte, so I'm probably
churning out a bunch of rubbish here.

Your simple page is over 200kB of data, the use of Prototype and
Scriptaculous is a serious overhead that is unlikely to be needed just
to get some cartoon balloons.

You might like to try the lighter-weight FORK library:

<URL: http://forkjavascript.org/ >

Though you'll need to build a few of you own effects, you won't be
forcing visitors to download thousands of lines of unused code.

 

[Toby Inkster]

<URL: http://www.jibbering.com/faq/index.html#FAQ4_43 >
Thanks!

Value undefined (result of expression target.previous) is not object.
http://examples.tobyinkster.co.uk/Balloons3/Balloon tooltip_files/bubble-t.js

Hmmm... that's not good. Element.previous() is a prototype.js method, so
it looks like the bug might be there. I'll have to look into it tomorrow.

Thanks again