looping help?

07-26-2005

i'm trying to make a menu that will sit on the right of the
screen...and when you scroll over it...the submenu should slide out to
the right...

i've named the layers for each of the
submenus...menu1...menu2...menu3...

what i want to do...
....is reference the function 'show()' when moving over each menu
item...to say that this is menu item number 1...show submenu number
1...
....my code is below...
....if someone has any bright ideas...
....please feel free to share them with me...
....thanks.

<html><head>
<script language="javascript">
var i=0
var intHide
var intShow
var speed=3
var a=0
function showmenu()
{
clearInterval(intHide)
intShow=setInterval("show()",10)
}
function hidemenu()
{
clearInterval(intShow)
intHide=setInterval("hide()",10)
}
function show(a)
{
if (i<117)
{
i=i+speed
document.getElementById('menu'+a).style.left=i
}
}
function hide(a)
{
if (i>0)
{
i=i-speed
document.getElementById('menu'+a).style.left=i
}
}
</script></head>
<body leftmargin="0" topmargin="0" bgcolor=#ffffff>
<div id="all"
style="position:relative;left:5;top:5;width:800:he ight:600;">

<div id="menu1" class="menu1"
style="position:absolute;left:0;top:120;width:100; ">
<table width="100" cellspacing="1" cellpadding="0" bgcolor=#000000
onmouseover="showmenu()" onmouseout="hidemenu()">
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu1</font></a></td></tr>
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu2</font></a></td></tr>
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu3</font></a></td></tr>
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu4</font></a></td></tr>
</table>
</div>

<div id="menu2" class="menu2"
style="position:absolute;left:0;top:135;width:100; ">
<table width="100" cellspacing="1" cellpadding="0" bgcolor=#000000
onmouseover="showmenu()" onmouseout="hidemenu()">
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu1</font></a></td></tr>
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu2</font></a></td></tr>
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu3</font></a></td></tr>
</table>
</div>

<div id="menu3" class="menu3"
style="position:absolute;left:0;top:150;width:100; ">
<table width="100" cellspacing="1" cellpadding="0" bgcolor=#000000
onmouseover="showmenu()" onmouseout="hidemenu()">
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu1</font></a></td></tr>
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu2</font></a></td></tr>
<tr><td bgcolor=#000066 align="center" height="15"><a href=#><font
color=#cccccc>SubMenu3</font></a></td></tr>
</table>
</div>

<div id="nav" class="nav"
style="position:absolute;left:0;top:120;width:120; ">
<table width="120" cellspacing="1" cellpadding="0" bgcolor=#000000>
<tr><td bgcolor=#ffffff align="center" height="15"
onmouseover="show(1);showmenu()" onmouseout="hidemenu()"><a
href=#>Menu1</a></font></td></tr>
<tr><td bgcolor=#ffffff align="center" height="15"
onmouseover="show(2);showmenu()" onmouseout="hidemenu()"><a
href=#>Menu2</a></td></tr>
<tr><td bgcolor=#ffffff align="center" height="15"
onmouseover="show(3);showmenu()" onmouseout="hidemenu()"><a
href=#>Menu3</a></td></tr>
</table>
<table width="120" cellspacing="0" cellpadding="0">
<tr><td bgcolor=#ffffff align="center" height="70"> </td></tr>
</table></div></div></body></html>

07-28-2005

Danny <> writes:

> So........ what do you need help with?

*please* quote some of the message you reply to. Not all of it, ofcourse,
but enough to give your reply a context. In this case, at least the
attribution would have made it obvious *who* you were asking this.

/L
--
Lasse Reichstein Nielsen -
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

07-28-2005

if you paste the script into notepad...and save it as an html
file...you will see that it doesn't work...

i need help with making it work...

function show(a)
{
if (i<117)
{
i=i+speed
document.getElementById('menu'*+a).style.left=i
}

}

if you look at the 'a' in show(a)...
....i got it wrong somewhere along the line...
....i want to reference menu1, menu2 and menu3 in the function...
....so that all i have to do...is make a reference to 1...and 1's
submenu should show...
....but i don't know how to do this...
....do i need to make a loop of some sort?

07-28-2005

Germking wrote:
> i'm trying to make a menu that will sit on the right of the
> screen...and when you scroll over it...the submenu should slide out to
> the right...
>
> i've named the layers for each of the
> submenus...menu1...menu2...menu3...
>
> what i want to do...
> ...is reference the function 'show()' when moving over each menu
> item...to say that this is menu item number 1...show submenu number
> 1...
> ...my code is below...
> ...if someone has any bright ideas...
> ...please feel free to share them with me...
> ...thanks.

I take it you want to know why it doesn't work? It just sits there
generating errors whenever the cursor is over a menu item.

>
> <html><head>
> <script language="javascript">

The language attribute is depreciated, type is required.

<script type="text/javascript">

> var i=0
> var intHide
> var intShow
> var speed=3
> var a=0
> function showmenu()
> {
> clearInterval(intHide)
> intShow=setInterval("show()",10)
> }
> function hidemenu()
> {
> clearInterval(intShow)
> intHide=setInterval("hide()",10)
> }
> function show(a)

Here your function declares a local variable 'a' which is distinct
from the global 'a' you created above. You don't pass the function a
value to use for 'a' and don't give it one internally, so it is undefined.

The initial value for your global 'a' is 0, you look for 'menu' + a,
but there is no element with id = menu0, so even if the value of
global a gets through, it's of no use.

Nothing much happens after that because your function has no element
reference to do anything with.

Over to you...

> {
> if (i<117)
> {
> i=i+speed
> document.getElementById('menu'+a).style.left=i
> }
[...]

--
Rob

07-28-2005

ok...
....i understand that i'm not referencing 'a' internally correctly...
....but i don't understand how to reference it properly...
....is it possible...that when the mouse goes over the menu...
....to say...onmouseover="show(1)"...
....or does this have to be in the form..."show(true,false,false)"...

....do i have to reference each item individually?
....or can i make a loop that makes it easier and quicker to reference
each menu item?
....if so...how do i make this loop?

my main concern with all of this is that...
....when i've got 15/20 menu items...each with 4/5 submenu items...and
so on...
....the filesize of the file is going to sky rocket...not to
mention...confusion will reign...
....and the menu will be a little slow for my liking...

07-29-2005

Germking wrote:
> ok...
> ...i understand that i'm not referencing 'a' internally correctly...
> ...but i don't understand how to reference it properly...
> ...is it possible...that when the mouse goes over the menu...
> ...to say...onmouseover="show(1)"...

You can pass a reference to the element to the function from the event:

function showHide ( el ) {
...
}

<div ...onmouseover="showHide(this);" ...>

or if a function reference is added to an element's intrinsic event
handler by script (greatly reducing page source code) 'this' inside the
function will reference the element that called it.

<div id="ex" style="width: 150px; height: 150px;
border: 1px solid blue;"></div>

<script type="text/javascript">

function showId(){
alert( (this.id)? this.id : 'no id' );
}

document.getElementById('ex').onmouseover = showId;

</script>

> ...or does this have to be in the form..."show(true,false,false)"...
>
> ...do i have to reference each item individually?
> ...or can i make a loop that makes it easier and quicker to reference
> each menu item?
> ...if so...how do i make this loop?
>
> my main concern with all of this is that...
> ...when i've got 15/20 menu items...each with 4/5 submenu items...and
> so on...
> ...the filesize of the file is going to sky rocket...not to
> mention...confusion will reign...
> ...and the menu will be a little slow for my liking...
>

Start with a menu framework that works:

<URL:http://www.mattkruse.com/javascript/mktree/>

<URL:http://www.quirksmode.org/js/display.html>

and modify it to suit (primarily through CSS).

--
Rob

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
looping in array vs looping in a dic	giuseppe.amatulli@gmail.com	Python	5	09-20-2012 11:58 PM
Perl telnet looping problem	CJ	Perl	0	03-21-2005 09:06 PM
looping/incrementing problem...	Mothra	Perl	3	12-10-2003 02:01 AM
Looping through rows in a DataGrid	Diva	ASP .Net	1	07-24-2003 06:10 PM
Looping through all the form fields in the code behind ?	Aemca	ASP .Net	1	07-22-2003 08:31 AM