I want when I click in the image I get the new but after 1 second I want to get the default.
I added the function setTimeout(), but after one second I still have the same image (pressed.svg)
This is all my code :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language='Javascript'>
$(document).ready(function(){
$("#myImage").on("click",function() {
$(this).attr("src","images/pressed.svg");
setTimeout(function() {
$(this).attr("src","images/normal.svg");
},1000);
});
});
</script>
</head>
<body>
<img src="images/normal.svg" id="myImage">
</body>
</html>
The problem is that this in your anonymous function call refers to the wrong this. You need to assign the value of this in your handler to a temporary that will be used by the anonymous function:
$(document).ready(function() {
$("#myImage").on("click",function() {
var me = this;
$(me).attr("src", "images/pressed.svg");
setTimeout(function() {
$(me).attr("src", "images/normal.svg");
}, 1000);
});
});
You could accomplish the same thing using just the DOM, since you aren't doing anything jQuery specific:
$(document).ready(function() {
$("#myImage").on("click", function() {
var me = this;
me.src = "images/pressed.svg";
setTimeout(function() {
me.src = "images/normal.svg";
}, 1000);
});
});
Demo : http://jsfiddle.net/
JS Fix :
$(document).ready(function(){
$("#myImage").on("click",function() {
var $img = $(this);
$img.attr("src","images/pressed.svg");
setTimeout(function() {
$img.attr("src","images/normal.svg");
},1000);
});
});
when you do $(this) in setTimeout, it wont work as there is no reference in settime out function. cache the element first and then use it in settimeout.
Related
I need that only the content of the div "chat_scroll" are automatically reloaded. I've tried a lot of codes, but the div remains stationary.
At last, I've tried with this:
JS before
<script>
function updateDiv()
{
$( "#chat_scroll" ).load(window.location.href + " #chat_scroll" );
}
</script>
JQUERY at the bottom of the file:
<script>
function myFunction() {
myVar = setInterval(updateDiv(), 3000);
}
</script>
setInterval accepts a function as an argument:
setInterval(updateDiv, 3000);
Note that there's no () after updateDiv. That would be calling the function, and passing its return value to setInterval, which is not what you're trying to do.
When do you call myFunction()? Try this instead of using myFunction:
$(document).ready(function(){
setInterval(function(){
updateDiv();
}, 3000);
});
I'm having issues getting clearInterval to work when I try to bind it to a button click. Also, apparently the function is starting on it's own... Here's my code
var funky = setInterval(function() {
alert('hello world');
}, 2000);
$('#start').click(function() {
funky();
});
$('#stop').click(function() {
clearInterval(funky);
});
Here's a js fiddle
You have forgot to add jquery library and have made wrong assignment, it needs to be inside callback function.
Working example:
var funky;
$('#start').click(function() {
funky = setInterval(function() {
alert('hello world');
}, 2000);
});
$('#stop').click(function() {
clearInterval(funky);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">start</button>
<button id="stop">stop</button>
First off, yes, when you assign a variable to a function, it self invokes.
Secondly, your click events are not working because you need assign the interval to the variable on the click, not invoke the function - there is no function to invoke, as you would see if you looked at your developer console.
Lastly, it is good practice to wrap the jQuery code in the document ready function to ensure all of your event handlers get bound properly.
$(function () {
var funky;
$('#start').click(function() {
funky = setInterval(function() {
alert('hello world');
}, 1000);
});
$('#stop').click(function() {
clearInterval(funky);
});
});
You're saving the wrong value. Try this:
var funky = function() {
alert('hello world');
}
var funkyId = setInterval(funky, 2000);
$('#start').click(function() {
funky();
});
$('#stop').click(function() {
clearInterval(funkyId);
});
Here I am giving you the idea.
declare a variable e.g. let x;
create a function which you want to bind with setInterval.
e.g.
function funky() {
alert("Hello World");
}
assign start.onclick to a function which will assign the setInterval to x.
e.g start.onclick = function(){
clearInterval(x); // to prevent multiple interval if you click more than one
x = setInterval(funky, 2000); // assign the setInterval to x
};
assign stop.onclick to clearInterval(x) to stop the interval.
e.g. stop.onclick = function() {
clearInterval(x); // to stop the interval
};
That's it. Easy right.
I need a script thats redirects the user to a second side, when the mainpage need to long to load.
I did this:
<script type='text/javascript'>
$(document).ready(function() {
setTimeout("location.replace('contact.html')",10000);
});
</script>
To sametime a preloader opens an get hided on on body onload, when that happens i need to kill the functon above?
Anybody an idea?
Try this:
var redirect = setTimeout(function(){
window.location = 'somewhere'
}, 10000)
$(document).ready(function() { // or $(window).load(function() {
clearTimeout(redirect);
});
setTimeout("location.replace('contact.html')",10000);
Instead, you can try
setTimeout(function(){window.location='contact.html'},10000);
You Can try Following
var Ispreloader=false;
<script type='text/javascript'>
$(document).ready(function() {
if(!Ispreloader)
{
myfunction();
}
});
function myfunction()
{
setTimeout("location.replace('contact.html')",10000);
}
//------------Whenever preploadeer loads on bodu unload set the variable to true
Ispreloader=true;
</script>
I have a jQuery function that uses ajax to get data, then displays it, I want to use an if statement to determine if the function has already been run, if it has, a certain section of the function doesn't run again, for some reason, the if statement is being ignored.
This is my code:
<script type="text/javascript">
var a = 1;
$(function() {
if(a<2) {
$('.notifications').click(function() {
$('#notifications2').show();
$('#loader').show();
$.get('/getnotifications.php', function(data) {
$(".getnot").append(data);
$('#loader').hide();
a++;
});
});
}
});
</script>
Any idea why this is failing to work?
You're placing the if statement at the wrong point, try this:
<script type="text/javascript">
var a = 1;
$(function() {
$('.notifications').click(function() {
if(a<2) {
$('#notifications2').show();
$('#loader').show();
$.get('/getnotifications.php', function(data) {
$(".getnot").append(data);
$('#loader').hide();
a++;
});
}
});
});
</script>
You're current code is simply checking that a is less than 2 when the document first loads, not every time you click on .notifications.
I'm trying to fade out a div on a click but also change some css values.
the issue im having is that the values change while the fade out is happening (too early). I need the values to change once the fade out has finished:
<script type="text/javascript">
$('#r_text').click(function() {
$(".box1_d").fadeOut();
$(".box1_c").css("top","0px");
});
</script>
Now when i run that, everything works but just not exactly how i'd like it.. I need the css values to be changed once the fadeout has finished, not while it's still happening.
is this possible?
if so, any ideas how?
thank you.
Use a callback function to modify the .css() as the second parameter to fadeOut(). It will fire when the fade completes.
<script type="text/javascript">
var fadeTime = 500;
$('#r_text').click(function() {
$(".box1_d").fadeOut(fadeTime, function() {
$(".box1_c").css("top","0px");
});
});
</script>
Provided you use jQuery version >= 1.5, you can/should utilize the Deferred object instead of using the callback parameter:
$('#r_text').click((function () {
var animations = {
initial: function () {
return $(".box1_d").fadeOut(1500);
},
following: function () {
return $(".box1_c").css("top","0px").animate({fontSize: '150%'});
},
onDone: function () {
alert('DONE!');
}
};
return function(e) {
$.when(animations.initial())
.pipe(animations.following)
.done(animations.onDone);
e.preventDefault();
};
}()));
JsFiddle of it in action: http://jsfiddle.net/wGcgS/2/