We Keep Coding

standard function works fine but if delegated - does not [duplicate]

This question already has an answer here:
How to delegate `hover()` function by using `on()` [duplicate]
(1 answer)
Closed 3 years ago.
this works fine:
$('.rollwrap').hover(function() {
$(this).find('.imgrollb').animate({'bottom' : 0});
}, function() {
$(this).find('.imgrollb').animate({'bottom' : '100%'});
}
);
if rollwrap and its content is added dinamically I need to delegate the function but this doesn't work:
$(document).on('hover', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': 0});
}, function(){
$(this).find('.imgrollb').animate({'bottom': '100%'});
}
);
How to get the same funcionality with dinamic content?

The two functions passed to .hover are mouseenter and mouseleave handlers, so you can delegate with those events instead:
$(document).on('mouseenter', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': 0});
});
$(document).on('mouseleave', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': '100%'});
});

execute javascript function after 5 seconds [duplicate]

This question already has answers here:
Javascript: Call a function after specific time period
(6 answers)
Closed 7 years ago.
I have this function, which I would like to be executed after 5 seconds:
$(document).ready(function() {
$("#signInButton").trigger('click');
});
Thank you

Use setTimeout() function:
$(document).ready(function() {
setTimeout(function() {
$("#signInButton").trigger('click');
}, 5000);
});

Use setTimeout()
$(document).ready(function() {
setTimeout(function() {
$("#signInButton").trigger('click');
}, 5000); // for 5 second delay
});

Something like this ?
$(document).ready(function() {
setTimeout(function() {
$("#signInButton").trigger('click');
}, 5000);
$("#signInButton").click(function(){
alert("I'm clicked!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="signInButton" value="Click Me" />
Learn more about window's setTimeOut method

$(document).ready(function() {
setTimeout(function() {
$("#signInButton").trigger('click');
}, 5000);
});

Using stop() with jquery to launch a function only one time

I don't understand the use of stop() element in jquery.
In this example, i try to open a div when the user launch the myfunction function (for example by clicking on a trigger)
But if you click several time, #mydiv desapears anyway, without waiting 3 seconds, because it close 3 second after your first click.
function myfunction(hello)
{
$( "#mycontener" ).html( hello );
$( "#mydiv" ).stop( true, true ).slideDown( 250, function() {
setTimeout(function() {
$("#mydiv").slideUp( 250 );
}, 3000);
});
};
Is it clear enough ?
Thanks

You will need to clear the timeout to prevent it from happening on future calls. Something like this:
(function () {
var handle;
function myfunction(hello) {
clearTimeout(handle);
$("#mycontener").html(hello);
$("#mydiv").stop(true, true).slideDown(250, function () {
handle = setTimeout(function () {
$("#mydiv").slideUp(250);
}, 3000);
});
}
window.myfunction = myfunction;
})();

Delay of a few seconds before display:none [duplicate]

This question already has answers here:
Hide div after a few seconds
(9 answers)
Closed 8 years ago.
I don't know how to achieve that display: none works not immediately.
I need #popUpBox to disappear after a few seconds.
$(document).bind("mousedown", function(){
$('#popUpBox').css({'display':'none'});
jQuery(function($) {
var $txt = '';
$('.selectiontext').bind("mouseup", function(e){
if (window.getSelection){
$txt = window.getSelection();
}
else if (document.getSelection){
$txt = document.getSelection();
}
else if (document.selection){
$txt = document.selection.createRange().text;
}
else return;
if ($txt!=''){
$('#popUpBox').css({'display':'block', 'left':e.pageX+5+'px', 'top':e.pageY+0+'px'});
}
});
$(document).bind("mousedown", function(){
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, 2000);
});
Unfortunately, when i select text, now always #popUpBox disappears and i need only when selection is disabled

The following code will hide the div after 2 seconds
$("#popUpBox").delay(2000).hide();
If you want animation, you can use fadeOut method as well
$("#popUpBox").delay(2000).fadeOut('fast');

Try to use the setTimeout function.
$(document).bind("mousedown", function(){
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, *time you want(int)*);
});
Edit : To your new question
Add a if statement when selection is disabled. Here :
$(document).bind("mousedown", function(){
*if statement*
setTimeout(function() { (...)
Because it's bound to the entire document, it will always hide the box without any condition.

Try this if you want the function to trigger a few seconds after the mousedown event:
$(document).bind("mousedown", function(){
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, 5000);
});
Readup on setTimeout here and here. Basically, setTimeout() allows you to pass a function and then an interval (in milliseconds) to wait before executing that function.
Edit (for update): To only have this happen when there is no selection, try:
$(document).bind("mousedown", function(){
if (!window.getSelection) {
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, 5000);
}
});

Can I have an event that says: [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
jQuery: Detecting click-and-hold
I am looking for some way to have an img, and when I hold down the image for maybe 1 or 2 seconds, jQuery changes the CSS to "display","block"... I have looked and looked and could not find what I needed. Please give the best answer possible. I'm making a finger scan app...:) Here is the code I have right now:
HTML:
<body>
<img id="testlaser" src="images/Laser.gif">
<div class="fingerprint">
</div>
<img class="access_denied" src="images/AccessDenied.jpg">
</body>
CSS:
<style>
body{-webkit-user-select: none;overflow:hidden;scrolling:no;}
#testlaser{height:100%;width:100%;position:absolute;display:none;}
.fingerprint{display:block;position:absolute;background-image:url(images/fingerprint.gif);background-repeat:no-repeat;background-position:center center;text-align:center;width:100%;height:90%}
.access_denied{display:none;background-position:center center;width:100%;height:100%;}
.access_granted{display:none;background-position:center center;width:100%;height:100%;}
</style>
Java Script:
<script>
$(".fingerprint").click('click mousedown', function(){
$("#testlaser").css("display","block")
$(".fingerprint").css("display","block")
setTimeout(function(){
$("#testlaser").css("display","none")
$(".fingerprint").css("display","none")
$(".access_denied").css("display","block")
},10000);
});
$(".access_denied").click(function(){
$("#testlaser").css("display","none")
$(".fingerprint").css("display","block")
$(".access_denied").css("display","none")
});
</script>

Add a "mousedown" handler to your image which sets a trigger function after two seconds and a "mouseup" function which clears the timeout function. For example:
(function() {
var foo=$('#foo'), tf=null;
foo.mousedown(function() {
tf = setTimeout(function() {
alert('Two seconds!');
}, 2000);
});
foo.mouseup(function() {
clearTimeout(tf);
});
})();
Here is a working jsFiddle demo to boot.

If you think that you will be doing this a lot you can make a plugin (okay.. so I was intrigued by this).
Here's the calling code:
$('.fingerprint').delayedReaction(function() {
$(".fingerprint").hide();
$(".access_denied").show();
});
$(".access_denied").click(function() {
$(".fingerprint").show();
$(".access_denied").hide();
});
Here's the plugin:
(function($){
$.fn.delayedReaction = function(successFunction, options) {
var settings = $.extend({}, $.fn.delayedReaction.defaults, options);
this.each(function() {
var timeout,
myFunction = successFunction,
$this = $(this);
var run_func = function() {
myFunction.apply($this)
};
$this.bind(settings.startEvent, function() {
timeout = setTimeout(run_func, settings.delayFor);
});
$this.bind(settings.stopEvent, function() {
clearTimeout(timeout);
timeout = null;
});
});
return this;
}
$.fn.delayedReaction.defaults = {
startEvent: 'mousedown',
stopEvent: 'mouseup mouseleave',
delayFor: 3000
}
})(jQuery);
See it in action: http://jsfiddle.net/natedavisolds/Nb7zQ/1/