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";
}
}

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

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.

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

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

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

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...

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