Help about javascript! please

Well guys i have leaning html and CSS but now i have some problem i have the code for making a drop down menu! the problem is that i want to close my drop down menu after ten seconds after the mouse the moved away! Here:

Code

<STYLE TYPE="text/css">

#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }

A:link {color:black; text-decoration:none}
A:hover {color:blue; text-decoration:underline}

</STYLE>
<TABLE BORDER="0">

<TD VALIGN="top" Width="200">

<SPAN onMouseOver="document.all.menu1.style.display = 'block'"
onMouseOut="document.all.menu1.style.display = 'block'">

Goodies Tutorials<BR>

</SPAN>

<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">

<A HREF="/tutors/frame1.html">Frames</A><BR>
<A HREF="/tutors/tbl.html">Tables</A><BR>
<A HREF="/beyond/dhtml.html">DHTML</A><BR>
<A HREF="/tutors/forms.html">Forms</A>

</SPAN>

</TD>
</TABLE>

Well yes its a code from the website i know css and i would design it later but i only want to remove the on click function and the function which closes or make the menu display none after 10 secs i have trying multiple code from the site but no luck so far! so please if anyone is availabe and give me the final code which would close it after 10 secs Would be great!

And please don't spam i had no idea if this is the right section! So please dont spam and you can help me and then post!

Thanks in Advance!

On the mouseleave event set a "setTimeout."

For instance, if your Javascript function for hiding the element was called HideMenu(), you would use

setTimeout(HideMenu, 10000);

But you can do this completely with CSS using transitions

Originally Posted by rileyjstrickland

transition hmm well i think my course doesn't have transition Dawm i need to check some other site then. thanks would recommend me site to learn about this site thanks!

P.S I was trying now i know i had very small mistake every time i tried I had a small mistake

, I tried a hundred times and the same mistake

i am screwed.

Originally Posted by rileyjstrickland

Thank you for all your help can you tell why is this code not working

Code

td inside tr (tablerow) ?

Originally Posted by Unknown-Hacker

<table border="0">

<td valign="top" width="200">
<span onmouseover="document.all.menu1.style.display = 'block'"
onmouseout= "setTimeout(HideMenu(),3000)";>

Goodies Tutorials<br />

</span>
<script>
function HideMenu()
document.all.menu1.style.display = 'none'
</script>
<span id="menu1">
</span>

</td>
</table>

vs.

<table border="0">
<tr>
<td valign="top" width="200">
<span onmouseover="document.all.menu1.style.display = 'block'"
onmouseout= "setInterval(HideMenu(),3000)";>

Goodies Tutorials<br />

</span>
<script>
function HideMenu()
document.all.menu1.style.display = 'none'
</script>
<span id="menu1">
</span>

</td>
</tr>
</table>

Maybe it's nothing, and I'm not 100% sure, but shouldn't < td >'s be inside a < tr > </ tr> ('table row') ? Maybe that would cause it to display incorrectly in some browser(s)?

2 functions, 1 cup

w3schools. com JavaScript Timing Events

The setInterval() Method

The setInterval() method will wait a specified number of milliseconds, and then execute a specified function, and it will continue to execute the function, once at every given time-interval.

The setTimeout() Method

The setTimeout() method will wait the specified number of milliseconds, and then execute the specified function.

The first parameter of setTimeout() should be a function.

The second parameter indicates how many milliseconds, from now, you want to execute the first parameter.

^^. ie. only runs the function once. -ab

^^ riley told you the correct one. *maybe you just tried the other and forgot to switch it back. It might work the same, but the correct* way (and less cpu intensive) would be to use 'setTimeout' as riley suggested. At least that's how I understand it based on reading those descriptions.

Can you describe what happens more please? Does the < span > with "Goodies Tutorials" show up when the page first loads, and doesn't go away, or __?

Idk javascript, just making educated guesses : )

edit, one more idea: missing semi-colons?

Was checking for spelling mistakes and thought of one more thing (though could be wrong)
- you're missing semi-colons in your < style > declarations?

w3school .com again http://www.w3schools.com/tags/tag_style.asp

Example Use of the <style> element in an HTML document:
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>

-------
yours

#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:black; text-decoration:none}
A:hover {color:blue; text-decoration:underline}

vs.

#menu1 { display : none; }
#menu2 { display : none; }
#menu3 { display : none; }
A:link {color:black; text-decoration:none;}
A:hover {color:blue; text-decoration:underline;}

and,
Do < style > tags have to be defined inside the < head > < /head> tags??

Originally Posted by abuckau907

td inside tr (tablerow) ?

vs.

Maybe it's nothing, and I'm not 100% sure, but shouldn't < td >'s be inside a < tr > </ tr> ('table row') ? Maybe that would cause it to display incorrectly in some browser(s)?

2 functions, 1 cup

w3schools. com JavaScript Timing Events

^^ riley told you the correct one. *maybe you just tried the other and forgot to switch it back. It might work the same, but the correct* way (and less cpu intensive) would be to use 'setTimeout' as riley suggested. At least that's how I understand it based on reading those descriptions.

Can you describe what happens more please? Does the < span > with "Goodies Tutorials" show up when the page first loads, and doesn't go away, or __?

Idk javascript, just making educated guesses : )

edit, one more idea: missing semi-colons?

Was checking for spelling mistakes and thought of one more thing (though could be wrong)
- you're missing semi-colons in your < style > declarations?

w3school .com again HTML style tag

-------
yours

vs.

and,
Do < style > tags have to be defined inside the < head > < /head> tags??

Well brother i really appreciate what ever you said, but the only problem i have is that my drop down menu doesn't close after 3 secs!

misread: removed. update in a moment.

well, took a bit of trying, but I think i found the problem... (I'm on FireFox, could depend on browser I guess)

The first argument to the setInterval function needs to be surrounded in single or double quotes? (dbl quotes wouldn't work in this case)

...the problem I kept having was that the function was called instantly; it wouldn't wait 3 seconds. Adding the single quotes seems to fix that problem for me.

full html

<html>
<head><title>Test js</title>
</head>
<body>

<style type="text/css">
#menu1 { display : none}
#menu2 { display : none}
#menu3 { display : none}

A:link {color:black; text-decoration:none}
A:hover {color:blue; text-decoration:underline}

</style>
<table border="0">

<td valign="top" width="200">

<span onmouseover="document.all.menu1.style.display = 'block'"
onmouseout="setTimeout('HideMenu()',3000)">

Goodies Tutorials<br />

</span>
<script>
function HideMenu()
document.all.menu1.style.display = 'none'
</script>
<span id="menu1">

<a href="/tutors/frame1.html">Frames</a><br />
<a href="/tutors/tbl.html">Tables</a><br />
<a href="/beyond/dhtml.html">DHTML</a><br />
<a href="/tutors/forms.html">Forms</a>

</span>

</td>
</table>

</body>
</html>

//I think you should use ;'s at the end of lines, but for single/final lines may not be required. without them it looks a little off to me, personally.

Originally Posted by abuckau907

misread: removed. update in a moment.

well, took a bit of trying, but I think i found the problem... (I'm on FireFox, could depend on browser I guess)

The first argument to the setInterval function must be surrounded in single or double quotes?

I call alert() instead of changing .display because I'm 99.9% sure I'll *know* when the function actually executes : )

...the problem I kept having was that the function was called instantly, it wouldn't wait 3 seconds. Adding the single quotes seems to fix it for me.

Changed code back to hiding the menu..

full html

^^working for me.

Well bro i really appreciate it but sadly its not working the menu doesn't close after 3 secs

P.S where are you testing your codes!

I use chrome and i am using my blog to test them!

Problem solved guys I loved i made it after trying and searching like a fuck!

i will paste the working code here: Sooner! Thank you all for helping me!

I got a heart-attack of my life when i made it.

opened a new .txt file and saved it as .html. Then pasted your code in and added < html > <body> ... < / body> </ html>. Saved the file and previewed in browser : )

The menu displayed correctly when I hover over "Goodies Tutorials", but they also dissapeared instantly when I moved the mouse away. After trying a lot of basic language syntax stuff, I looked up on w3schools (from the link I posted before: JavaScript Timing Events) and saw that the function name is surrounded by double quotes. Since that line of code was already surrounded in double quotes, I used single quotes to surround the argument.
--maybe you're not actually updating the file(s) on your server? Add some random text (maybe in the < title > </ title>) so you *know* the html code has been changed.

Sorry, idk, works for me. Change the ".style = 'none'" to alert("closing menu"); and ..tweek the code until you get the msgbox on mouseout. That's what I did, and once I got the msg box to show up (I didn't trust the .display = none to 100% to hide the element, but I trust alert() to pop up a msgbox), I changed it back to hiding the menu. Maybe because you're missing semi-colons or the { } 's around the HideMenu function? I'm not sure where the wiggle room is in syntax, sry.

Originally Posted by abuckau907

Well you tested it on brower and i was testing on live blog i would edit the code and then enter the code with change i made and then refresh my blog and check whether it is working or not!

So well guys i just wanted to post my code here so incase if you have the problem and are unable to solve. So here:

working code

onmouseout= "HideMenu()";>

Goodies Tutorials<br />

</span>

<script>
function HideMenu()
{
setInterval(function(){document.all.menu1.style.di splay = 'none'},3000);
}
</script>

VS
Not working code:

Not working code

onmouseout= "setInterval(HideMenu(),3000)";>

Goodies Tutorials<br />

</span>
<script>
function HideMenu()
document.all.menu1.style.display = 'none'
</script>

So the stuff i learned from here was Setting time interval or setting timer in the onmouseout function is really a bad idea. Instead i gave it my HideMenu() and made the onmouseout function go to the funtion HideMenu() and and just below it you would see that in <script> tags you will see that the function HideMenu() is written! And setting time interval in the function is a good idea! And make sure there are {} brackets and then write you function you want!

Originally Posted by Unknown-Hacker

Well you tested it on brower and i was testing on live blog i would edit the code and then enter the code with change i made and then refresh my blog and check whether it is working or not!

uh..we both tested it on a browser! ...yours just happened to be getting the page from a server, where mine is saved on desktop. Your browser is still interpreting the exact same page code as mine.

Glad it's working.

--setTimeout vs setInterval, but not worth arguing about.

Help about javascript! please

Post a Reply

Similar Threads

Tags for this Thread