asked on

javascript problem- hiding a textbox on rollover

On this page you will see the dropdown hides under the box.

http://nationalservicesscotland.com/news/nss_news.php

I use this javascript to fix the dropdown in ie

// JavaScript Document

startList = function() {
      if (document.all && document.getElementById) {
            navRoot = document.getElementById("dmenu");
            for (i=0; i < navRoot.childNodes.length; i++) {
                  node = navRoot.childNodes[i];
                  if (node.nodeName=="LI") {
                        node.onmouseover=function() {
                              this.className+=" over";
                        }
                        node.onmouseout=function() {
                              this.className=this.className.replace(" over", "");
                        }
                  }
            }
      }
}

window.onload=startList;
//-->

The menu in css looks like this

<li class="topmenuli"><a href="#" class="publications"><span style="display:none">Publications</span></a>

I need for the selectbox to be hidden when either the 'publications', 'our divisions' or 'news' node is rolled over.

REA_ANDREW

why not try using z-index

so on the textbox have this

style="z-index:0;"

and on the menu Divs have this

style="z-index:1;"

roscoeh23

ASKER

Doesn't work IE always puts the selectbox at the top regardless of the z-index.

Hope it is fixed in IE 7.

REA_ANDREW

so would an option be to completely hide the form control when the menu expands, thus reappearing when it contracts?

radarsh

Hi roscoeh23,

Use an IFRAME which sits behind your menu for this.

________
radarsh

roscoeh23

ASKER

I have tried the iframe and couldn't get it to work. Do you have an example?

REA_ANDREW - That is what I am trying to achieve

ASKER CERTIFIED SOLUTION

REA_ANDREW

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

REA_ANDREW

I did not finish my post. Doh, so anyway put this else onto the if statment
else{
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}

roscoeh23

ASKER

sweet!

roscoeh23

ASKER

will give it a go and get back to you

REA_ANDREW

Hi,

Do you require further assistance with this?

Andrew