I have a great bookmarklet that reloads the css for the projects I'm working on. Right now I need to click the bookmark every time I want it to reload. What I want it to do is just set an interval.
This is it:
javascript:void(function(){var i,a,s;a=document.getElementsByTagName('link');for(i=0;i<a.length;i++){s=a[i];if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {var h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf())}}})();
This is what I tried:
javascript:void(
setInterval(
function(){
var i,a,s;
a=document.getElementsByTagName('link');
for(i=0;i<a.length;i++){
s=a[i];
if(s.rel.toLowerCase().indexOf('stylesheet')>=0&&s.href) {
var h=s.href.replace(/(&|%5C?)forceReload=\d+/,'');
s.href=h+(h.indexOf('?')>=0?'&':'?')+'forceReload='+(new Date().valueOf())
}
}
}, 500
);
)();
Any ideas? I've never worked with bookmarklets.
Thanks!
I'd try to name the function then pass it to setInterval:
javascript: myfun = function() {...}; setInterval(myfun, 500);
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)
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);
what i need is:
click in a button and make the blink event stop.
this is how i'm trying to do:
var blink = function(){
$('#blinker').toggle();
};
setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blink);
});
and dos not work, what i'm missing ?
Working example
Thanks!
All you need to do is:
blink_flag = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blink_flag);
});
I'd recommend adding:
$('#blinker').show();
After the clearInterval.
You're trying to use clearInterval on the function. That won't work because clearInterval takes the interval's unique ID as a parameter. This parameter would be returned by the setInterval function. If you store the unique ID in a variable and pass that to clearInterval, it'll work fine. Try this:
var blink = function(){
$('#blinker').toggle();
};
var blinkID = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(blinkID);
});
MDN
Demo
I think you are using clearInterval() in a wrong way. The parameter for the clearInterval() is an ID created by setInterval() and you are putting the function used by setInterval().
var blink = function(){
$('#blinker').toggle();
};
var glbTimer = setInterval(blink, 800); //declare an ID created by `setInterval()`
$("#stopBlink").click(function(){
clearInterval(glbTimer); //clear the interval of the ID.
});
Check this link for more info.
Maybe you can try with this demo.
You are trying to stop the blink toggle function, while you actually should save the interval in a variable and call clearInterval on that variable, as clearInterval expects an instance of the setInterval object as parameter: https://developer.mozilla.org/en/DOM/window.clearTimeout
http://jsfiddle.net/HTRZk/22/:
var blink = setInterval(function(){
$('#blinker').toggle()}
, 800);
$("#stopBlink").click(function(){
clearInterval(blink);
});
Also, you will need to make sure that when the blinking event is being stopped while the text is hidden you show the item again. Within the .click event add:
$('#blinker').show();
var blink = function(){
$('#blinker').toggle();
};
var bl = setInterval(blink, 800);
$("#stopBlink").click(function(){
clearInterval(bl);
});
I am trying to use SetInterval and clearInterval in YUI
The code is written so it will create element every second and on mouse hover of div it should stop creating element.
http://jsbin.com/awadek/5
Please let me know what is wrong with my code?
You should pass an anonymous function as a handler to "mouseover". Otherwise, Javascript will attempt to evaluate and call the return from clearInterval (in this case, an integer!). The following code will work:
YUI().use("console", "console-filters", "substitute", "node-event-simulate",
function(Y) {
console.log("YUI is ready");
var doSomething = function(e) {
Y.one("#seconds").append("<p>I am number four</p>");
};
IntervalId = setInterval(doSomething, 1000);
//Notice the anonymous function below:
Y.one("#clearInt").on('mouseover', function() { clearInterval( IntervalId ) });
});
Here is your JSBin, ftfy. Enjoy!
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')