Javascript in my .cfm works in IE but not FireFox..

[Lucky_Kitty]

I can't figure out why this Node expand/collapse functionality works in IE, but will not expand/collapse in firefox. Any suggestions?

[cf_dev2]

I would suggest looking at Firefox's error console. Tools -> Error Console

But can I ask why you're using outerHTML? Usually the way to collapse or expand an element is to change its style. I don't know the exact syntax but something like

var elem = document.getElementById('IdOfTheElementYouWant');
elem.style.display = "none";

[Daverms]

Also,

Download a handy plugin named 'firebug' which will be quite useful for you to do these javascript debugging,

Here is the link,
http://www.getfirebug.com/

[Lucky_Kitty]

The really odd thing, is this script works in Opera.. but still not firefox. Argh.

[cf_dev2]

Like I said IIRC the standard way to hide/show elements is using element.style.display not outerHTML. A quick search suggests outerHTML is a non-standard IE property and is not supported under Firefox.

What does the Firefox error console say?

[Lucky_Kitty]

Error Console says

Non-standard document.all property was used. Use W3C standard document.getElementByID() instead. and objDiv has no properties.

I'm kind of stuck, because I don't know much about Javascript.

[cf_dev2]

Look at a tutorial on using element.style.display
http://www.w3schools.com/htmldom/prop_style_display.asp

[Guest]

All Gecko-based browers support the Microsoft's "innerHTML" property but none that I've heard of support the "outerHTML" property.

[ssawka]

Firefox does not support document.all, use document.getElementById()

objDiv = document.getElementById('div' + id);
objImage = document.getElementById('image' + id);

This should work for both IE and Firefox

[Lucky_Kitty]

Ok, I've replaced:
objDiv = eval( "document.all.div" + id );
objImage = eval( "document.all.image" + id );
WITH:
objDiv = document.getElementById('div' + id);
objImage = document.getElementById('image' + id);

When I view in IE, it expands and collapses, but doesn't expand or collapse in Firefox. Now, when I look in Error Console, no errors are listed.

Do I need to replace outer.html? If so, what do I use?

[cf_dev2]

quote:

---

Do I need to replace outer.html

---

One more time... there is no such thing as outerHTML in Firefox 😉 Its a MS property. It will not work in Firefox, et. al.

Can you post the full javascript code you're using to expand/collapse?

[Lucky_Kitty]

Here's the javascript that I'm trying to fix. I'm not sure what to replace the outerHTML with to fix this, as it was written by someone else, and I hate to admit it, I'm not very good with javascript, so I really appreciate all your help. :-)
-----------------------------------------------------

<script type="text/javascript">
// Node expand/collapse functionality
function expandNode( id )
{
var objDiv, objImage, strInner

objDiv = document.getElementById('div' + id);
objImage = document.getElementById('image' + id);



strInner = objDiv.innerHTML;

if( objImage.src.indexOf( "plus" ) > 0 )
{
objDiv.outerHTML = "<div id='div" + id + "' style='display:inline'>" + strInner + "</div>";
objImage.src = "/img/minus.gif";
}
else
{
objDiv.outerHTML = "<div id='div" + id + "' style='display:none'>" + strInner + "</div>";
objImage.src = "/img/plus.gif";
}
}

</script>

[cf_dev2]

> I hate to admit it, I'm not very good with javascript

Its not as complicated as you seem to be thinking. Like I said originally, there are two steps:

1. You get the element you want to expand or collapse
> var elem = document.getElementById('IdOfTheElementYouWant');

In other words: objDiv = document.getElementById('div' + id);

2. Then use the element's style to expand or collapse it
> elem.style.display = "none";

In terms of your code (collapse): objDiv.style.display = "none" ... or (expand)...: objDiv.style.display = "inline";