How to figure out why it does not work in IE

T

Todd Cary

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.menu;
if (menuName != null)
{
bar.onmouseover = new Function("ShowMenu("+bar.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.onmouseover = new Function("ShowBar("+bar.id+")");
}
if (bar.cmd != null)
{
bar.onclick = new Function("Do("+bar.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.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";
}
}
 
T

Todd Cary

Todd said:
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.menu;
if (menuName != null)
{
bar.onmouseover = new Function("ShowMenu("+bar.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.onmouseover = new Function("ShowBar("+bar.id+")");
}
if (bar.cmd != null)
{
bar.onclick = new Function("Do("+bar.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.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";
}
}
Click to expand...


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
 
L

Lee

Todd Cary said:
Todd said:
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;
Click to expand...
Click to expand...
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.
Click to expand...

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

Todd Cary

Lee said:
Todd Cary said:
Todd said:
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;
Click to expand...

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.
Click to expand...


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.
Click to expand...

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
 
R

RobG

Todd Cary wrote:
[...]
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.
Click to expand...

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.id)
kidIds.push(theKids.id);
}

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

Todd Cary

RobG said:
Todd Cary wrote:
[...]
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.
Click to expand...


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.id)
kidIds.push(theKids.id);
}

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


Rob -

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

Todd
 
R

RobB

Todd Cary wrote:

(snip)
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.
Click to expand...

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

Todd Cary

RobB said:
Todd Cary wrote:

(snip)

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.
Click to expand...


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...
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Cascading menu script 0
HELP needed on cascading menu - "onmouseout" event?!??? 0
Cascading menu questions 0
Top Drop Down Menu for IE that can overlay IE combo box and has fading effect 2
I can't figure this out! Please tell me what's wrong! 4
Cascading menus in Javascript 6
Help!! HTML rowspan does not work with a tree table? 1
onmouseleave event in IE 3

Members online

Total: 31 (members: 1, guests: 30)
Robots: 193

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,008
Latest member
Rahul737

Latest Threads

Top