JavaScript/DHTML question

Sharky Forums


Results 1 to 5 of 5

Thread: JavaScript/DHTML question

  1. #1
    Tiger Shark
    Join Date
    Feb 2001
    Location
    NJ, got a problem with that?
    Posts
    714

    Post 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

  2. #2
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    *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!

  3. #3
    Tiger Shark
    Join Date
    Feb 2001
    Location
    NJ, got a problem with that?
    Posts
    714

    Post

    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

  4. #4
    Ursus Arctos Moderatis Grizzly's Avatar
    Join Date
    Sep 2000
    Location
    Providence, RI USA
    Posts
    3,077

    Post

    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.

  5. #5
    Tiger Shark
    Join Date
    Feb 2001
    Location
    NJ, got a problem with that?
    Posts
    714

    Post

    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
  •