IE7 problem: Object doesn't support this property or method

[Anatol]

Hi,

I added a few simple Mootools effects to a web page. All works well in
Firefox, but (as expected) IE (tested in IE7) causes trouble for some
but not all of the script.

Here is a test page: http://dipl-o-matic.nugob.org/test-page

The relevant code is:
----------------------------------

//<![CDATA[
window.addEvent('domready', function() {
var scroll = new Scroller('timeline', { area:
Math.round((window.getWidth() - 760) / 2), velocity: 0.1 });
scroll.start();

$('searchform').fade('out');

Element.implement({
ShowHide: function() {
this.setStyle('display','block');
this.fade('toggle');
}
});

var SlideInOut = new Fx.Slide('commentform', {
duration: 1000,
transition: Fx.Transitions.Pow.easeOut
});

SlideInOut.hide();

Element.implement({
Slide: function() {
SlideInOut.toggle();
}
});

});
//]]>

----------------------------------

When I click on "post your comment" on the page a comment form should
slide open/close. It works in Firefox but in IE7 I get the script
error:

----------------------------------
Line: 1
Character: 1
Code: 0
Error Message: Object doesn't support this property or method
URL: http://dipl-o-matic.nugob.org/test-page
----------------------------------

The same happens when I click on 'search' at the bottom of the page
which should fade in/out a search field. This also works in Firefox.

I'm not sure why this happens. I checked many forum posts and tried a
lot but to no avail. The HTML and CSS code seem to be standards
conform.

Another Mootools effect (the timeline at the bottom is a scroller)
works fine and also the initial hiding of the comment form seems to
work well.

Any hints are much appreciated. To me the error message doesn't say
very much.

Cheers!
Anatol

[Fábio M. Costa]

you should always extend the nodes on ie.

With extend i mean using the dollar function on them.

So, you should extend the window element before using the addEvent function, like this:

var win = $(window);

win.addEvent( ... );

and there you go with other Elements too.

Hope it helped.

--
Fábio Miranda Costa
Solucione Sistemas
Engenheiro de interfaces

[rasmusfl0e]

..or just use Window.getWidth() (notice uppercase W).

[Anatol]

Hi,

this is a late reply. I just didn't have the time to look into this
earlier. Thank you for all your suggestions. Unfortunately it did not
work in that way. I suspect that the Element.implement() etc... caused
some problems on IE7. I eventually just tried a different way to
implement the functions using this code instead:

-------------------------

window.addEvent('domready', function() {
var scroll = new Scroller('timeline', {
area: Math.round((window.getWidth() - 760) / 2),
velocity: 0.1
});
scroll.start();

$('searchform').fade('out');

$('search_trigger').addEvent('click', function(e){
e = new Event(e);
$('searchform').setStyle('display','block');
$('searchform').fade('toggle');
e.stop();
});

var SlideInOut = new Fx.Slide($('commentform'), {

duration: 1000,
transition: Fx.Transitions.Pow.easeOut
});

SlideInOut.hide();

$('slide_trigger').addEvent('click', function(e){
e = new Event(e);
SlideInOut.toggle();
e.stop();
});
});
-------------------------

So instead of Element.implement I added the function using

$('slide_trigger').addEvent('click', function(e){ //etc...

which adds an onclick event to <a href="javascript:;"
id="slide_trigger">trigger</a>

Works perfectly. I hope this will help someone.

Cheers!
Anatol