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.
roscoeh23Asked:
Who is Participating?
 
REA_ANDREWConnect With a Mentor Commented:
ok then well here it is.

give the select box an ID, which it will already have.

then I assume to you two methods, using the on mouse over and on mouse out.

you need to pin point three menues so you could probably give those three menu li's and id too so of the ones you want to change try this

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

so in your javascript you could have something like this

               if (node.nodeName=="LI" && node.id=="SPECIAL") {
                    node.onmouseover=function() {
                         this.className+=" over";
document.getElementById("Your_Select_ID_Here").style.display='none';
                    }
                    node.onmouseout=function() {
                         this.className=this.className.replace(" over", "");
document.getElementById("Your_Select_ID_Here").style.display='';
                    }
               }
0
 
REA_ANDREWCommented:
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;"
0
 
roscoeh23Author Commented:
Doesn't work IE always puts the selectbox at the top regardless of the z-index.

Hope it is fixed in IE 7.

0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
REA_ANDREWCommented:
so would an option be to completely hide the form control when the menu expands, thus reappearing when it contracts?
0
 
radarshCommented:
Hi roscoeh23,

Use an IFRAME which sits behind your menu for this.

________
radarsh
0
 
roscoeh23Author Commented:
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
0
 
REA_ANDREWCommented:
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", "");
                    }
}
0
 
roscoeh23Author Commented:
sweet!
0
 
roscoeh23Author Commented:
will give it a go and get back to you
0
 
REA_ANDREWCommented:
Hi,

Do you require further assistance with this?

Andrew
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.