I have
<script>
function myfunc(){
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}
$(document).ready(function(){
$('.mybtn').on('click',function(){
$('#mydiv').toggleClass('newclass');
});
});
</script>
How to execute myfunc() in 5000ms after toggleClass was executed? Tried several ways but with no luck.
Thank you.
use setTimeout()
function myfunc() {
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}
$(document).ready(function () {
$('.mybtn').on('click', function () {
$('#mydiv').toggleClass('newclass');
setTimeout(myfunc, 5000)
});
});
Try this...
function myfunc(){
alert("show this alert in 5000ms after toggleClass executed");
//some code goes here
}
$(document).ready(function(){
$('.mybtn').on('click',function(){
$('#mydiv').toggleClass('newclass').delay(5000).queue(myfunc);
});
});
JSFIDDLE DEMO
Use settimeout function
function myfunc() {
alert("show this alert in 5000ms after toggleClass executed")
//some code goes here
}
$(document).ready(function () {
$('.mybtn').on('click', function () {
$('#mydiv').toggleClass('newclass');
setTimeout(myfunc, 5000)
});
});
You can have a callback function like this
$('#mydiv').toggleClass('newclass', 5000).promise().done(function(){alert("done")});
Here is a working demo
I would do the $("#mydiv").toggleClass('newclass') in a separate event.
For instance <button class="mybtn" onmousedown="$('#mydiv').toggleClass('newclass')" onclick="myfunc();">Fast Toggle</button>
If you toggle onmousedown the page will render with the toggle before the click event fires.
Related
I have an issue with my setInterval(), my code is:
var1=0;
function addNum(){
var1++;
$('.number').text(var1);
}
$(function() {
$('.number').text(var1);
jQuery('#box').on('touchstart touchmove', function(e) {
mytimer = setInterval(function(){ addNum() }, 500);
});
jQuery('#box').on('touchend touchcancel', function(e) {
alert('lift up');
window.clearInterval(100);
});
});
I can't clearInterval()
How can I use the same setInterval for the next time?
Somebody knows, how to reuse it?
BR,
Christian
Change your clear function to window.clearInterval(mytimer);
Can you select an image based on id using jQuery? Because when I tried it, it didn't work. Is this the correct way? Thanks
$(document).ready(function () {
$("#imageID").click(function (){
$("#imageID").addClass("className");
});
});
This could be happening because the element is not inside the DOM when you bind the event. Then you could try to bind with jquery using on function and binding the event to body for instance:
$(document).ready(function () {
$("body").on("click", "#imageID", function (){
$(e.target).addClass("className");
});
});
First, check duplicate id's.
Better way:
$(document).ready(function () {
$("#imageID").on('click', function (){
$(this).addClass("className");
});
});
Also, it add new classname only to clicked image, not to all images, so this is right way.
Your problem may occures because you have thow or more tags with #imageID id.
So, more better way is using js-* classes:
<img src="/images/img.png" class="js-my-image" alt="">
Code:
$(document).ready(function () {
$(".js-my-image").on('click', function (){
$(this).addClass("className");
});
});
If image is added after page loads, right code:
$(document).ready(function () {
$(document).on('click', '.js-my-image', function (){
$(this).addClass("className");
});
});
or
$(document).ready(function () {
$(".js-my-image").live('click', function (){
$(this).addClass("className");
});
});
How can I have this fiddle to change from first content (mario) to next content (smiley face) without being on hover/click? I want it to change automatically after 5 seconds. Also from second content to third content and fourth content.
Here is a sample from JSFIDDLE. I figured that maybe the coding should be change somewhere here:
$('#text1').hover(function () {
hey();
});
Besides that, anyone knows why my fourth content isn't showing?
I am new in this. Please guide me. Many thanks in advance.
Use setTimeout() function
setTimeout(function () {
hey();
},5000);
Fiddle Updated Fiddle
EDIT
As per your need shoe after 35 seconds
$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
$('#text1').show();
hey();
},35000);
function hey() {
setTimeout(function () {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
},5000);
}
Updated fiddle. NEW FIDDLE UPDATED AS PER COMMENT
Just add setTimeout(hey, 5000); instead hover handler:
$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
}
Your hey() is showing upto 3rd text.Add another next() transition.
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow",function(){
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
});
});
}
If you want to change content automatically after 5 second you should use setTimeout function, for example:
setTimeout(function(){ alert("Hello"); }, 5000) this will triger alert box after 5 seconds...
I Think you have to use setInterval()
setInterval(function(){ hey(); }, 3000);
See this Link what is difference between setTimeout and
setInterval
I need some help understanding some jQuery basics. I have a really simple function here but I can't call it.
<script type="text/javascript">
jQuery(function ($) {
callFunc();
}
function callFunc(){
alert("Function Called!");
}
);
</script>
If I don't put the alert in it's own function it triggers the alert. When I wrap it in a function and give it a name and try to call it, it doesn't work. Please help, I've been looking all over for some straightforward ways of just creating and calling jQuery functions. I've tried passing in the $ as a parameter but no matter what I try, I can't seem to just create a simple function and call it. What am I doing wrong and how do I call my function?
because of syntax error:
Your code:
jQuery(function ($) {
callFunc();
} //missing a closing ) for the JQuery(
function callFunc(){
alert("Function Called!");
}
); //extra )
Correct code:
jQuery(function ($) {
callFunc();
});
function callFunc() {
alert("Function Called!");
}
DEMO: http://jsfiddle.net/tnhswf11/
If you want to have the function inside the jQuery:
jQuery(function ($) {
function callFunc() {
alert("Function Called!");
}
callFunc();
});
DEMO: http://jsfiddle.net/tnhswf11/1/
You have syntax error
Correct syntax:
jQuery(function ($) {
callFunc();
function callFunc(){
alert("Function Called!");
}
});
or:
jQuery(function ($) {
callFunc();
});
function callFunc(){
alert("Function Called!");
}
Just a reminder. jQuery(function ($) {}); is a short hand for jQuery(document).ready(function($){});
I want after my page loads to do a trigger click once and only once.
many posts swear that settimeout only fires once, but in my case it is infinite!
here is one of my many trials.
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
});
I have tried moving that into a function outside the document.ready and then add cleartimeout, but then it stops from firing at all:
$( document ).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").first().trigger('click');
},1000);
clearTimeout(t);
}
What am I doing wrong!?
use clearTimeout() inside the setTimeout().It clears the timeout after triggering the click
$(document).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").trigger('click');
clearTimeout(t);
}, 1000);
}
$("#btn1").on('click',function(){
console.log("Clicked");
});
Fiddle: http://jsfiddle.net/6G4pR/
use e.stopPropagation(), this might be because of event bubbling.
HTML
<button id="btn1">my button</button>
JS
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
$("#btn1").click(function(e){
console.log('clicked');
e.stopPropagation();
console.log(e);
})
});
CODE