How to figure out why it does not work in IE

I inherited an application where the Flyout works in Firefox but not in
IE. My JavaScript background is sparse, so I am not sure how to
approach the problem. Any suggestions are welcomed!

The performance can be viewed at

http://209.204.172.137/casesearch/php/all.php

Here is the base javascript:

function InitMenu()
{
if (document.all["menuBar"])
{
}
else
{
return;
}
document.onclick=HideMenuBar;
var bar = menuBar.children;
for(var i=0;i < bar.length;i++)
{
var menuName = bar[i].menu;
if (menuName != null)
{
bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")");
var menu=eval(menuName);
menu.style.visibility = "hidden";
var Items = menu.children;
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id);
if(menuItem.menu != null)
{
if (menuItem.innerHTML.indexOf("_Arrow",1) < 1)
{
// menuItem.innerHTML += "<Span
Id="+menuItem.id+"_Arrow class='Arrow'> 4</Span>" ;
//menuItem.innerHTML += "<Span
Id="+menuItem.id+"_Arrow class='Arrow'><img
src='../gif/menu_arrow.gif'></Span>" ;
menuItem.innerHTML += "<img class='Arrow'
src='menu_arrow.gif'>" ;
}
FindSubMenu(menuItem.menu);
}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")");
}

menuItem.onmouseover = new
Function("highlight("+Items[j].id+")");
}
} else
{
bar[i].onmouseover = new Function("ShowBar("+bar[i].id+")");
}
if (bar[i].cmd != null)
{
bar[i].onclick = new Function("Do("+bar[i].id+")");
}
}
}

function FindSubMenu(subMenu)
{
var menu=eval(subMenu);
var Items = menu.children;
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden";
var menuItem = eval(Items[j].id);

if(menuItem.menu!= null)
{
menuItem.innerHTML += "<img class='Arrow'
src='menu_arrow.gif'>" ;
FindSubMenu(menuItem.menu);
}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")");
}

menuItem.onmouseover = new
Function("highlight("+Items[j].id+")");
}
}

function ShowMenu(obj)
{
HideMenu(menuBar);
var menu = eval(obj.menu);
var bar = eval(obj.id);
bar.className="barOver";
menu.style.visibility = "visible";
menu.style.pixelTop = obj.getBoundingClientRect().top +
document.body.scrollTop +3;
menu.style.pixelLeft = obj.getBoundingClientRect().right +
document.body.scrollLeft - 5;
if (obj.cmd != null)
{
window.status = obj.cmd;
}
}

function highlight(obj)
{
var PElement = eval(obj.parentElement.id);
if(PElement.hasChildNodes() == true)
{
var Elements = PElement.children;
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id);
TE.className = "menuItem";
}
}
obj.className="ItemMouseOver";
ShowSubMenu(obj);
if (obj.cmd != null)
{
window.status = obj.cmd;
} else window.status = "";

}

function Do(obj)
{
var cmd = eval(obj).cmd;
var new_browser = eval(obj).nb;
if (new_browser=="1")
{
window.open(cmd);
} else window.navigate(cmd);
}

function HideMenu(obj)
{
window.status = '';
if(obj.hasChildNodes()==true)
{
var child = obj.children;

for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{
var bar = eval(child[j].id);
bar.className="Bar";
}

if(child[j].menu != null)
{
var childMenu = eval(child[j].menu);
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu);
childMenu.style.visibility = "hidden" ;
}
}
}
}

function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id);
HideMenu(PMenu);
if(obj.menu != null)
{
var menu = eval(obj.menu);
menu.style.visibility = "visible";
menu.style.pixelTop = obj.getBoundingClientRect().top +
document.body.scrollTop +3;
menu.style.pixelLeft = obj.getBoundingClientRect().right +
document.body.scrollLeft - 5;
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left -
menu.offsetWidth;
}
}

function HideMenuBar(e)
{
HideMenu(menuBar);
}

function ShowBar(obj)
{
HideMenu(menuBar);
if (obj.cmd != null)
{
window.status = obj.cmd;
obj.className="barOver";
}
}

re: How to figure out why it does not work in IE

Todd Cary wrote:[color=blue]
> I inherited an application where the Flyout works in Firefox but not in
> IE. My JavaScript background is sparse, so I am not sure how to
> approach the problem. Any suggestions are welcomed!
>
> The performance can be viewed at
>
> http://209.204.172.137/casesearch/php/all.php
>
> Here is the base javascript:
>
> function InitMenu()
> {
> if (document.all["menuBar"])
> {
> }
> else
> {
> return;
> }
> document.onclick=HideMenuBar;
> var bar = menuBar.children;
> for(var i=0;i < bar.length;i++)
> {
> var menuName = bar[i].menu;
> if (menuName != null)
> {
> bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")");
> var menu=eval(menuName);
> menu.style.visibility = "hidden";
> var Items = menu.children;
> for(var j=0; j<Items.length; j++)
> {
> var menuItem = eval(Items[j].id);
> if(menuItem.menu != null)
> {
> if (menuItem.innerHTML.indexOf("_Arrow",1) < 1)
> {
> // menuItem.innerHTML += "<Span
> Id="+menuItem.id+"_Arrow class='Arrow'> 4</Span>" ;
> //menuItem.innerHTML += "<Span
> Id="+menuItem.id+"_Arrow class='Arrow'><img
> src='../gif/menu_arrow.gif'></Span>" ;
> menuItem.innerHTML += "<img class='Arrow'
> src='menu_arrow.gif'>" ;
> }
> FindSubMenu(menuItem.menu);
> }
>
> if(menuItem.cmd != null)
> {
> menuItem.onclick = new Function("Do("+menuItem.id+")");
> }
>
> menuItem.onmouseover = new
> Function("highlight("+Items[j].id+")");
> }
> } else
> {
> bar[i].onmouseover = new Function("ShowBar("+bar[i].id+")");
> }
> if (bar[i].cmd != null)
> {
> bar[i].onclick = new Function("Do("+bar[i].id+")");
> }
> }
> }
>
> function FindSubMenu(subMenu)
> {
> var menu=eval(subMenu);
> var Items = menu.children;
> for(var j=0; j<Items.length; j++)
> {
> menu.style.visibility = "hidden";
> var menuItem = eval(Items[j].id);
>
> if(menuItem.menu!= null)
> {
> menuItem.innerHTML += "<img class='Arrow'
> src='menu_arrow.gif'>" ;
> FindSubMenu(menuItem.menu);
> }
>
> if(menuItem.cmd != null)
> {
> menuItem.onclick = new Function("Do("+menuItem.id+")");
> }
>
> menuItem.onmouseover = new
> Function("highlight("+Items[j].id+")");
> }
> }
>
> function ShowMenu(obj)
> {
> HideMenu(menuBar);
> var menu = eval(obj.menu);
> var bar = eval(obj.id);
> bar.className="barOver";
> menu.style.visibility = "visible";
> menu.style.pixelTop = obj.getBoundingClientRect().top +
> document.body.scrollTop +3;
> menu.style.pixelLeft = obj.getBoundingClientRect().right +
> document.body.scrollLeft - 5;
> if (obj.cmd != null)
> {
> window.status = obj.cmd;
> }
> }
>
> function highlight(obj)
> {
> var PElement = eval(obj.parentElement.id);
> if(PElement.hasChildNodes() == true)
> {
> var Elements = PElement.children;
> for(var i=0;i<Elements.length;i++)
> {
> TE = eval(Elements[i].id);
> TE.className = "menuItem";
> }
> }
> obj.className="ItemMouseOver";
> ShowSubMenu(obj);
> if (obj.cmd != null)
> {
> window.status = obj.cmd;
> } else window.status = "";
>
> }
>
> function Do(obj)
> {
> var cmd = eval(obj).cmd;
> var new_browser = eval(obj).nb;
> if (new_browser=="1")
> {
> window.open(cmd);
> } else window.navigate(cmd);
> }
>
> function HideMenu(obj)
> {
> window.status = '';
> if(obj.hasChildNodes()==true)
> {
> var child = obj.children;
>
> for(var j =0;j<child.length;j++)
> {
> if (child[j].className=="barOver")
> {
> var bar = eval(child[j].id);
> bar.className="Bar";
> }
>
> if(child[j].menu != null)
> {
> var childMenu = eval(child[j].menu);
> if(childMenu.hasChildNodes()==true)
> HideMenu(childMenu);
> childMenu.style.visibility = "hidden" ;
> }
> }
> }
> }
>
> function ShowSubMenu(obj)
> {
> PMenu = eval(obj.parentElement.id);
> HideMenu(PMenu);
> if(obj.menu != null)
> {
> var menu = eval(obj.menu);
> menu.style.visibility = "visible";
> menu.style.pixelTop = obj.getBoundingClientRect().top +
> document.body.scrollTop +3;
> menu.style.pixelLeft = obj.getBoundingClientRect().right +
> document.body.scrollLeft - 5;
> if(menu.getBoundingClientRect().right > window.screen.availWidth )
> menu.style.pixelLeft = obj.getBoundingClientRect().left -
> menu.offsetWidth;
> }
> }
>
> function HideMenuBar(e)
> {
> HideMenu(menuBar);
> }
>
> function ShowBar(obj)
> {
> HideMenu(menuBar);
> if (obj.cmd != null)
> {
> window.status = obj.cmd;
> obj.className="barOver";
> }
> }[/color]

I mixed up which Browser works and does not: it works with IE but *not*
with Firefox. The problem appears to be with the property, "children",
in the above code. This line works in IE but not in Firefox:

var bar = menuBar.children;
alert("Got to here " + bar.length.toString());

Now I am not sure how to fix this if I identify that the app is running
in Firefox.

Todd

re: How to figure out why it does not work in IE

Todd Cary said:[color=blue]
>
>Todd Cary wrote:[color=green]
>> I inherited an application where the Flyout works in Firefox but not in
>> IE. My JavaScript background is sparse, so I am not sure how to
>> approach the problem. Any suggestions are welcomed!
>>
>> The performance can be viewed at
>>
>> http://209.204.172.137/casesearch/php/all.php
>>
>> Here is the base javascript:
>>
>> function InitMenu()
>> {
>> if (document.all["menuBar"])
>> {
>> }
>> else
>> {
>> return;
>> }
>> document.onclick=HideMenuBar;
>> var bar = menuBar.children;[/color][/color]
[color=blue]
>I mixed up which Browser works and does not: it works with IE but *not*
>with Firefox. The problem appears to be with the property, "children",
>in the above code. This line works in IE but not in Firefox:
>
> var bar = menuBar.children;
> alert("Got to here " + bar.length.toString());
>
>Now I am not sure how to fix this if I identify that the app is running
>in Firefox.[/color]

The problem is with the code that comes before that line.
document.all["menuBar"]
will never be true in Firefox, because document.all is a
non-standard invention of Microsoft.

Whoever you inherited this from seems to have had a sparse
background as well, so you might consider either learning
some Javascript and rewriting it yourself, or turning it
over to somebody who has the necessary skills and knowledge.

re: How to figure out why it does not work in IE

Lee wrote:[color=blue]
> Todd Cary said:
>[color=green]
>>Todd Cary wrote:
>>[color=darkred]
>>>I inherited an application where the Flyout works in Firefox but not in
>>>IE. My JavaScript background is sparse, so I am not sure how to
>>>approach the problem. Any suggestions are welcomed!
>>>
>>>The performance can be viewed at
>>>
>>>http://209.204.172.137/casesearch/php/all.php
>>>
>>>Here is the base javascript:
>>>
>>>function InitMenu()
>>> {
>>> if (document.all["menuBar"])
>>> {
>>> }
>>> else
>>> {
>>> return;
>>> }
>>> document.onclick=HideMenuBar;
>>> var bar = menuBar.children;[/color][/color]
>
>[color=green]
>>I mixed up which Browser works and does not: it works with IE but *not*
>>with Firefox. The problem appears to be with the property, "children",
>>in the above code. This line works in IE but not in Firefox:
>>
>> var bar = menuBar.children;
>> alert("Got to here " + bar.length.toString());
>>
>>Now I am not sure how to fix this if I identify that the app is running
>>in Firefox.[/color]
>
>
> The problem is with the code that comes before that line.
> document.all["menuBar"]
> will never be true in Firefox, because document.all is a
> non-standard invention of Microsoft.
>
> Whoever you inherited this from seems to have had a sparse
> background as well, so you might consider either learning
> some Javascript and rewriting it yourself, or turning it
> over to somebody who has the necessary skills and knowledge.
>[/color]

Lee -

I broke out my O'Reilly JavaScript book and it is showing it's
age(1998)! Does not have the DOM-Level-2 specifications. I am ordering
a new book. In the mean time, where can I find some examples of using
the Level-2 properties and methods?

There is a document that has a <div class="menuBar" id="menuBar"> object
which in turn has 4 childNodes. I am not sure how to get the array of
childNodes that contains the id's of the children.

Todd

re: How to figure out why it does not work in IE

Todd Cary wrote:
[...][color=blue]
> There is a document that has a <div class="menuBar" id="menuBar"> object
> which in turn has 4 childNodes. I am not sure how to get the array of
> childNodes that contains the id's of the children.[/color]

elementReference.childNodes will return a *collection* of the
child nodes of the element referenced. A collection is similar
to an array but without most of the methods.

The following will create an array of the IDs of the child nodes
of theDiv:

var theDiv = document.getElementById('menuBar');
var theKids = theDiv.childNodes;
var kidIds = [];

for (var i=0, len=theKids.length; i<len; i++){
if (theKids[i].id)
kidIds.push(theKids[i].id);
}

Note that 'childNodes' are the direct decedents of theDiv,
(i.e. firstChild and siblings), it does not include the children
of the children.


--
Rob

re: How to figure out why it does not work in IE

RobG wrote:[color=blue]
> Todd Cary wrote:
> [...]
>[color=green]
>> There is a document that has a <div class="menuBar" id="menuBar">
>> object which in turn has 4 childNodes. I am not sure how to get the
>> array of childNodes that contains the id's of the children.[/color]
>
>
> elementReference.childNodes will return a *collection* of the
> child nodes of the element referenced. A collection is similar
> to an array but without most of the methods.
>
> The following will create an array of the IDs of the child nodes
> of theDiv:
>
> var theDiv = document.getElementById('menuBar');
> var theKids = theDiv.childNodes;
> var kidIds = [];
>
> for (var i=0, len=theKids.length; i<len; i++){
> if (theKids[i].id)
> kidIds.push(theKids[i].id);
> }
>
> Note that 'childNodes' are the direct decedents of theDiv,
> (i.e. firstChild and siblings), it does not include the children
> of the children.
>
>[/color]

Rob -

Greatly appreciate your taking the time to answer the request and get me
started with writing (hopefully) some compatible JavaScript!!

Todd

re: How to figure out why it does not work in IE

Todd Cary wrote:

(snip)
[color=blue]
> I mixed up which Browser works and does not: it works with IE but[/color]
*not*[color=blue]
> with Firefox. The problem appears to be with the property,[/color]
"children",[color=blue]
> in the above code. This line works in IE but not in Firefox:
>
> var bar = menuBar.children;
> alert("Got to here " + bar.length.toString());
>
> Now I am not sure how to fix this if I identify that the app is[/color]
running[color=blue]
> in Firefox.[/color]

As Lee suggested, there are far more issues with that script than
simply one proprietary object reference:

document.all["menuBar"]

var bar = menuBar.children;

menu.style.pixelTop = obj.getBoundingClientRect().top +
document.body.scrollTop +3;

PMenu = eval(obj.parentElement.id);

....etc. ids as global variables, eval(), more eval(), Function()
constructor...not worth trying to fix.

You should also be using references to the nodes themselves, not
collecting their ids; you'll need to then get the object (node) back
again to script it anyway. Tons of menus out there...

re: How to figure out why it does not work in IE

RobB wrote:[color=blue]
> Todd Cary wrote:
>
> (snip)
>
>[color=green]
>>I mixed up which Browser works and does not: it works with IE but[/color]
>
> *not*
>[color=green]
>>with Firefox. The problem appears to be with the property,[/color]
>
> "children",
>[color=green]
>>in the above code. This line works in IE but not in Firefox:
>>
>> var bar = menuBar.children;
>> alert("Got to here " + bar.length.toString());
>>
>>Now I am not sure how to fix this if I identify that the app is[/color]
>
> running
>[color=green]
>>in Firefox.[/color]
>
>
> As Lee suggested, there are far more issues with that script than
> simply one proprietary object reference:
>
> document.all["menuBar"]
>
> var bar = menuBar.children;
>
> menu.style.pixelTop = obj.getBoundingClientRect().top +
> document.body.scrollTop +3;
>
> PMenu = eval(obj.parentElement.id);
>
> ...etc. ids as global variables, eval(), more eval(), Function()
> constructor...not worth trying to fix.
>
> You should also be using references to the nodes themselves, not
> collecting their ids; you'll need to then get the object (node) back
> again to script it anyway. Tons of menus out there...
>[/color]

Rob -

I am using this opportunity to learn about the DOM and rewrite the
application and probably make enough mistakes to learn a great deal :-)
.. However, my background is in Delpi, so there will be considerable
learning. If you check my recent post, I am already stuck on excluding
null's and undefined's!

On the learning curve.....

Todd