Probably a newbie question, but...

Dev Articles Community Forums Sponsor:

Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

March 4th, 2005, 08:55 PM

Akdor 1154

Contributing User

Join Date: Dec 2004

Location: Center Canyon in a Raptor

Posts: 34

Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 4

Javascript dropdown/css trouble

ok, I'm relatively new to PHP scripting, and totally new to js; so instead of making a proper dropdown menu, I got PHP to make me some divs with CSS hovering and stuff out of an array, and then set them to be 'visibility: hidden;' in a stylesheet. I just want to use javascript to set the visibility option to show on an onMouseOver event, and to hide on an onMouseOut. I'll give the resulting HTML code instead of sourcePHP:

Code:

<script language="JavaScript">
function showMenu(menuName) {
   eval("document.all." + menuName + ".setAttribute('style', 'visibility:visible')");
   }
function hideMenu(menuName) {
   eval("document.all." + menuName + ".setAttribute('style', 'visibility:hidden')");
   }
</script>

^^ in the head.

Code:

<div id="navbartop">
<table width="100%" class="navbartable">
<tr>
   <td class="navbarcell" onMouseOver="javascript:showMenu('navbar0')">

      <span class="navbarheader">CRU</span>
   </td><td class="navbarcell">
      <a href="/cru/join.php">Join</a>
   </td><td class="navbarcell" onMouseOver="javascript:showMenu('navbar2')">
      <span class="navbarheader">League</span>
   </td><td class="navbarcell" onMouseOver="javascript:showMenu('navbar3')">
      <span class="navbarheader">Links</span>

   </td>
</tr>
</table>

n.b. the navbartop div is terminated later.

Code:

<div id="navbar0" class="navmenuhidden">
<table onMouseOut="javascript:hideMenu('navbar0')">
   <thead><tr>
      <td>
      <span class="navmenuheader">CRU</span>
   </td>

   </tr>
</thead>
<tbody class="navbarmenu">
   <tr>
      <td><a href="/cru/cru.php?area=history">History</a></td>
   </tr><tr>
      <td><a href="/cru/cru.php?area=ground">Ground</a></td>
   </tr><tr>
      <td><a href="/cru/cru.php?area=players">Players</a></td>

   </tr><tr>
      <td><a href="/cru/cru.php?area=story">Club Story</a></td>
   </tr><tr>
      <td><a href="/cru/gallery.php">Gallery</a></td>
   </tr><tr>
      <td><a href="/cru/cru.php?area=training">Training</a></td>
   </tr><tr>

      <td><a href="/cru/cru.php?area=merchandise">Buy Stuff!</a></td>
   </tr>
</tdbody>
</table>
</div>

There are two more of these menus, but I won't bother putting them here.

The menu refuses to show, and the Firefox javascript console tells me that "error: navbar0 is not defined".
Some help, please?

-Akdor

March 12th, 2005, 06:16 PM

Akdor 1154

Contributing User

Join Date: Dec 2004

Location: Center Canyon in a Raptor

Posts: 34

Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 4

Just did some more testing, and I can't seem to get JavaScript to recognize any document.getElementById("___") at all.

Any ideas?

March 16th, 2005, 07:09 PM

ChiefWigs1982

Contributing User

Join Date: Jan 2005

Location: I have emerged from the place of spells and fairies

Posts: 97

Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4

Well, first of all, document.all is IE only, so that's gonna stop it
working in FireFox completely...

Change your script to this, and it should work fine...

Code:

<script text="text/JavaScript">
function showMenu(menuName)
{
  	document.getElementById(menuName).style.visibility  ='visible';
}
function hideMenu(menuName)
{
  	document.getElementById(menuName).style.visibility  ='hidden';
}
</script>

Last edited by Agent47 : March 17th, 2005 at 05:48 PM. Reason: Stupid typo...

March 16th, 2005, 08:13 PM

Akdor 1154

Contributing User

Join Date: Dec 2004

Location: Center Canyon in a Raptor

Posts: 34

Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 4

Will that work with style.display as well?

EDIT:
And why then will Forefox tell me that document.layers is not supported, but not document.all?

-I was experimenting. Don't ask.

March 17th, 2005, 07:50 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

It's all about the DOM Standard.

Check out this page for JavaScript DOM information in the style of JavaDocs

March 17th, 2005, 05:50 PM

ChiefWigs1982

Contributing User

Join Date: Jan 2005

Location: I have emerged from the place of spells and fairies

Posts: 97

Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4

Yeah, you can set the .style.display of the object to 'block','none',
'inline', whatever you want...

Mods: Why has the forum added dodgy whitepsace around my '='
in that code? That's not normal, is it? It doesn't do that as DS...

March 18th, 2005, 07:57 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

Agent47:
I didn't notice that in your code...
Luckily this doesn't affect the operation of the code if one were to copy&paste it into their file.
It's usually an issue with the forum software we're running.
I've found other instances of similar spacing issues when code is posted (usually javascript examples).

Akdor 1154
In my past post, I forgot to mention the style.display... thanks Agent47

I believe you can modify any CSS component using DOM with that technique.
The trickier ones are the styles where, in a stylesheet, the name includes a hyphen.

Example:
#something { background-color: #fff; }

You could set this using DOM like:
document.getElementById('something').style.backgro undColor = '#fff';

I figure general rule is to take the hyphen out and capitalize the first letter of the second word.

March 18th, 2005, 07:59 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

notice the weird space that time

March 18th, 2005, 08:18 AM

ChiefWigs1982

Contributing User

Join Date: Jan 2005

Location: I have emerged from the place of spells and fairies

Posts: 97

Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4

Yeah, that is strange, never seen that before at Dev Shed
Forums...

Anyway, back on topic, it's also worth mentioning that you
can only use JS to modify css that's declared inline, i.e. in
style="" attributes, not stuff declared in a style sheet, or
in <style> tags in the header.

You can set anything using JS, but you can't access the
data. For example:

Code:

<style type="text/css">
#one
{
	background-color:#3399FF; display:none; width:100px; height:100px;
}
#two
{
	background-color:#993399; display:none; width:100px; height:100px;
}
</style>
<script type="text/JavaScript">
<!-- Chief...
function toggle(d)
{
	var o=document.getElementById(d);
	alert(o.style.backgroundColor);
}
-->
</script>
...
<body>
<a href="javascript:;" onClick="toggle('one');">One</a>
<a href="javascript:;" onClick="toggle('two');">Two</a>
<div id="one">
	some random content in the first div
</div>
<div id="two">
	some random content in the second div
</div>
</body>

As you can see, this will alert nothing.

If you use JS to set the value of something, it becomes inline,
so if you did th following, it would alert nothing, then set the
value, then alert the value:

Code:

function toggle(d)
{
	var o=document.getElementById(d);
	alert(o.style.backgroundColor);
	o.style.backgroundColor='#000000';
	alert(o.style.backgroundColor);
}

This is important if you need to check the value of some css
attirbute before doing something to it...

Just thought that was worth pointing out...

#10

March 18th, 2005, 11:47 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

I had to test that to believe you.
It's something I've never realized before.

#11

March 19th, 2005, 10:20 PM

Akdor 1154

Contributing User

Join Date: Dec 2004

Location: Center Canyon in a Raptor

Posts: 34

Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 4

That'll be another bug with my code - I'm using an external stylesheet. So I need to use <div id="navbar0" style="display: none"> instead?

#12

March 20th, 2005, 06:37 AM

ChiefWigs1982

Contributing User

Join Date: Jan 2005

Location: I have emerged from the place of spells and fairies

Posts: 97

Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 4

Yup. You can still apply all the other styles you want in your
external sheet, just the disply property needs to be inline to
be able to toggle it!

#13

March 21st, 2005, 08:47 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

I still advise you use an external stylesheet...
but if you need to get information about how a certain element is styled, DOM may not retrieve it for you.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: