I simply wonder if it's possible to make a function where you have a timer/clock which ticks and when there is no time left, a text/image will be removed. There will also be a message/text displaying notifying the user. (JQuery or Java)
I have tryed this using replace.child but without any promising result.
I have also looked around for any similar object but none found.
-Thanks.
here you go:
(function(){
var secondsLeft = 10,
$timerElm = $('#timer');
function updateTimer () {
$timerElm.text(secondsLeft--);
if (secondsLeft < 0) timesUp();
else setTimeout(updateTimer, 1000);
}
function timesUp () {
$('#target').remove();
$('<p>works like a charm!</p>').prependTo('body').hide().fadeIn()
}
updateTimer();
})()
and here is a live demo too!
http://jsbin.com/aguyuw/1/edit
enjoy!
You can use setTimeout function...
setTimeout(function() { $('#some_id').fadeOut('slow');}, 2000);
here 2000 is an optional value... you can change as you concern... and if you want to fadeout fast you can use 'fast' instead of 'slow'...
For javascript you can use something like this....
setTimeout(function(){you_function();},3000);
Related
I need to trigger a window.open function on the click of body, but only if the click is after few seconds.
EXAMPLE:- if the second click is done immediately, it shouldn't open the window. but after 5 seconds, if the click is made, the window should open.
My code isn't working.
<script>
setInterval(myadFunction,5000);
function myadFunction()
{
$("body").click(function () {
window.open("https://www.google.com");
});
}
</script>
This is a wordpress website., and I entered this code before <body> tag.
Why isn't it working?
You can use a flag to simulate what you want. In this case "canClick" flag will do the job for you.Reset it back to true after your desired timeout.
var canClick = true;
$("body").click(function () {
if (canClick) {
window.open("https://www.google.com");
canClick = false;
setTimeout(() => {
canClick = true
}, 5000);
}
});
Let me know if you face any issue with this snippet.
You could try something like:
<button onclick="timeFunction()">Submit</button>
<script>
function timeFunction() {
setTimeout(function(){ window.open("https://www.google.com"); }, 5000);
}
</script>
It consists of this:
setTimeout(functionname, milliseconds, arg1, arg2, arg3...)
The following are the parameters −
functionname − The function name for the function to be executed.
milliseconds − The number of milliseconds.
arg1, arg2, arg3: These are the arguments passed to the function.
First of all. You should make sure that you are placing the code in the right place. Since it's Wordpress. That bugger really get on my nerves. Try putting it in the active theme.
var click_allowed = 0; //global var (you use const if supported)
setTimeout(function(){ click_allowed = 1; },5000);
jQuery('body').click(function(){
if(click_allowed) window.open("https://www.google.com");
});
jQuery has been used instead of $ for the selectors due to wordpress native jquery limitation.
you can use settimeout(function, millisecond)
why does setTimeout not work? And how to do this action properly? I need to get 30s delay every submit. Sorry for newbie question, but i am newbie.
if (event.target.id.indexOf('submit') === 0)
{ post1000.submit(); setTimeout('post1001.submit();', 30000); }
{ post1001.submit(); setTimeout('post1002.submit();', 60000); }
...
{ post5092.submit(); setTimeout('post5093.submit();', 122790000); }
}, false);
You can also try something like this;
setTimeout(yourSubmitFunction, 3000)
function yourSubmitFunction() {
//do whatever you want to do you can define submit here
}
You can call setTimeout in a loop, like for each element in your array which has your "post****" variables.
I believe you shouln't use a string as first parameter for setTimeout();
Here is this function definition :
setTimeout(function,milliseconds,param1,param2,...)
Try with this code sample, or update yours accordingly :
setTimeout(function(){ alert("Hello"); }, 3000);
I would like pause on hover when the mouse hovers over the fadelinks div for this script:
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo
('.fadelinks');}, 5000);
});
The html is along the lines of:
<div class="fadelinks">
<div>...</div>
<div>...</div>
</div>
I've tried a few things relating to interval to try and cram pause on hover functionality in there, but with my extremely limited jquery knowledge, everything I've tried breaks the script, leaving it stuck on the last slide or the first slide. Would just like this simple script to pause on mouse-hover and start up again on mouse-exit.
Here's a JSFiddle of the script in its natural state.
Try using .hover() , declaring variable to reference setInterval , using a function to call setInterval
$(function(){
// define `_interval` variable
var _interval;
// cache `.fadelinks` element
var elem = $(".fadelinks");
elem.find("> :gt(0)").hide();
elem.hover(function() {
// "pause" at `hover` of `.fadelinks`
clearInterval(_interval)
}, function() {
// "reset"
interval()
});
var interval = function() {
_interval = setInterval(function(){
elem.find("> :first-child")
.fadeOut().next().fadeIn().end()
.appendTo(elem);
}, 2000)
};
interval()
});
jsfiddle https://jsfiddle.net/ccmgdfog/4/
In your case, there wasn't the need for jQuery. Only with stopInterval you can control it. Altrough there is the jQuery $.stop() function, we wouldn't get the desired result.
I've changed a bit your code:
$(function(){
$('.fadelinks > :gt(0)').hide();
var interval = setInterval(intervalFunc, 2000);
$('.fadelinks').on('mouseenter',function(){
clearInterval(interval);
});
$('.fadelinks').on('mouseout',function(){
interval = setInterval(intervalFunc, 2000);
});
function intervalFunc(){
$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');
}
});
I have a function in Javascript that I need to repeat every 5 seconds.
Here is the simple code:
function myFunk() {
$('body').addClass('polyonloaded');
setTimeout(myFunk, 5000);
}
myFunk();
It runs the function once, and does not repeat it anymore. What went wrong with my code?
Your code is working; try printing something:
function myFunk() {
$('body').addClass('polyonloaded');
console.log('hello');
setTimeout(myFunk, 5000);
}
myFunk();
The problem: since the added class is always the same, nothing happens:
the class is already added; it won't be added again.
If you want to add, remove, add, remove, ... etc. use toggleClass:
function myFunk() {
$('body').toggleClass('polyonloaded');
setTimeout(myFunk, $('body').hasClass('polyonloaded') ? 4000 : 5000);
}
myFunk();
You have to add and remove the class.
Set an interval that adds the class, then set a timeout inside to wait a bit that removes it, just before the next interval.
Forked yours here:
http://codepen.io/snlacks/pen/KwoELp
$(document).ready(function() {
setInterval( function() {
$('body').addClass('polyonloaded');
setTimeout( function(){
$('body').removeClass('polyonloaded');
}, 4000)}, 5000 );
});
Seems to be working fine:
function myFunk() {
console.log('running');
setTimeout(myFunk, 1000);
}
myFunk();
http://jsfiddle.net/dem6u89L/
I'm having some problems updating a jquery progress bar. This progress bar isn't in the document during the page load, I'm adding it just when the user click on a button, ding something like this:
$(this).parent().append('<div class="progressbar"></div>');
$(this).parent().children('div.progressbar').show();
$(this).parent().children('div.progressbar').progressbar({value: 20});
then, using a timeout, I'm trying to update it
function updateProgressBar() {
$('.progressbar').each(function() {
myNewValue = getNewValue();
$(this).progressbar('value', 50);
});
setTimeout('updateProgressBar()', 5000);
}
setTimeout('updateProgressBar()', 5000);
the debug console complains saying: "Uncaught: cannot call methods on progressbar prior to initialiaztion: attempted to call method 'value'"
Googling here I found that the problem could be related to the inizialization of the progress bar after the loading of the page
Could someone help me?
Thanks in advance
-- edit --
thanks Bryan, I'm trying your solution but i doesn't work for me
Now I've this code
function startProgress() {
$(this).parent().append('<div class="progressbar"></div>');
$(this).siblings('.progressbar').show();
$(this).siblings('.progressbar').progressbar({value: 0});
function updateProgress() {
$('.progressbar').each(function() {
myNewValue = getNewValue($(this).parent().parent().attr('id'));
$(this).progressbar('value', myNewValue);
});
setTimeout('updateProgress', 5000);
}
setTimeout('updateProgress', 5000);
}
The console is sayng there's no updateProgress defined
-- edit --
many many thanks!!!
Now i've a quite definitive version that works...
Here my current code
if($(this).siblings('.progressbar').size() == 0) {
$(this).parent().append('<div class="progressbar"/>');
$(this).siblings('.progressbar').progressbar({value: 0});
}
$(this).siblings('.progressbar').show();
function updateProgress() {
$('.progressbar').each(function() {
myParams = 'service=' + $(this).parent().parent().attr('id') + '&content=' + $(this).parent().attr('id')
myUrl = '/datacast/content_progress/?' + myParams;
theValue = $(this).progressbar('value');
$.get(myUrl, {}, function(aReply) {
myData = aReply.split(' ');
myItemId = myData[0];
myValue = parseInt(myData[1]);
try {
$(".item[id = " + myItemId + "]").children(".progressbar").progressbar('value', myValue);
}
catch(myError) {
//alert(myError);
}
})
});
setTimeout(updateProgress, 5000);
}
setTimeout(updateProgress, 5000);
As you can see I've add a control if there is already a progress bar as i pass thorough that code several times.
The progress bar is updated every time, but the console complains saying "TypeError: Cannot call method 'apply' of undefined", so I had to add the try block with an empty catch body to drop the error. The page works but it could be interesting if you have an idea why there's that error
Had the same problem
Apparently you must use the format progressbar({value:30}) the first time
If you use progressbar(value,30) the first time then you get this exception.
Ok, I can't believe I missed that. The problem is that you're passing a string to the setTimeout function. This will cause it to lookup the name of the function in global scope, which it's not.
Change both of these calls:
setTimeout('updateProgress', 5000);
to
setTimeout(updateProgress, 5000);
Make sure that you're using the exact same selector in your update method as in the initialization method.
In the provided code, you're doing something like $(this).parent().children().find('.progressbar') and then in the update you're just doing $('.progressbar'). That second call could potentially return items that the first one didn't, and those items wouldn't have a progress bar initialized.
This code worked fine for me:
$(function(){
$('body').append('<div class="progress"></div>');
var val = 10;
$('.progress').progressbar({value:val});
function updateProgress() {
val += 10;
$('.progress').progressbar('value', val);
if(val < 100)
setTimeout(updateProgress, 1000);
}
setTimeout(updateProgress, 1000);
});
Also, remember that you don't actually need that call to each() as jquery methods should automatically apply to all elements matched with that selector.
Example:
$('.red').each(function(){ $(this).css({color:'red'}); });
is redundant, and the same can be achieved with:
$('.red').css({color:'red'});
Oh, and here's a freebie:
$(this).parent().children().find('.progressbar')
can be shortened to: $(this).siblings('.progressbar')