Develop Reference

Delaying Jquery CSS Animation using mousemove

I've been trying to put 10 seconds delay on this jquery css animation which is dependent on mousemove. I've tried unsuccesfully utilizing both .delay and .setInterval right before like so:
$(document).delay(10000).ready(function ()
However, they don't seem to be working for me. Its possible that I put it in the wrong place. I have listed below a the jsfiddle link with the code. If someone can help me out would be amazing.
JSFiddle: https://jsfiddle.net/oekhedr/eeh950b7/39/#&togetherjs=4Bsp9CVtlB
Thank you so much

You can add a (plain JavaScript) setTimeout in your mousemove event, like so:
setTimeout(function() {
// do something here, but it will only start after 10 seconds have passed
},10000);
.delay() only works with certain jQuery effects. Here is a fiddle using your code: https://jsfiddle.net/eeh950b7/42/

Does slideToggle have some kind of bug?

I made a slideToggle panel using jquery here you can see. But I guess I have found a bug. When you took and leave your mouse on it(on the div that has hover function) for a few times, the bug appears.
How can I fix this bug ?
thanks..
EDIT
I have just found this:
http://stackoverflow.com/questions/5266683/slidedown-and-slideup-looping-bug-in-firefox
That's what I was looking for.
Thanks..

add the .stop() method to prevent the animation from queuing. i.e. $("#will_slideDown").stop(true, true).slideToggle("normal");

What you are referring to is NOT any sort of a bug, not specific to any browser either.
In fact when you register a handler for a particular event, the handler by itself won't be capable of handling immediate firing of the event and therefore you'll end up with queuing of the fired events.
To stop such behavior, simply use jQuery's is() method with the filter :animated and return false in the handler.
if($('#will_slideDown').is(':animated')){
return false;
}
JSFiddle

jQuery toggle running twice

It seems that this code:
$(function(){
$('.show_hide_login').toggle(
function (){
alert('show');
$("div#fullpage").show();
$("div#loginbox").show();
},
function (){
alert('hide');
$("div#loginbox").hide();
$("div#fullpage").hide();
}
); });
Any idea on why it would be running twice when I click on either link (two, one is a div and one is an anchor)?

How many elements do you have with the .show_hide_login class? I'll guess you have two of those. In which case, $('.show_hide_login') result contains two elements, and toggle() is executed for each of them.

This isn't an answer to your question, but you could clean up your code a bit like so:
$(function() {
$('.show_hide_login').toggle(
function() {
alert('show');
$("#loginbox,#fullpage").show();
}, function() {
alert('hide');
$("#loginbox,#fullpage").hide();
});
});
As to your actual problem, I suspect Nick's guessed the culprit. Check out this demo to see the result of binding the same event twice: http://jsfiddle.net/9jPLv/
In addition to adding an alert prior to the binding of the toggle event, you could add in an unbind() and see if that solves the problem, like so:
$('.show_hide_login').unbind().toggle(
If that solves it, the toggle binding is definitely being run twice, so you'd just have to figure out why.

my answer is just a kind of checkpoint,i had the same issue but for different reason. I did include the script file in base page as well as child page. this resulted in toggle running twice if you have this problem check that the script is added only once.

It might be the same issue i was having.
so if you got an element with a script tag in it - then you move that containing element or wrap it with another tag in jquery - then the ready function in jquery is executed again - thus binding a second toggle function to your element.
as suggested $('.show_hide_login').unbind().toggle( is a workaround that does work, but better to try moving your javascript code to the head or bottom of the page.

Disable a function

I have a tooltip that I want to disable. It is from this site and is basically set and called as follows:
this.tooltip = function(){....}
$(document).ready(function(){
tooltip();
});
I don't want to unbind the hover or mouseover events since they are also tied to other effects. I have tried to disable without success as follows (at the bottom of the page):
$(document).ready(function(){
this.tooltip = function() {}
})
and
$(document).ready(function(){
function tooltip() {}
})
Am I missing something?

EDIT:
Heres a thought... try taking your override out of the ready statement. That way it should override the function definition before onReady is ever fired.
this.tooltip = function(){return false;};
That wont work because the script calls itself in an external file, thus if you try to make it a blank function before hand then it overrides it, and if you do it afterwards it has already run, so while you override it it has already added its event handlers to the stack. You could jsut not include the file on the pages where you dont want the tooltips.
An easy way to handle this is to make the event handlers named functions instead of anonymous, then you can easily unbine only those functions from the event stacks with $('a.tooltip').unbind('click', tooltipClick); Ofcourse the more thorough way is to refactor it in to your own plugin with remove option or something of that nature. Also there are several tooltip plugins for jQ out there and im sure at least one, if not all will allow for disabling.

You do not need to unbind the tooltip function (since its purpose is only to run once) but the anonymous functions that it adds to the events of some elements..
There is a way to do it, only if you can alter the original tooltip code to include a namespace when binding the anonymous functions..
some examples..
in the tooltip source code there is
$("a.tooltip").hover(function(e){...})
this should be
$("a.tooltip").bind('hover.tooltip',(function(e){...});
the .tooltip next to hover means that we have defined a namespace for this function and we can now unbind it with
$("a.tooltip").unbind('hover.tooltip');

Ok, I was able to do it with this function. But it seems kind of hackish and may not be the most elegant solution.
$(document).ready(function() {
$(".tooltip").mouseover(function(){ $('#tooltip').remove() });
});
I'll keep this question open in case any better ideas show up.

JQuery .click() event troubles

Here's a snippet of my code:
$(".item").click(function () {
alert("clicked!");
});
And I have (hypothetically; in actuality it's far more complicated) the following on my page:
<img src="1.jpg" />
However, when I click the image, I do not get an alert.
What is my mistake?

Is your selector actually matching anything? Try using the jQuery debug plugin (http://jquery.glyphix.com/) and doing this:
$(".item").debug().click(function() {
alert("clicked!");
});
.debug() will log whatever is matched to the Firebug console (you are using firebug, right? :-) ) without "breaking the chain" so you can use it inline like this.
If that turns out correctly, there may be some issue with the browser navigating to "#" before it can show your alert. Try using the .preventDefault() method on the event object to prevent this behavior:
$(".item").click(function(evt) {
evt.preventDefault();
alert("clicked!");
});

First question - are you adding the element to be clicked dynamically? If it is,
you should use the live event since that will take care dynamically created elements.
http://docs.jquery.com/Events/live#typefn

Use bind.
$(".item").bind("click", function(e) { ... });

modifying the selector?
$(".item > img")

I had this problem recently after adding a context menu jquery plugin. The pluging was binding to the click event of the body and then unbinding click event - it seemed to remove all bindings to click event for all elements. Maybe a suggestion to turn off plugins or check you're not unbinding click for a parent element yourself.

The code you have posted is correct, so I suspect there's something else going on that you haven't considered.
Firstly, if there was an error somewhere (even not in that exact bit of code) that might cause it to stop working. Put an alert just after this line to check that it runs.
Check that no other elements are catching the event and stopping it from propagating. This has bitten me before in the past... If there's anything else handling a click which has stopPropagation() or return false in it, that might be the problem.

One thing I've found (though only with links going elsewhere) is that adding return false; in may help, if it's just firing the anchor off instead of evaluating the alert. I can't really say why this would be the case, but that's a solution I found to a similar problem recently.