How to know Scroll event has finished with jQuery [duplicate] - javascript

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript: do an action after user is done scrolling
the Scroll event fires when the user starts scrolling the page, right? How to know if he is finished then? I want to call a function after the scrolling has done. Does anyone has any idea?
Thanks!
P.S. With jQuery please, but pure JS is also okay.

You can achieve this using setTimeout. you can change timeout (im using 100) value according to your requirement.
var timeoutId;
$(selector).scroll(function(){
if(timeoutId ){
clearTimeout(timeoutId );
}
timeoutId = setTimeout(function(){
// your code
}, 100);
});

Related

Crisp.chat how to register a callback event (javascript)

I am trying to hide/show an element when the chat gets opened or closed.
I don't understand how I should write the callback function that should trigger.
I want my element $('.customtrigger') to .hide() or .show().
Documentation from Crisp.chat:
Documentation
chat:opened - $crisp.push(["on", "chat:opened", callback]) - Handles the chatbox opened event (triggers your callback function)
I tried to contact Crisp.chat support but they could not provide examples and didn't understand my question?!
I think it's a simple jQuery question - I just don't understand how I should use it. hmm.
I found the solution to be quite simple :)
I can fire some code like this when the chat gets open
function openchat() {
$('.chattrigger').fadeOut( "slow" );
}
$crisp.push(["on", "chat:opened", openchat]);
And when the chat gets closed
function closechat() {
$('.chattrigger').fadeIn( "slow" );
}
$crisp.push(["on", "chat:closed", closechat])
Sorry for my question :)
Hopefully someone can use my answer

Load images before jQuery function ask for them [duplicate]

This question already has answers here:
Preloading images with jQuery
(20 answers)
Closed 6 years ago.
In my wordpress site i am using a quite simple jQuery piece of code:
jQuery(".first-sq").mouseenter(function(){
jQuery(".first-sq img").attr('srcset', '/wp-content/uploads/2017/01/MachineLearning_hoverx2.png');
})
jQuery(".first-sq").mouseleave(function(){
jQuery(".first-sq img").attr('srcset' , '/wp-content/uploads/2017/01/MachineLearningx2.png');
})
Now the code works but the problem is when mouseenter called it takes some time for the image to load, and you can see it being loaded. or in other words, the image revealed in portions. Is there a way to load all the images the document might use ,when document load, so when in situations like my mouseenter the image will show immediately and wont have to load?
You could achieve this by preload images. Try something like that:
$(document).ready(function () {
$('<img src="/wp-content/uploads/2017/01/MachineLearning_hoverx2.png">');
$('<img src="/wp-content/uploads/2017/01/MachineLearningx2.png">');
});
Copy of this
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
preload([
'img/img1.jpg'
]);

Jquery Animate is behaving abnormally when I upgrade to 1.11 [duplicate]

This question already has an answer here:
jQuery toggle animation doesn't work on new jQuery
(1 answer)
Closed 7 years ago.
Please Check http://jsfiddle.net/integerz/k19x8L1b/2/ Which has 1.7.x
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({right:'0px'});
}, function () {
$(this).parent().animate({right:'-280px'});
});
});
as jquery and http://jsfiddle.net/integerz/k19x8L1b/3/ has 1.11.x
The first one works well. But the second one is not. Can you explain what is the issue?
With Absolute DIV why there is a horizontal scroller for the negative right margin?
It seems the function is discontinued.
Need to do do click like given in this example.
jQuery toggle animation doesn't work on new jQuery
But not very sure why it was discontinued. Was very handy.

Custom cursor on click [duplicate]

This question already has answers here:
Using jQuery or just plain Javascript is it possible to change to a custom cursor?
(2 answers)
Closed 8 years ago.
I'm working on something and I want to change the cursor with a custom gif animation. The reason for this is the loading time. When I'm clicking a link it takes about 2 seconds to load and this is why i want to have a nice loadking cursor. Is there any way to change it with the onClick()?
Thanks for your time!
Edit: Because the loading occures between the 2 pages is it possible to change the loading mouse too?
You can do that like this;
jQuery(document).ready(function(){
jQuery('a.cursor_wait').click(function(){
jQuery('body').css('cursor', 'wait');
$(this).css('cursor', 'wait');
});
});
jsfiddle link

Setting a jQuery selector as parameter for a javascript-function [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use a variable in place of ID in jquery
I have the function called makeinvisible and one of the parameters is supposed to be a jQuery id selector for an image with id=testimage. JavaScript does not recognize it as such, hence the image does not become hidden.
function makeinvisible (imageid){
$("#imageid").css("visibility","hidden")
}
$(document).ready(
makeinvisible("testimage")
)
Any help appreciated!
The code as written is looking for an element with id=imageid.
Try:
function makeinvisible (imageid){
$("#" + imageid).css("visibility","hidden")
}
$(document).ready(
makeinvisible("testimage")
)
Edit: Your document.ready call is also incorrect. The way you have it written makeinvisible is being executed immediately, not on document ready. It needs to be:
$(document).ready(function(){ makeinvisible("testimage"); });

Categories