I have many people ask me how to do certain programming scripts in PHP, MySQL, Javascript, jQuery and CSS. (Not really :P) So, I am going to now share a lot of my programming to you! I will also be showcasing different code that other people have made.
I want to show you a good example of using setTimeout as well as give you a real world example of a menu.
First you must start by declaring a variable and depending on if you want it global or not setting the variable in the correct location.
var timeOut; timeOut = setTimeout(function() { // Add your wonderful code here }, 1000); // set to 1 second which is 1,000 milliseconds
As you can see, this will launch your code in 1 second.
Now let’s say you want to cancel the launch sequence for whatever reason, how do you expect to do that? Easy peasy! Just clearTimeout!
clearTimeout(timeOut);
You will want to add this code to a place to activate the clearing of the timeout.
So now, a live example. I answered a question on StackOverflow and I suggested this code as a solution to their problem. It worked for their menu. Here is an example code.
jsFiddle Example: http://jsfiddle.net/JoshuaPack/4bBPT/
HTML used for the menu:
<ul id="nav"> <li class="navcat"><a href="#">Home</a></li> <li class="navcat"><a href="#">Category 1</a> <ul> <li><a href="#">Testing</a></li> </ul> </li> <li class="navcat"><a href="#">Category 2</a> <ul> <li><a href="#">Testing</a></li> <li><a href="#">Testing</a></li> </ul> </li> <li class="navcat"><a href="#">Category 3</a> <ul> <li><a href="#">Testing</a></li> <li><a href="#">Testing</a></li> <li><a href="#">Testing</a></li> </ul> </li> </ul>
CSS used for the menu:
ul#nav { position:relative; float: left; width: 600px; margin: 0; padding: 0; list-style: none; background: black; } ul#nav li { display: inline; } ul#nav li a { float: left; font: bold 12px verdana,arial,tahoma,sans-serif; line-height: 40px; color: #fff; text-decoration: none; margin: auto; padding: 0 35px; } a.selected { color:Blue; } ul#nav .highlight a { color: #fff; text-decoration: none; text-shadow: 1px 1px 1px #330000; background: #1C436E; } ul#nav ul { display: none; } ul#nav li.highlight > ul { display: block; width: 600px; height: 35px; position: absolute; margin: 40px 0 0 0; background-color: #1C436E; } ul#nav li.highlight > ul li a { float: left; font: bold 12px verdana,arial,tahoma,sans-serif; line-height: 35px; color: #fff; text-decoration: none; margin: 0; padding: 2 30px 0 0; background-color: #1C436E; }
Jquery used for the menu:
$(document).ready(function(){ var clearli; $(".navcat").hover(function() { clearTimeout(clearli); $("ul#nav li").removeClass('highlight'); $(this).addClass('highlight'); }, function() { var getthis = $(this); clearli = setTimeout(function() { $(getthis).removeClass('highlight'); }, 1000); }); });
Have any questions? Feel free to leave them below.
~Joshua
PS. For more exciting programming, music, movies and all the stuff I think is cool, follow me on twitter!