When the mouse hover on the navigation (cpanel). it shows the corresponding content under it. but i can’t click the link in it. is there a way to get it.i know it will be using setTimeout. but i don’t know how to do. thank you.
when i change the top value small.but under IE7 and IE6.i still can’t click the link in the showing content.
The function that you give to setTimeout contains the hide part. The only trouble is that setTimeout forgets what the this value is, so you can deal with that by assigning that=this beforehand, and then using the that variable from within the setTimeout function.
var that = this;
this.timer = setTimeout(function () {
Finally, when you hover you want to use clearTimeout on the this.timer value, which ends up canceling the setTimeout that may have earlier been set.
$("#nav ul li").hover(function() {
clearTimeout(this.timer);
...
Put all that together and you have a good and working solution.
[color="red"][s]var timer;[/s][/color] // Not needed as it's too global. Better is to place the timer variable as a property on the li element instead
$(document).ready(function(){
$("#nav ul li").hover(function() {
$(this).find(".sub-menu").show();
clearTimeout([color="blue"]timer[/color]); // Needs to refer to this.timer instead of just timer. Also, this maintenance piece of code should be first in the function
}, function() {
// you need to add some code here, see below
...
[color="red"][s]var[/s][/color] [color="blue"]timer[/color] = setTimeout(function () { // Remove the var and use this.timer instead
$([color="red"]this[/color]).find(".sub-menu").hide(); // major problem here.
// The timeout function has window scope, so the this keyword refers to the window instead
// You can fix that problem just before you use setTimeout, by assigning the this keyword to a local variable. That then allows the setTimeout function to access the needed scope
// which is most easily done by using var that = this
},300);
});
...
});
There’s one of the changes that you haven’t yet made, and that relates to the setTimeout function.
SetTimeout executes the function from a global scope, which means that the this keyword refers to the window object. That’s why we assign the this keyword to a variable, which we called that, which means that inside of the setTimeout function we should use that variable instead of this.
Inside of the setTimeout function, the this keyword cannot work properly.
That this variable needs to be removed, and replaced with the that variable instead.
Because stinky ugly horrible (getting the picture?) global variables are a bad thing.
It is far better for variables to restrict their scope. In this case, since the this keyword refers to the li element, and the timer is directly in regard to that li element, setting a property on that li element (with this.timer) allows it to easily be accessed by both functions, while at the same time causing less negative impacts than would global variables.
Yes, you set the property in the second, and make used of it in the first.