[Javascript] A loop for this script?
Roland Dong
rdong at advance.net
Fri Jul 1 10:18:46 CDT 2005
Mckinney,
Thank you so much. It works with ("' +
ids[this.cellIndex] + '")! However, I still have a problem. When submenu
pops up I need to have the submenu stays until the mouse moves away from it.
I need to do something like this to the code:
====================================================================
document.getElementById("' +ids[this.cellIndex] +'").onmouseover=function(){
clearTimeout(TIMER);
document.getElementById("' +ids[this.cellIndex]
+'")style.visibility="visible";
}
document.getElementById("' +ids[this.cellIndex] +'").onmouseout=function(){
TIMER=setTimeout('document.getElementById("'
+ids[this.cellIndex] +'").style.visibility="hidden"', 500);
}
========================================================================
But again, the above code is not working. I tried document.getElementById("'
+x+'") and document.getElementById(x) but they all get the same "no
Property" error. Why is that? Any work around? Please help.
Thanks a lot.
-----Original Message-----
From: javascript-bounces at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
On Behalf Of Mckinney, Lori K
Sent: Thursday, June 30, 2005 4:21 PM
To: [JavaScript List]
Subject: RE: [Javascript] A loop for this script?
When the timer fires, "this" refers to the document and doesn't have a
cellIndex. Also the ids array is inside that function, so it isn't
available then either. Try this:
navBar[x].onmouseout=function() { setTimeout('document.getElementById("' +
ids[this.cellIndex] + '").style.visibility="hidden"', 500)}
Hope that helps.
-----Original Message-----
From: javascript-bounces at LaTech.edu
[mailto:javascript-bounces at LaTech.edu]On Behalf Of Roland Dong
Sent: Thursday, June 30, 2005 1:35 PM
To: '[JavaScript List]'
Subject: RE: [Javascript] A loop for this script?
This.cellIndex works well but when I tried to user a timer then it stops
working, for example:
TIMER=setTimeout('document.getElementById(ids[this.cellIndex]).style.visibil
ity="hidden"', 500)
Then the code stops working and complains that "ids is not defined". Why is
that? Any workaround?
Thanks
=========================
var TIMER;
startList = function() {
var ids = new Array("tutorials", "scripting", "validation");
navBar = document.getElementById("nav").rows[0].cells;
for(x in ids){
navBar[x].onmouseover=function() {
document.getElementById(ids[this.cellIndex]).style.visibility="visible"
}
navBar[x].onmouseout=function() {
TIMER=setTimeout('document.getElementById(ids[this.cellIndex]).style.visibil
ity="hidden"', 500)
}
}
}
window.onload=startList;
==========================
-----Original Message-----
From: javascript-bounces at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
On Behalf Of Mckinney, Lori K
Sent: Wednesday, June 22, 2005 2:54 PM
To: [JavaScript List]
Subject: RE: [Javascript] A loop this this script?
The value of i when your mouseover is called is invalid (3). If your cells
correspond to your array entries, could you use this instead?
navBar[i].onmouseover=function() {
document.getElementById(ids[this.cellIndex]).style.visibility="visible";
};
navBar[i].onmouseout=function() {
document.getElementById(ids[this.cellIndex]).style.visibility="hidden";
-----Original Message-----
From: javascript-bounces at LaTech.edu
[mailto:javascript-bounces at LaTech.edu]On Behalf Of Roland Dong
Sent: Wednesday, June 22, 2005 1:31 PM
To: '[JavaScript List]'
Subject: RE: [Javascript] A loop this this script?
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 at LaTech.edu [mailto:javascript-bounces at LaTech.edu]
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 at advance.net> 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 at LaTech.edu
> 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 at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript
More information about the Javascript
mailing list