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
Related
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'
]);
This question already has answers here:
How to run a function when the page is loaded?
(11 answers)
Closed 6 years ago.
I want to run this script on pageload or after all the elements are loaded.
JavaScript
<script type="text/javascript">
function backgroundload (){
$(".portfolio-background-color")
var color = /#[0-9\A-F]+/.exec($(this).html())[0];
$(this).css('background', color)
}
window.onload = backgroundload;
</script>
i'm new to js please check if my code is okay and is it the correct way to load the js
All Javascript runs on page load. If what you mean is that you want it to run after all the elements in the page have been initialized, there are several ways:
window.onload
document.onload
body.onload
$(document).ready
There are more in-depth explanations of the support for the first three, and the differences between them, here. Documentation for $(document).ready is here.
However, in my experience, the easiest way to ensure that a script runs after all synchronously-loaded content is simply to place the <script> element at the bottom of the <body>.
This question already has answers here:
Why does jsfiddle throw error that function is not defined? [duplicate]
(1 answer)
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 6 years ago.
I'm trying to run a basic JavaScript function from an external file but I'm getting inconsistent results. Basically, I can't get a button's "onclick" event to fire when I put the script in an external JS page. I can get it work in CodePen:
CodePen
nonsense code
but NOT in JSFiddle:
JS Fiddle Examlple
I can always get it work when the script is part of the HTML page but I don't want to do that. Can you help? Thanks!
jsfiddle puts the javascript code in its own context:
//<![CDATA[
window.onload=function(){
function clickFunction()
{
alert("this is working");
}
}//]]>
But codepen puts the js in the global scope.
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.
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);
});