Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] A loop this this script?

  • From: rdong at advance.net (Roland Dong)
  • Subject: [Javascript] A loop this this script?
  • Date: Wed Jun 22 13:31:10 2005
Thanks Matt, 

I have already tried something like the loop you have but it is not working.
It complains that document.getElementById(ids[i]) has no properties.

Can you take a look the complete code in the following?

DropDown.html
===================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html>

<head>
<title>DHTML DROPDOWN MENU TEST</title>

<style type="text/css">

table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {

var ids = Array('tutorials', 'scripting', 'validation');
navBar = document.getElementById("nav").rows[0].cells;
for (var i=0; i<navBar.length; i++)
{
    navBar[i].onmouseover=function() {
            document.getElementById(ids[i]).style.visibility="visible";
        };
    navBar[i].onmouseout=function() {
            document.getElementById(ids[i]).style.visibility="hidden";
        };
} // end for

}
window.onload=startList;
//--><!]]></script>

</head>

<body>
======================================================================

<table id="nav" width="100%">
 <tr bgcolor="#FF8080">
  <!--td onmouseover="showmenu('tutorials')"
onmouseout="hidemenu('tutorials')" -->
  <td width="1">
   <a href="/default.asp">Tutorials</a><br />
   <table class="menu" id="tutorials" width="120">
   <tr><td class="menu"><a href="/html/default.asp">HTML</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td><td>row
1, cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/css/default.asp">CSS</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xml/default.asp">XML</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   </table>
  </td>
  <!--td onmouseover="showmenu('scripting')"
onmouseout="hidemenu('scripting')" -->
  <td>
   <a href="/default.asp">Scripting</a><br />
   <table class="menu"  id="scripting" width="120">
   <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
   <tr><td class="menu"><a
href="/vbscript/default.asp">VBScript</a></td></tr>
   <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
   <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
   <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
   </table>
  </td>
  
  <!--td onmouseover="showmenu('validation')"
onmouseout="hidemenu('validation')" -->
  <td>
   <a href="/site/site_validate.asp">Validation</a><br />
   <table class="menu" id="validation" width="120">
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate
HTML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate
XHTML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate
CSS</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate
XML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate
WML</a></td></tr>
   </table>
   
  </td>
 </tr>
</table>
</body>

</html>

====================================













-----Original Message-----
From: javascript-bounces@xxxxxxxxxx [mailto:javascript-bounces@xxxxxxxxxx]
On Behalf Of Matt Warden
Sent: Wednesday, June 22, 2005 1:13 PM
To: [JavaScript List]
Subject: Re: [Javascript] A loop this this script?

something like:

var ids = Array('tutorials', 'scripting', 'validation');
navBar = document.getElementById("nav").rows[0].cells;
for (var i=0; i<navBar.length; i++)
{
    navBar[i].onmouseover=function() {
            document.getElementById(ids[i]).style.visibility="visible";
        };
    navBar[i].onmouseout=function() {
            document.getElementById(ids[i]).style.visibility="hidden";
        };
} // end for

Be careful about the order of the ids array, though.

On 6/21/05, Roland <rdong@xxxxxxxxxxx> wrote:
> 
> I figured that the following script can be written using a for loop. But I
> tried without success.  Can anyone throw some light on this? Thank you!
> 
> 
>
============================================================================
> <script type="text/javascript"><!--//--><![CDATA[//><!--
> startList = function() {
> 
>                 navBar = document.getElementById("nav").rows[0].cells;
>                 navBar[0].onmouseover=function() {
> 
> document.getElementById("tutorials").style.visibility="visible"
>                 }
> 
>                 navBar[0].onmouseout=function() {
> 
> document.getElementById("tutorials").style.visibility="hidden"
>                 }
> 
>                 navBar[1].onmouseover=function() {
> 
> document.getElementById("scripting").style.visibility="visible"
>                 }
> 
>                 navBar[1].onmouseout=function() {
> 
> document.getElementById("scripting").style.visibility="hidden"
>                 }
> 
>                 navBar[2].onmouseover=function() {
> 
> document.getElementById("validation").style.visibility="visible"
>                 }
>                 navBar[2].onmouseout=function() {
> 
> document.getElementById("validation").style.visibility="hidden"
>                 }
> }
> window.onload=startList;
> 
> //--><!]]></script>
> ===============================================
> 
> 
> _______________________________________________
> Javascript mailing list
> Javascript@xxxxxxxxxx
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 


-- 
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com


This email proudly and graciously contributes to entropy.
_______________________________________________
Javascript mailing list
Javascript@xxxxxxxxxx
https://lists.LaTech.edu/mailman/listinfo/javascript