looping help?

G

Germking

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:height: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">&nbsp;</td></tr>
</table></div></div></body></html>
 
L

Lasse Reichstein Nielsen

Danny said:
So........ what do you need help with?
Click to expand...

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

Germking

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?
 
R

RobG

Germking said:
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.
Click to expand...

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">
Click to expand...

The language attribute is depreciated, type is required.

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)
Click to expand...

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
}
Click to expand...
[...]
 
G

Germking

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...
 
R

RobG

Germking said:
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)"...
Click to expand...

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;

...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...
Click to expand...

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).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with Visual Lightbox: Scripts 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Can anyone please help? HTML - two tables applying different styles 4
Help with my responsive home page 2
How to have two html audio players on one page? 0
Help with code 0
Having trouble centering contents of td ? 3

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 211

Forum statistics

Threads
473,774
Messages
2,569,596
Members
45,143
Latest member
SterlingLa

Latest Threads

Top