PDA

Click to See Complete Forum and Search --> : Javascript problems

Dark Dragon
08-18-2003, 01:58 PM
I am experimenting with some Javascript code, more precisely, a code to have a horizontally sliding menu.
Here is the code I copied, pasted and edited:

<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}

table.nav
{
background:black;
position:relative;
font:bold 80%;
top:0;
left:-135;
}

</style>
<script type="text/javascript">
var i=-135
var c=0
var intHide
var speed=15

function show_hide_menu()
{
if (c==0)
{
c=1
clearInterval(intHide)
intShow=setInterval("show()",10)
}
else
{
c=0
clearInterval(intShow)
intHide=setInterval("hide()",10)
}
}

function show()
{
if (i<-12)
{
i=i+speed
myMenu.style.left=i
}
}

function hide()
{
if (i>-135)
{
i=i-speed
myMenu.style.left=i
}
}
</script>
</head>
<body>

<table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">
<tr><td class="menu"><a href="/default.asp">HOME</a></td>
<td rowspan="5" align="center" bgcolor="#FF8080">M<br>E<br>N<br>U</td></tr>
<tr><td class="menu"><a href="/asp/default.asp">Tips</a></td></tr>
<tr><td class="menu"><a href="/js/default.asp">Tutorials</a></td></tr>
<tr><td class="menu"><a href="default.asp">About</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">Artwork</a></td></tr>
</table>


</body>
</html>

The difficulty lies in the fact that it doesn't seem to want to function with IE, or shall I say, the menu won't slide like it is supposed to even though the site where I copied the code from worked flawlessly. So I am curious if I left something out or does something else need to be "tweaked". This is really the first time I used Javascript so I am not really all that familiar with it :D
David Harrison
08-18-2003, 04:15 PM
The problem seems to be that you've not got anything to trigger the slide, so if you wanted the menu to slide in when the page loads put this:

<body onload="show_hide_menu();">

Or if you want the menu to (dis)appear onmouseover/out of a link then put this:

<a href="#" onmouseover="show_hide_menu();return true;" onmouseout="show_hide_menu();return true;">Show/Hide Menu</a>
Dark Dragon
08-19-2003, 10:38 AM
Sorry for the delayed response...was way so hot yesterday. Nearly melted into a puddle of goo. :D

Well..I copied and pasted the entire code from a resource site and copied it into my HTML document. According to the debugger in DreamWeaver..it mentions it 'expected" an expression after the HTML in the Javascript.
But, the code you mrentioned does seem to be in the code hwever..

<table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">

Doesn't this above code do just that? I am so confused...could you tell me why it worked on the site it was copied from but when I pasted it into my own site (with a few modifications) it doesn't wanna behave? Anyways..thanks for the help..umm...where do I put that piece of code though? :p

I forgot to mention that in this sliding menu..there is a bar on the side of the page that says "Menu" but when you click on it then it slides out revealing the links..don't know if that will help
David Harrison
08-19-2003, 03:44 PM
Oh sorry I didn't see this line:

<table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">

Well I copied and pasted the code into a page source and it worked as it should do. It may be that it doesn't work on your particular version of IE.
I'm using IE 6 for Win 98 SE. How about you?
Dark Dragon
08-19-2003, 05:11 PM
Yes..I am using IE6 on Win 98 SE as well.

I copied and pasted the code into DreamWeaver using its Javascript function thingee so I am unsure as to WHY it won't work..totally bizarre :confused:
pyro
08-19-2003, 05:16 PM
Worked fine for me in IE, as well (Mozilla is a different story). Try renaming this with a .htm extention
David Harrison
08-19-2003, 05:16 PM
Maybe it's Dreamweaver somehow messing up your code. Save the attachment as a .html file and see if it works then.
pyro
08-19-2003, 05:17 PM
lol... :D
Dark Dragon
08-19-2003, 05:26 PM
Thanks Pyro..I am definetly gonna try that!:D
pyro
08-19-2003, 05:35 PM
Yep, and let us know if it works for you...
Dark Dragon
08-19-2003, 05:40 PM
Cool beans!! :D
I copied and pasted the text you gave me and it worked perfectly...it seems the JavaScript tag was creating problems....thanks Pyro...You're one sharp guy!

And Thank You to you too LavaLamp!!!
;)
Dark Dragon
08-19-2003, 05:53 PM
Umm..why does the extension matter though? Since it is JavaScript how does the HTML extension differ from HTM??
pyro
08-19-2003, 05:56 PM
It doesn't .htm and .html are pretty much synonymous.

Anyway, I was very happy to help... :)
Dark Dragon
08-19-2003, 06:11 PM
Try renaming this with a .htm extention

Well, since you had recommended it to me I thought that there might be a difference in perhaps in the way browsers read them.
..but when I look back, Lavalamp was correct too when he said DW was messing up the code..or more precisely it was the DW generated JavaScript tags.

I made a new document, went into code view and just pasted it in...naturally DW highlighted the "faulty" tags but when I tested it it worked smoothly so from now on I will paste the code directly into my page. I am pleased!!!!:D
David Harrison
08-19-2003, 06:13 PM
Happy to help. :)