By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,979 Members | 943 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,979 IT Pros & Developers. It's quick & easy.

How to figure out why it does not work in IE

P: n/a
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";
}
}
Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Todd Cary wrote:
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";
}
}


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
Jul 23 '05 #2

P: n/a
Lee
Todd Cary said:

Todd Cary wrote:
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;
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.


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.

Jul 23 '05 #3

P: n/a
Lee wrote:
Todd Cary said:
Todd Cary wrote:
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;


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.

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 -

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
Jul 23 '05 #4

P: n/a
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.


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
Jul 23 '05 #5

P: n/a
RobG wrote:
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.

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 -

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

Todd
Jul 23 '05 #6

P: n/a
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.


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

Jul 23 '05 #7

P: n/a
RobB wrote:
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.

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


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
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.