JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old March 4th, 2005, 09:55 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 14
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

Reply With Quote
  #2  
Old March 12th, 2005, 07:16 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 14
Just did some more testing, and I can't seem to get JavaScript to recognize any document.getElementById("___") at all.

Any ideas?

Reply With Quote
  #3  
Old March 16th, 2005, 08:09 PM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 14
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 06:48 PM. Reason: Stupid typo...

Reply With Quote
  #4  
Old March 16th, 2005, 09:13 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 14
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.

Reply With Quote
  #5  
Old March 17th, 2005, 08:50 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
It's all about the DOM Standard.

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

Reply With Quote
  #6  
Old March 17th, 2005, 06:50 PM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 14
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...

Reply With Quote
  #7  
Old March 18th, 2005, 08:57 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
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.

Reply With Quote
  #8  
Old March 18th, 2005, 08:59 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
notice the weird space that time

Reply With Quote
  #9  
Old March 18th, 2005, 09:18 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 14
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...

Reply With Quote
  #10  
Old March 18th, 2005, 12:47 PM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
I had to test that to believe you.
It's something I've never realized before.

Reply With Quote
  #11  
Old March 19th, 2005, 11:20 PM
Akdor 1154 Akdor 1154 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Dec 2004
Location: Center Canyon in a Raptor
Posts: 34 Akdor 1154 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 28 m 44 sec
Reputation Power: 14
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?

Reply With Quote
  #12  
Old March 20th, 2005, 07:37 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jan 2005
Location: I have emerged from the place of spells and fairies
Posts: 97 ChiefWigs1982 User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 Days 17 h 35 m 12 sec
Reputation Power: 14
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!

Reply With Quote
  #13  
Old March 21st, 2005, 09:47 AM
MadCowDzz's Avatar
MadCowDzz MadCowDzz is offline
I'm Internet Famous
Dev Articles Frequenter (2500 - 2999 posts)
 
Join Date: Jan 2003
Location: Toronto, Canada
Posts: 2,886 MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level)MadCowDzz User rank is Lance Corporal (50 - 100 Reputation Level) 
Time spent in forums: 1 Week 16 h 19 m 35 sec
Reputation Power: 18
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.

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > Probably a newbie question, but...


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap