Hover Images Work in FF & NN, but not IE

I have four pieces of code to automatically build my navigation buttons and choose which page to load: 1) a hover script, which swaps the images onmouseover and onmouseout, 2) a DOM loader, which automatically creates and removes DOM elements, 3) a nav script, which builds the nav buttons depending on the page being viewed, and 4) a page loader script that clears out the content area and inserts the newly selected content.

What should happen is this: NAVInit selects the images to use depending on the page being viewed, and submits them to the DOMLoader to remove the old elements and create the new elements. Part of the DOM creation process includes the attributes 'onmouseover=' and 'onmouseout=', which intiate the HOVERLoader script to swap out images, and an 'onclick=' attribute, which calls the PAGELoader script to load the new content and reset the nav buttons.

This all works in FF2.2.08 and NN9, but the onmouseover, onmouseout, and onclick do not work in IE7 (dang Microsoft again!). IE7 does not give any errors, however.

The strange thing is, I know that these three attributes all work in IE7 when the DOM Elements are created manually. So, what is going on here? The only thing that I can think of is in the way I create my strings. You'll see in the mouseOver and mouseOut vars I use in the NAVLoader script.

Not sure how much of the code you want to see, but I will try to include only the relevant parts. Because there is so much code here, I will add them in separate replies to this post.

Thanks in advance for your feedback.

re: Hover Images Work in FF & NN, but not IE

HOVERLoader script:

Simple enough.

re: Hover Images Work in FF & NN, but not IE

DOMLoader script:

Longer, but not really all that complex. Just a whole lot of 'if' and 'if...else' statements to cover as many possibilities as possible.

re: Hover Images Work in FF & NN, but not IE

NAVLoader script:

A little more complex, but not too bad.

re: Hover Images Work in FF & NN, but not IE

PAGELoader script:

I shortened this one by not including all the switch cases.

re: Hover Images Work in FF & NN, but not IE

Quite a pain to read the whole stuff. But your problem is in how you assign event handlers to new created objects. No, IE has no problem with events on new created objects. After I digged your code i found that you basically are doing it like this:

[PHP]newElement.setAttribute('onclick','what to do in string format');
[/PHP]
You can not assign strings as event handler. I was even surprised that FF accepted it (and evalued it by default). The problem is, that you can assign just functions (refs). So to fast fix, you can do this:

[PHP]//instead:
newElement.setAttribute('onclick','what to do in string format');
//do this:
newElement.setAttribute('onclick',new Function('what to do in string format'));[/PHP]

(it will create anonymous function for each object)

re: Hover Images Work in FF & NN, but not IE

Dasty,

Thank you very much for your time reviewing my code--I know it couldn't have been easy--and for your suggested fix. All my code is modular so that I don't have repeat multiple lines in each script. For instance, several different scripts use the DOMLoader and HOVERLoader scripts to generate content.

I thought the problem might be with my mouseOver, mouseOut, and pageLoader vars, just couldn't figure out what it was. I was under the impression that the string would be converted before DOMLoader added it as an attribute; guess not.

You are basically saying I should do this:

That is a quick fix. Let me give it a try and I will report back the results.

re: Hover Images Work in FF & NN, but not IE

Dasty,

That worked great in IE, but now FF and NN don't work. I did the fix two ways:

I suppose that I could include a browser check to see if it is IE, then include "new Function" in the mouseOver, mouseOut, and loadPage vars. That just seems a bit clunky to me. Perhaps there is another way.

re: Hover Images Work in FF & NN, but not IE

Well, this is the code I ended up going with for now:

It works, but I would really like to know why one set of variables does not work for all browsers.

Perhaps the problem I should be working on instead is a better way to create my onmouseover, onmouseout, and onclick attributes.

I'm going for modularity and eliminating redundancy; so having to rewrite these vars twice really annoys me. :-|

re: Hover Images Work in FF & NN, but not IE

No way. Do yourself a favor and forget that something like navigator.appName even exists. Nobody forces browser to identify itself right. Especially minor browsers are happy to identify themselves as one of the major browsers. So parsing appName is not the way - never. (google javascript browser identification and you'll find some more useful pseudo - solutions)

But back to your problem:

To be honest I am quite surprised of setAttribute behavior. I always thought that:

object[parameter_name] = value

is equivalent with:

object.setAttribute(parameter_name, value);

but obviously it is not. But I know, that obj.onclick = value; is working fine in all browsers. So try this (can not test it so check for typos):
[PHP]
for (index in attrib)
{
createElement.setAttribute(index, attrib[index]);
};
[/PHP]

change to:
[PHP]
for (index in attrib)
{
createElement[index] = attrib[index];
};
[/PHP]

It should work with events. (And ofc, use that new Function() for event handlers) Please run some tests and let us know.

re: Hover Images Work in FF & NN, but not IE

in some cases that seems to be equivalent ... but simply try it with the 'readonly' or 'disabled' attributes. there is a difference between setting an objects javascript-property (your first code) and setting an attribute of the dom-node (the second variation) ... in case you set the attribute 'readonly' with setAttribute(); you HAVE to remove it to make the node to accept input again ... we have to use removeAttribute() for that. we cannot set the attribute to false with set attribute here. but you may set the property node.readonly = false; BUT: with that we are mixing up the two ways ... and it is good practice to use ONE way to avoid confusion especially in case you have to debug your code later on :)

kind regards

re: Hover Images Work in FF & NN, but not IE

Good to know, did not know that (thank you). Makes sense now (i just thought that removeAttribute would be the same as "delete obj.property" ... but you can not delete obj.readOnly for example as you said). But while he can not use setAttribute for assigning event handlers and he can not assign all properties by just simple JS property assignment, then he has to divide events and attributes and work with them in different ways.

re: Hover Images Work in FF & NN, but not IE

[quote=Dasty]change to:
[PHP]
for (index in attrib)
{
createElement[index] = attrib[index];
};
[/PHP]

Aha! You just solved a problem I was having that forced me to use the first method. I couldn't figure out how to set the index attribute because I had forgotten that .index is equiv to [index], and .index would not work. Now I can change that code and get around that problem.

I'll try it out and get back to you.

re: Hover Images Work in FF & NN, but not IE

Alright, that worked in all browsers! Setting the dom-node attribute is exactly what I wanted to do in the first place (ergo "DOMLoader") ;-)).

Thank you for your help!