Problems with addEvent in IE7

[sebzzz]

Hi,

I'm doing an image slide show on a web site: http://www.solutions-linux.org/congrescma/comite.php

I use a tool called smooth gallery (http://
smoothgallery.jondesign.net/
showcase/manual-slideshow/) that uses Mootools itself.

However, I don't want the arrows inside the image box, I want the user
to be able to click on arrows that are pictures outside the box.

The code that handles the click on the original version is as follow:

if
((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new
Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);
var rightArrow = new
Element('a').addClass('right').addEvent(
'click',
this.nextItem.bind(this)
).injectInside(element);

this.galleryElement.addClass(this.options.withArrowsClass);
}

I changed the code to this:

if
((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow =
document.getElementById("flgauche").addEvent(
'click',
this.prevItem.bind(this));
var rightArrow =
document.getElementById("fldroit").addEvent(
'click',
this.nextItem.bind(this));

this.galleryElement.addClass(this.options.withArrowsClass);
}

Basically, I removed a call to the injectInside method that puts the
arrows inside the box and I used the same addEvent method but with my
already existing objects (flgauche and fldroit). It works fine in
Firefox, but doesn't work in IE6 nor 7. It tells me that the object
doesn't support the method.

My thinking is that the value of document.getElementById("flgauche")
doesn't support the addEvent method, but I'm puzzled as to how to do
it so it works fine.

Thanks in advance

 

[Henry]

On Jan 16, 4:54 pm, (e-mail address removed) wrote:

I use a tool called smooth gallery (http://
smoothgallery.jondesign.net/
showcase/manual-slideshow/) that uses Mootools itself.

However, I don't want the arrows inside the image box, I
want the user to be able to click on arrows that are
pictures outside the box.

The code that handles the click on the original version is
as follow:

if
((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new
Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);

<snip>

There is little point in posting this code as without the definitions
for the various methods and constructors employed the only people who
may know what it does are the people who wrote it.

I changed the code to this:

if
((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow =
document.getElementById("flgauche").addEvent(
'click',
this.prevItem.bind(this));
var rightArrow =
document.getElementById("fldroit").addEvent(
'click',
this.nextItem.bind(this));

this.galleryElement.addClass(this.options.withArrowsClass);
}

Basically, I removed a call to the injectInside method that
puts the arrows inside the box and I used the same addEvent
method but with my already existing objects (flgauche and
fldroit). It works fine in Firefox, but doesn't work in IE6
nor 7. It tells me that the object doesn't support the method.

My thinking is that the value of
document.getElementById("flgauche") doesn't support the
addEvent method, but I'm puzzled as to how to do it so
it works fine.

It is a common (and questionable) practice for the element retrieval
method in many current general purpose libraries to include a heavy
augmentation of those elements with additional methods and properties.
Firefox and similar browsers allow additional method of Elements to be
assigned through the exposed prototype of the Element, other browsers
(including IE browsers) do not expose the prototype of the Element and
so the retrieval methods must actively augment the elements by
assigning the additional methods directly to each and every element
retrieved.

Thus, if you side-step the library's element retrieval method in your
code you will only get the augmented versions in browsers which expose
the prototype for Elements, and on other browsers you will just get
the normal element with its normal methods and properties (unless the
library has already directly acted on that particular element at some
other point in the code).

 

[David Mark]

Hi,

I'm doing an image slide show on a web site:http://www.solutions-linux.org/congrescma/comite.php

I use a tool called smooth gallery (http://
smoothgallery.jondesign.net/
showcase/manual-slideshow/) that uses Mootools itself.

Mootools itself. Ugh.

However, I don't want the arrows inside the image box, I want the user
to be able to click on arrows that are pictures outside the box.

The code that handles the click on the original version is as follow:

                if
((this.galleryData.length>1)&&(this.options.showArrows))
                {
                        var leftArrow = new
Element('a').addClass('left').addEvent(
                                'click',
                                this.prevItem.bind(this)
                        ).injectInside(element);
                        var rightArrow = new
Element('a').addClass('right').addEvent(
                                'click',
                                this.nextItem.bind(this)
                        ).injectInside(element);

this.galleryElement.addClass(this.options.withArrowsClass);
                }

I changed the code to this:

                if
((this.galleryData.length>1)&&(this.options.showArrows))
                {
                        var leftArrow =
document.getElementById("flgauche").addEvent(
                                'click',
                                this.prevItem.bind(this));
                        var rightArrow =
document.getElementById("fldroit").addEvent(
                                'click',
                                this.nextItem.bind(this));

this.galleryElement.addClass(this.options.withArrowsClass);
                }

Basically, I removed a call to the injectInside method that puts the
arrows inside the box and I used the same addEvent method but with my
already existing objects (flgauche and fldroit). It works fine in
Firefox, but doesn't work in IE6 nor 7. It tells me that the object
doesn't support the method.

IIRC, MooTools (like its inspiration Prototype) augments the
HTMLElement object, but this ill-advised approach doesn't work in IE.
To get around this, both libraries have functions that "extend"
elements by adding expando properties (also ill-advised.) So your
problem lies in lines like this:

document.getElementById("fldroit").addEvent( ...

The gEBI method returns an HTMLElement, which is augmented in some
browsers, but not others (e.g. IE.) The hack to make it "work" (using
the term loosely) is to do something like this:

$("fldroit").addEvent( ...

I don't know if that is the exact syntax for MooTools.

And you should realize that such code, which is encouraged by these
silly libraries and their clueless developers is a terrible idea.
Consider that this "chain" will break if the "fldroit" element doesn't
exist (throwing a script error and leaving the page in an unexpected
and possibly unusable state.)

Oh well. At least you aren't using jQuery. That one sneakily creates
a new object every time you call the $ function.

The problem with using these "time-saving" widgets that are built on
ill-conceived libraries is that to alter them you have to learn a new
API and often wade through its underlying code. Add the fact that
most of these miserable things are patched together with browser
sniffing logic and realize that any time saved typing will be spent on
perpetual maintenance and lost customers.

My thinking is that the value of document.getElementById("flgauche")
doesn't support the addEvent method, but I'm puzzled as to how to do
it so it works fine.

Use a slide show script that doesn't rely on an incompetently written
library. Or learn JavaScript and write your own.

 

[sebzzz]

Mootools itself.  Ugh.













IIRC, MooTools (like its inspiration Prototype) augments the
HTMLElement object, but this ill-advised approach doesn't work in IE.
To get around this, both libraries have functions that "extend"
elements by adding expando properties (also ill-advised.)  So your
problem lies in lines like this:

document.getElementById("fldroit").addEvent( ...

The gEBI method returns an HTMLElement, which is augmented in some
browsers, but not others (e.g. IE.)  The hack to make it "work" (using
the term loosely) is to do something like this:

$("fldroit").addEvent( ...

I don't know if that is the exact syntax for MooTools.

And you should realize that such code, which is encouraged by these
silly libraries and their clueless developers is a terrible idea.
Consider that this "chain" will break if the "fldroit" element doesn't
exist (throwing a script error and leaving the page in an unexpected
and possibly unusable state.)

Oh well.  At least you aren't using jQuery.  That one sneakily creates
a new object every time you call the $ function.

The problem with using these "time-saving" widgets that are built on
ill-conceived libraries is that to alter them you have to learn a new
API and often wade through its underlying code.  Add the fact that
most of these miserable things are patched together with browser
sniffing logic and realize that any time saved typing will be spent on
perpetual maintenance and lost customers.




Use a slide show script that doesn't rely on an incompetently written
library.  Or learn JavaScript and write your own.

Thanks for the answer, it solved my problems.

You're probably right about the library thing, I'm currently learning
Javascript and I'm sure I'll find lots of problems like that with
those in the future if I decide to rely on them.