Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problems hiding select box 3

Status
Not open for further replies.
ecobb

ecobb

Programmer
Joined
Dec 5, 2002
Messages
2,190
Location
US
I have a css navigation menu that I need to display over a select box, and currently it displays under it. I know this is a pretty common problem with select boxes, but I've always been able to hide it with JavaScript. My code below works great when I have just one select box named 'States'. But now, I have two select boxes, one named 'States' and one named 'Type' and I can't get the second box to disappear when someone mouses over the menu.

Code: 
<script language="JavaScript" type="text/javascript">
sfHover = function() { 
	var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
	for (var i=0; i<sfEls.length; i++) { 
		sfEls[i].onmouseover=function() { 
			this.className+=" sfhover"; 
			document.getElementById('State').style.visibility='hidden';} 
		sfEls[i].onmouseout=function() { 
			this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
  			document.getElementById('State').style.visibility='';} 
		} 
	} 
if (window.attachEvent) window.attachEvent("onload", sfHover);
function no_error()
	{ return true; }
window.onerror=no_error;
</script>
I know virtually nothing about JavaScript, I was able to muddle through it and get it working the first time, but I don't have a clue how to add the second select box. Can someone show me how?

Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Sort by date Sort by votes
Right after this code:

Code: 
document.getElementById('State').style.visibility='hidden';

but before the ending brace:

Code: 
document.getElementById('State').style.visibility='hidden';[!]}[/!]

insert this:

Code: 
document.getElementById('Type').style.visibility='hidden';

to get this:

Code: 
document.getElementById('State').style.visibility='hidden'; document.getElementById('Type').style.visibility='hidden';[!]}[/!]

Hope this helps,

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks, but that's what I tried to start with and it doesn't seem to work. Sorry, I guess I have should have said that in my original post. 'States' still works, but 'Type' doesn't hide.

Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
The obvious things to check of course is that the select box Type has an ID tag, that the case is the same ("Type" rather than "type") and that no other element on the page also has the ID or Name tag Type.
Type could also be giving you problems as it may be a reserved word and confusing the javascript. Try changing the ID to some word not likely to be a reserved word or just prepend sel to the name making it selType. That way you know by the name that it is a select box called Type just by looking at it.


Google, you're my hero!
 
Upvote 0 Downvote
Thank, but none of that worked either. I changed the name to 'EmpType' and it didn't work, so I changed the name to 'Bob' and it still didn't work.

Here's my current JavaScript:
Code: 
<script language="JavaScript" type="text/javascript">
sfHover = function() { 
	var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
	for (var i=0; i<sfEls.length; i++) { 
		sfEls[i].onmouseover=function() { 
			this.className+=" sfhover"; 
			document.getElementById('State').style.visibility='hidden'; 
			document.getElementById('EmpType').style.visibility='hidden';} 
		sfEls[i].onmouseout=function() { 
			this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
  			document.getElementById('State').style.visibility=''; 
  			document.getElementById('EmpType').style.visibility='';} 
		} 
	} 
if (window.attachEvent) window.attachEvent("onload", sfHover);
function no_error()
	{ return true; }
window.onerror=no_error;
</script>

And here's my Select boxes in the form:
Code: 
<select name="EmpType">							<option value="Contractor">Contractor</option>
	<option value="Full Time">Full Time</option>
	<option value="Internship">Internship</option>
	<option value="Part Time">Part Time</option>
	<option value="Volunteer">Volunteer</option>
</select>

.......

<select name="State">
	<option value="AL" >Alabama</option>
	<option value="AK" >Alaska</option>
	<option value="AZ" >Arizona</option>
	<option value="AR" >Arkansas</option>
	<option value="CA" >California</option>
	<option value="CO" >Colorado</option>
	<option value="CT" >Connecticut</option>
	<option value="DE" >Delaware</option>
	<option value="DC" >District of Columbia</option>
	<option value="FL" >Florida</option>
	<option value="GA" selected>Georgia</option>
	<option value="HI" >Hawaii</option>
        ...etc...
</select>
The 'State' box still works, and if I change the name of 'EmpType' to 'State', it works too. :-)

Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
TheNiteOwl said:
The obvious things to check of course is that the select box Type has an ID tag
Click to expand...

ECAR said:
Thank, but none of that worked either.
Click to expand...

Perhaps if you followed it, and actually gave the select element an ID...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I did give it an ID, and it didn't work. 'State' doesn't have an ID and it works perfectly. I'll try giving them both an ID and see what that does.

Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
Nope, still not working. Each select box now has an ID equal to it's name, and the 'State' works but the 'EmpType' doesn't.

Is there something else I should be looking for?

Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
Surprisingly enough, the code works for me here. Both fields show/hide whether the other selects name is Type or EmpType and whether or not they have ID tags.

I do not get how document.getElementById is working if no ID tag exists. Does it have something to do with the way the function is instantiated?

I threw together a quick test which of course I had to make some assumptions for since the page required the existance of LI elements for the onhover.

Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
sfHover = function() { 
  var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
  for (var i=0; i<sfEls.length; i++) { 
    sfEls[i].onmouseover=function() { 
      this.className+=" sfhover"; 
      document.getElementById('State').style.visibility='hidden'; 
      document.getElementById('Type').style.visibility='hidden';
    } 
    sfEls[i].onmouseout=function() { 
      this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
      document.getElementById('State').style.visibility=''; 
      document.getElementById('Type').style.visibility='';
    } 
  } 
} 

if (window.attachEvent) window.attachEvent("onload", sfHover);

function no_error()
    { return true; }

window.onerror=no_error;

</script>
</head>
<body>
<div id="nav">
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
</div>
<form>
<select name="Type">                            
  <option value="Contractor">Contractor</option>
  <option value="Full Time">Full Time</option>
  <option value="Internship">Internship</option>
  <option value="Part Time">Part Time</option>
  <option value="Volunteer">Volunteer</option>
</select>
<br>
<select name="State">
    <option value="AL" >Alabama</option>
    <option value="AK" >Alaska</option>
    <option value="AZ" >Arizona</option>
    <option value="AR" >Arkansas</option>
    <option value="CA" >California</option>
    <option value="CO" >Colorado</option>
    <option value="CT" >Connecticut</option>
    <option value="DE" >Delaware</option>
    <option value="DC" >District of Columbia</option>
    <option value="FL" >Florida</option>
    <option value="GA" selected>Georgia</option>
    <option value="HI" >Hawaii</option>
</select>
</form>
</body>
</html>


Google, you're my hero!
 
Upvote 0 Downvote
Niteowl's code works for me in IE6 and firefox.

I don't know the answer but my good friend Google does.
 
Upvote 0 Downvote
Well, I got it working, and boy do I feel stupid, stupid, stupid...

While copying/pasting the source code for cLFlaVA's request, I discovered what was wrong. (Please remember, I know NOTHING about JavaScript) I have my JavaScript in 1 file that is included in the head many other files. As it turns out, the two select boxes, 'State' and 'EmpType', are in two seperate forms on two seperate pages. It appears that when the JavaScipt couldn't find 'State' in the form (since it was listed first), it wouldn't do anything for the 'EmpType' box. Just for testing, I copied/pasted the 'State' box to the other form and they both worked perfectly. Now I've just seperated it out and have the correct Script for the correct form.

Thanks for all of your help! I never would have figured this out with you guys.

I'm still learning, but I feel so stupid, stupid, stupid...

Hope This Helps!

ECAR
ECAR Technologies

"My work is a game, a very serious game." - M.C. Escher
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
chikwendu
  • Locked
  • Question Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
393
chikwendu
chikwendu
berkshirea
  • Locked
  • Question Question
Dropdown, Select, Required
Replies
8
Views
779
berkshirea
berkshirea
bs6600
  • Locked
  • Question Question
Accordion - Anchors in panels causing problems
Replies
6
Views
606
feherke
feherke
damipera
  • Locked
  • Question Question
Checkboxes - At Least 1 is Selected?
Replies
2
Views
466
damipera
damipera

Part and Inventory Search

Sponsor

Back
Top