How to figure out why it does not work in IE

Discussion in 'Javascript' started by Todd Cary, Feb 3, 2005.

  1. Todd Cary

    Todd Cary Guest

    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";
    }
    }
    Todd Cary, Feb 3, 2005
    #1
    1. Advertising

  2. Todd Cary

    Todd Cary Guest

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


    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, Feb 3, 2005
    #2
    1. Advertising

  3. Todd Cary

    Lee Guest

    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, Feb 3, 2005
    #3
  4. Todd Cary

    Todd Cary Guest

    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
    Todd Cary, Feb 4, 2005
    #4
  5. Todd Cary

    RobG Guest

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


    --
    Rob
    RobG, Feb 4, 2005
    #5
  6. Todd Cary

    Todd Cary Guest

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


    Rob -

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

    Todd
    Todd Cary, Feb 4, 2005
    #6
  7. Todd Cary

    RobB Guest

    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...
    RobB, Feb 4, 2005
    #7
  8. Todd Cary

    Todd Cary Guest

    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
    Todd Cary, Feb 4, 2005
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Horace Nunley

    why why why does function not work

    Horace Nunley, Sep 27, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    450
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Sep 27, 2006
  2. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,763
    Smokey Grindel
    Dec 2, 2006
  3. Neil

    Can't figure out why scanf does this

    Neil, Nov 18, 2006, in forum: C Programming
    Replies:
    8
    Views:
    346
    CBFalconer
    Nov 19, 2006
  4. Nephi Immortal
    Replies:
    7
    Views:
    259
  5. Replies:
    3
    Views:
    90
Loading...

Share This Page