|
-
JavaScript/DHTML question
This one's for you, Grizzly (or anyone else who could help). I want to make a top menu with vertical drop downs. I can do that. I have seen an example that has one menu item that does a slide down of sub-menus upon mouseover. Now I want to combine the two, have something like 4 menu items at the top, and upon a mouseover event slide down submenus. I can't get this to work, I know it has something to do with passing on information on which element to change, but I'm too new to this stuff to figure it out. Here's the code so far:
<script language="JavaScript">
var i=0
var intHide
function show()
{
if (i>-100)
{
i=i-1
document.all(elmnt).style.bottom=i
}
}
function showmenu(elmnt)
{
clearInterval(intHide)
intShow=setInterval("show()",10)
}
function hide()
{
if (i<0)
{
i=i+1
document.all(elmnt).style.bottom=i
}
}
function hidemenu(elmnt)
{
clearInterval(intShow)
intHide=setInterval("hide()",10)
}
</script>
It gets called like this:
<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
<a href="../default.asp">Tutorials</a><br />
<table class="menu" id="tutorials" width="100%">
<tr><td class="menu"><a href="../html">HTML</a></td></tr>
<tr><td class="menu"><a href="../xhtml">XHTML</a></td></tr>
<tr><td class="menu"><a href="../css">CSS</a></td></tr>
<tr><td class="menu"><a href="../xml">XML</a></td></tr>
<tr><td class="menu"><a href="../xsl">XSL</a></td></tr>
</table>
</td>
When I take the 'elmnt' part from the function calls, and change the Show and Hide functions to document.all("menu") this particular menu will work, but like I said, I want to have more than one 'top' menu.
Oh, I got this code from www.w3schools.com, the ones that work anyway.
------------------
"My other car is also a Porsche"
---------------------------------
Abit BH6, rev. 1.01
PIII-750@840
256MB PC133 Crucial RAM
Viper 770 non-Ultra @ 150/183 w. NVidia 11.01 drivers
TennMax Lasagna TNT cooler
Diamond Monster MX300 w. Vortex 2 v.2048 drivers
DirectX 8.0a
"My other car is also a Porsche"
-------------------------
PIV-3.0GHz, 800MHz FSB; 1GB 400MHz SDRAM; Ati Radeon 9800 Pro; SB Audigy 2; Windows XP SP1
Old rig: Abit BH6, rev. 1.01; PIII-750@931; 256MB PC133 Crucial RAM; Hercules Prophet 4500; Diamond Monster MX300; DirectX 8.0a; 60 GB IBM Deskstar 60XP
-
Ursus Arctos Moderatis
*Cracks Knuckles*
Alrighty...no problem. I poked around that site you link to and discovered this example:
http://www.w3schools.com/dhtml/tryit...rydhtml_menu10
Looks like exactly what you're going for....and the code looks incredibly similar to yours...with the exception of the functions defined in the head of the document. Looks like you have some overly complicated code up there. Replace what's in your head with the following:
<script language="JavaScript">
function showmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
Should work than! Good luck!
-
Hm, well, the thing is, I want to combine THAT particular example with the one that does the 'slow slide': http://www.w3schools.com/dhtml/tryit...tml_menu_slide
That example shows one Menu option, that does a smooth slide-down of additional menu items on a MouseOver event. The thing is, I can't get it to work when using multiple 'top menu' items.
Actually, I discovered that VERY few of these DHTML gadgets work with Netscape. And even though I hate the Netscape browser myself, if I'm going to make a site, I want people to be able to see it 
Originally posted by Grizzly:
*Cracks Knuckles*
Alrighty...no problem. I poked around that site you link to and discovered this example:
http://www.w3schools.com/dhtml/tryit...rydhtml_menu10
Looks like exactly what you're going for....and the code looks incredibly similar to yours...with the exception of the functions defined in the head of the document. Looks like you have some overly complicated code up there. Replace what's in your head with the following:
<script language="JavaScript">
function showmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>
Should work than! Good luck!
------------------
"My other car is also a Porsche"
---------------------------------
Abit BH6, rev. 1.01
PIII-750@840
256MB PC133 Crucial RAM
Viper 770 non-Ultra @ 150/183 w. NVidia 11.01 drivers
TennMax Lasagna TNT cooler
Diamond Monster MX300 w. Vortex 2 v.2048 drivers
DirectX 8.0a
"My other car is also a Porsche"
-------------------------
PIV-3.0GHz, 800MHz FSB; 1GB 400MHz SDRAM; Ati Radeon 9800 Pro; SB Audigy 2; Windows XP SP1
Old rig: Abit BH6, rev. 1.01; PIII-750@931; 256MB PC133 Crucial RAM; Hercules Prophet 4500; Diamond Monster MX300; DirectX 8.0a; 60 GB IBM Deskstar 60XP
-
Ursus Arctos Moderatis
Yeah, Netscape simply doesn't support DHTML. So if you have any ounce of care to Netscape visitors on your website, than you might want to abandon these DHTML ventures all together.
I could help you make some drop down menu's like that, which work in both Netscape *and* IE, but they could't have that "slow" pulldown feature you're talking about.
You're best bet is to do it in Flash if you want the slow pulldowns, *AND* you want it to work in Netscape.
-
Understood. I'll go look for some plain vanilla Javascripts then that'll work in both browsers. There's oodles of them out there. The problem seems to lie with the CSS part of DHTML, NS doesn't seem to handle it very well.
Thanks though 
Originally posted by Grizzly:
Yeah, Netscape simply doesn't support DHTML. So if you have any ounce of care to Netscape visitors on your website, than you might want to abandon these DHTML ventures all together.
I could help you make some drop down menu's like that, which work in both Netscape *and* IE, but they could't have that "slow" pulldown feature you're talking about.
You're best bet is to do it in Flash if you want the slow pulldowns, *AND* you want it to work in Netscape.
------------------
"My other car is also a Porsche"
---------------------------------
Abit BH6, rev. 1.01
PIII-750@840
256MB PC133 Crucial RAM
Viper 770 non-Ultra @ 150/183 w. NVidia 11.01 drivers
TennMax Lasagna TNT cooler
Diamond Monster MX300 w. Vortex 2 v.2048 drivers
DirectX 8.0a
"My other car is also a Porsche"
-------------------------
PIV-3.0GHz, 800MHz FSB; 1GB 400MHz SDRAM; Ati Radeon 9800 Pro; SB Audigy 2; Windows XP SP1
Old rig: Abit BH6, rev. 1.01; PIII-750@931; 256MB PC133 Crucial RAM; Hercules Prophet 4500; Diamond Monster MX300; DirectX 8.0a; 60 GB IBM Deskstar 60XP
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
|