Click to See Complete Forum and Search --> : JavaScript/DHTML question


Dengin
04-11-2001, 12:38 PM
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, (http://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

Grizzly
04-11-2001, 10:40 PM
*Cracks Knuckles*

Alrighty...no problem. I poked around that site you link to and discovered this example:
http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_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! http://www.sharkyforums.com/ubb/biggrin.gif

Dengin
04-12-2001, 09:12 AM
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.asp?filename=trydhtml_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 http://www.sharkyforums.com/ubb/smile.gif
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.asp?filename=trydhtml_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! http://www.sharkyforums.com/ubb/biggrin.gif



------------------
"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

Grizzly
04-12-2001, 02:39 PM
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.

Dengin
04-12-2001, 03:11 PM
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 http://www.sharkyforums.com/ubb/smile.gif

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