I don't know how to say it right, sorry in advance.
I want to make a page of the site js that the page can be updated every 10 seconds, does anyone have an example?
**that the user can refresh the page every 10 seconds**
I want my user on my site to be able to refresh the page once every 10 seconds
You can make button that will show after 10 seconds so user can but also don't have to update.
setTimeout(function(){
let button = document.querySelector('button');
button.style.display = "block";
button.onclick = () => window.location.reload();
}, 10000);
window.onkeydown = (e) => {
if(e.key === 'F5'){
e.preventDefault()
}
}
button {
display:none;
}
<button>Click me</button>
EDIT:
It is impossible to prevent the user from reloading the page, however it is possible to ask if they really want to leave, using this code below, if it after 10 seconds it will not ask if they want to leave, however if it has been less than 10 seconds, it will ask if they want to leave.
var r = 0;
window.onbeforeunload = function() {
if(r == 1) {
return "Are you sure you want to leave?";
}
}
setTimeout(function(){
r = 0;
}, 10000);
Related
hi i have to disable forgot password button for 30 secs soon after the user has clicked it once & an alert should show him to 'Please try again after 30 seconds' This is to avoid multiple trigger of mails providing user a temporary password. after 30 secs the button should be enabled again
I have tried using setTimeout to disable button for 30 seconds after click.. i am confused on how to use it. Please help me on this
<button>
<a id="forgotPassword" class="cursorPointer loginlables">
Forgot Password?
</a>
</button>
User should be able to click forgot password button once and then error message should display if he tries to click button again within 30 seconds of first click.
You can set up a global variable which holds the time the user clicked the button and an action - like sending a reminder - has been initiated. Everytime you enter the callback for the button's click handler, you compare this time to the current time and if it's difference is smaller than 30 seconds show an alert dialog.
Javascript provides the Date object for time and date operations.
var lastCall = 0;
var timeToWait = 30;
function doAction() {
var timePassed = Date.now() - lastCall;
if (timePassed >= timeToWait * 1000) {
console.log("send email");
lastCall = Date.now();
} else {
alert("Please wait " + parseInt(timeToWait - (timePassed / 1000)) + " seconds");
}
}
document.getElementById("forgotPassword").addEventListener("click", doAction);
<button id="forgotPassword">
Forgot password
</button>
You can achieve this by setTimeout Function
document.getElementById("forgotPassword").addEventListener('click', function(){
alert("Button is disabled for 30sec")
document.getElementById("forgotPassword").disabled = true;
setTimeout(function(){document.getElementById("forgotPassword").disabled = false;},30000);
})
in your future posts, please add your code so we can help you better.
First of all, I've always been told using setTimeout isn't a good habit in JS, so keep in mind my solution probably isn't the best available, but that's one.
function myfunction() {
btn = document.getElementById('btn');
if (btn.innerHTML === 'Click me') {
console.log('Clicked !')
btn.innerHTML = 'Wait a bit plz';
setTimeout(() => {
btn.innerHTML = 'Click me';
}, 5000);
}
}
<button id='btn' onclick='myfunction()'>Click me</button>
Here i'm using the text of my button to decide if it can be clicked or not, but you can create a boolean or use a class, as you wish.
The idea still is the same, check if your button is clickable, if it is, make it unclickable for a given period (wich you can achieve by using setTimeout(() => {}, 5000);.
Hello StackOver Flow friends!
Please I am a newbie
I need to convert this code to Jquery!
I am working on it but unable to make it work. I am learning javascript but I want to see how do the same code work in Jquery. What all I need.
Now, What this function do is:
When an audio starts and as the time limit of 30 sec gets over. It Shows a confirm box whether to login for listening to the audio further or not.
If user clicks 'OK' it redirects to a login page and If the User clicks close or cancel it refreshes the page. Now What I need is that I need to make the confirm box appear with css style. So I need to change it to jquery . Or what the Masters of code think would be perfect.
<script>
document.addEventListener("play", function (e) {
var audios = document.getElementsByTagName("audio");
for (var i = 0, len = audios.length; i < len; i++) {
if (audios[i] === e.target) {
e.target.addEventListener("canplaythrough", function () {
setTimeout(function () {
e.target.pause();
var r = confirm("Please Log in for more than 30s preview!");
if (r == true) {
//x = "You pressed OK!";
window.location.href = "https://www.google.com";
} else {
//x = "You pressed Cancel!";
location.reload();
}
},
30000);
}, false);
}
}
}, true);
</script>
I'm trying to put in a small easter egg on a site I'm building where if a user clicks a link x amount of times it will trigger a popup, I'd guess this would be some kind of JS or JQuery but I have no idea where to start or if it's even possible. I guess what I really want is something like the easter egg built into the Android 'About Phone' page, which opens a new page after about 7 clicks within 5 seconds. Is there any way to do this in a browser?
Maybe an OnClick command which adds 1 to a counter and does an action when the counter reaches a specified number, but resets the counter to 0 every 10 seconds? (I don't want to make it too easy to find!)
Thanks
Try this one with jQuery:
Html:
<a id='lnkEgg' data-clicks='0'>Click for surprise</a>
Script:
$(function(){
$("#lnkEgg").on("click",function(){
var c=$(this).data("click");
if(c==7){
//if it equals to whatever number you are chasing
//open the popup
}else{
$(this).data("clicks",c++);
}
});
});
Use a setTimeout (which you clear each time) and preventDefault on the click event if it doesn't meet your requirements.
(function (node) { // IIFE to keep our namespace clean :)
var timer,
count = 0;
function timeup() {
count = 0;
}
function handler(e) {
clearTimeout(timer);
timer = setTimeout(timeup, 5e3); // 5 seconds
++count;
if (count < 7) // number of clicks
e.preventDefault();
}
node.addEventLister('click', handler);
}(document.getElementById('myLink'))); // passing the <a> into the IIFE
This code must be run after the target element exists
#TheVillageIdiot's technique is the way to go. Here I'll just show some approach using the same technique:
$(function(){
var egg = $('#lnkEgg');
egg.on('click', function() {
//increment and check if magic clicks has been reached
if( ++$(this).data().clicks == 7 ) {
console.log( "You've now clicked the required number of times");
//do some more operations
$(this).data('complete', true);
console.log( $(this).data() );
};
});
//Reset counter every 10 seconds
setInterval(function() {
egg.data().clicks = 0;
}, 10000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="lnkEgg" data-clicks="0">Click for surprise</a>
Ok coming straight to the point
I have a text box and few other things on a page
if the user is typing in the textbox the page should not refresh otherwise it should refresh after a certain interval
I searched alot and cannot find anything similar
I am new to javascript
Here is a simple example of this. A check runs every 3 seconds. if nothing has been typed in it will refresh, if something has been typed in it will wait 3 seconds before refreshing.
http://jsfiddle.net/9ARrG/
HTML
<input onkeyup="resetTimer = true">
JS
resetTimer = false;
setInterval(function() {
if(!resetTimer) {
location.reload();
}
resetTimer = false;
}, 3000);
Give your input/textarea an id
<input id="textbox" />
// OR
<textarea id="textbox"></textarea>
Then, setup a timer to refresh the page. If there's a change, reset the timer.
var originalTimer = 15000; // here's the original time until page refreshes
var timer = originalTimer; // timer to track whether to refresh page
// now every 1 second, update the timer
setInterval(function() {
timer -= 1000; // timer has gone down 1 sec
// if timer is less than 0, refresh page
if (timer <= 0) window.location.reload();
},1000); // repeat every 1 second (1000 ms)
document.getElementById("textbox").onchange = function() {
// detect textbox changes, reset timer
timer = originalTimer;
}
Use the document.activeElement property to conditionally determine what element has focus.
function refreshPageUnlessFocusedOn (el) {
setInterval(function () {
if(el !== document.activeElement) {
document.location.reload();
}
}, 3000)
}
refreshPageUnlessFocusedOn(document.querySelector('textarea'));
Check out the jsfiddle here for a working sample.
I want that when a user clicks on any external link (identified by either particular id or class) on my site then he should get a popup with a counter of 10 seconds, after 10 seconds the popup should close and the user should be able to access the external URL. How can this be done? I'm able to show a warning like below but I don't know how to add timeout to it, also this is a confirm box, not a popup where I can add some div and more stuff for user to see until the counter stops.
$(document).ready(function(){
var root = new RegExp(location.host);
$('a').each(function(){
if(root.test($(this).attr('href'))){
$(this).addClass('local');
}
else{
// a link that does not contain the current host
var url = $(this).attr('href');
if(url.length > 1)
{
$(this).addClass('external');
}
}
});
$('a.external').live('click', function(e){
e.preventDefault();
var answer = confirm("You are about to leave the website and view the content of an external website. We cannot be held responsible for the content of external websites.");
if (answer){
window.location = $(this).attr('href');
}
});
});
PS: Is there any free plugin for this?
I've put together a little demo to help you out. First thing to be aware of is your going to need to make use of the setTimeout function in JavaScript. Secondly, the confirmation boxes and alert windows will not give you the flexibility you need. So here's my HTML first I show a simple link and then created a popup div that will be hidden from the users view.
<a href='http://www.google.com'>Google</a>
<div id='popUp' style='display:none; border:1px solid black;'>
<span>You will be redirected in</span>
<span class='counter'>10</span>
<span>Seconds</span>
<button class='cancel'>Cancel</button>
</div>
Next I created an object that controls how the popup is displayed, and related events are handled within your popup. This mostly is done to keep my popup code in one place and all events centrally located within the object.
$('a').live('click', function(e){
e.preventDefault();
popUp.start(this);
});
$('.cancel').click(function()
{
popUp.cancel();
});
var popUp = (function()
{
var count = 10; //number of seconds to pause
var cancelled = false;
var start = function(caller)
{
$('#popUp').show();
timer(caller);
};
var timer = function(caller)
{
if(cancelled != true)
{
if(count == 0)
{
finished(caller);
}
else
{
count--;
$('.counter').html(count);
setTimeout(function()
{
timer(caller);
}, 1000);
}
}
};
var cancel = function()
{
cancelled = true;
$('#popUp').hide();
}
var finished = function(caller)
{
alert('Open window to ' + caller.href);
};
return {
start : start,
cancel: cancel
};
}());
If you run, you will see the popup is displayed and the countdown is properly counting down. There's still some tweaks of course that it needs, but you should be able to see the overall idea of whats being accomplished. Hope it helps!
JS Fiddle Sample: http://jsfiddle.net/u39cV/
You cannot using a confirm native dialog box as this kind of dialog, as alert(), is blocking all script execution. You have to use a cutomized dialog box non-blocking.
You can use for example: jquery UI dialog
Even this has modal option, this is not UI blocking.
Consdier using the javascript setTimeout function to execute an action after a given delay
if (answer){
setTimeOut(function(){
//action executed after the delay
window.location = $(this).attr('href');
}, 10000); //delay in ms
}