When a user click an href link with id="boo" I am trying to get the browser to automatically go 'back' after 2 seconds.
This isn't working and i'm reaching out for some help from you all. Thanks in advance!
document.getElementById("boo").addEventListener("click",
function a(event) {
setTimeout(function() {window.location = History.back},2000)}
);
Edit: (Adding this to clarify my goal)
so basically i want to do two things on click. navigate to a different page (time.is) and then automatically go back to the original page after 4 seconds.
I think you have to make the default function of <a> tag stop working. Please try adding .preventDefault().
document.getElementById("boo").addEventListener("click",
function (event) {
event.preventDefault();
setTimeout(function() {window.history.back()}, 2000);
}
);
If you want to do two things on one click, I suggest this:
Open the other website in a new tab
Go back to a previous page after 2 seconds in an initial tab
JavaScript:
document.getElementById("boo").addEventListener("click",
function (event) {
// Remove .preventDefault()
setTimeout(function() {window.history.back()}, 2000);
}
);
HTML:
<a id="boo" class="clock" href="https://time.is/" target="_blank"></a>
A part from a syntax error (history should be lower case), you are setting window.location with the back function, without executing it.
This should fix your code:
document.getElementById("boo").addEventListener("click",
function(event) {
setTimeout(function() {window.history.back()}, 2000);
});
Related
I have a webpage and it has a Refresh Button. I need to click the button every 5 minutes. The Normal Refresh or Reload or F5 doesn't work in this situation. Is there a way that Javascript can do this task.
Like, I will save the javascript as Bookmark and once I click the bookmark. Then, the javascript event has to click the refresh button every 5 minutes.
I googled it and I found the below code. But, it doesn't work. When I click on it, it just showing a random number in a blank page.
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() { jQuery(".refresh").click(); },60000)
thank you in advance,
"I have a webpage and it has a Refresh Button. I need to click the
button every 5 minutes. The Normal Refresh or Reload or F5 doesn't
work in this situation. Is there a way that Javascript can do this
task."
It's not very clear to me, but every time you refresh a webpage, javascript is loaded again. So if you have intervals or variables they are reset at each refresh. If you want to keep some value among refreshs you can store values using localStorage or cookies for example.
If you want refresh automatically page you can use setInterval or metatag "refresh".
"Like, I will save the javascript as Bookmark and once I click the
bookmark. Then, the javascript event has to click the refresh button
every 5 minutes."
Look at this: Add a bookmark that is only javascript, not a URL
you can call your refresh code function or button click event in
setTimeout(yourFucntion(),5000);
else
setTimeout($("#btnName").click(),5000);
Try below code:
<!DOCTYPE html>
<html>
<body onload="f1()">
<script language ="javascript" >
var tmp;
function f1() {
tmp = setInterval(() => f2(), 2000); // replace this with 5 min timer
}
function f2() {
document.getElementById("Button1").click();
}
function f3() {
console.log("Hello World");
}
</script>
<button id="Button1" onclick="f3()">click me</button>
<div id="demo"></div>
</body>
</html>
There are two versions for you to try, one uses javascript to click the button the other automates running the function that they have tied to the button.
Non jQuery:
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){document.getElementsByClassName("refresh")[0].addEventListener('click');},60000);})()
Or with jQuery (OP's comment on original thread):
javascript:(function(){if(window.autoRefreshInterval) {clearInterval(window.autoRefreshInterval);}window.autoRefreshInterval = setInterval(function(){$ctrl.refresh();},60000);})()
Delayed post, but hopefully it helps someone :-).
The trick for me was locating the element by css document.querySelector('.pbi-glyph-refresh').click();
You can combine this with the original code like so, it correctly clicks the PowerBI refresh button on a 60 second timer (the var is in ms).
javascript:if(window.autoRefreshInterval) { clearInterval(window.autoRefreshInterval); };
window.autoRefreshInterval = setInterval(function() {document.querySelector('.pbi-glyph-refresh').click(); },60000)
I have two pages: index.aspx and dream.aspx. I have a button click me on index.aspx Here's my Jquery code that clicks on that button:
function createItemButton()
{
setTimeout(
function()
{
$("#CreateItem").click();
},5000); //Delay of 5 seconds
}
createItemButton();
The delay added is because of the rest of the code not posted here. Once the click me button is triggered, it takes me to the dream.aspx page. There's another button back on that page, which when clicked, takes me back to the index.aspx page. Here's my attempt to automate everything:
function createItemButton()
{
setTimeout(
function()
{
$("#CreateItem").click(); //id of click me button on index.aspx page
},5000); //Delay of 5 seconds
}
function createItemButton1()
{
setTimeout(
function()
{
$("#back").click(); //id of back button on dream.aspx page
},7000); //Delay of 7 seconds
}
function call()
{
createItemButton();
createItemButton1();
}
call();
My thinking is that once it redirects to the dream.aspx page, it'll wait another 2 seconds ( 7000 - 5000 delay ) and the trigger a click on the back button and take me back to the index.aspx page. But for some reason, after it is taking me to the dream.aspx page, it's not triggering a click on the back button on the same page. I have tried giving multiple delays in the same setTimeout() function also. Something like:
function(){
setTimeout(function() {
$("#CreateItem").click();
$("#back").click();
}, 3000));
}
I have been informed that this code will give a delay of 3 seconds to each of the clicks. But it did not work for me. I also tried a couple of other things but nothing worked.
Basically, once I move from the index.aspx page after clicking on the click me button, I want the back button on the dream.aspx page to take me back to the index.aspx page after a couple of seconds. All automated. FYI, I am running this code in console. Any help is much appreciated. Thanks.
The code for back button (function createItemButton1()) and its call must be placed in dream.aspx. Once you leave index.aspx, all javascript code in it is gone along with any pending timeouts.
I'm trying to create a lightbox with Jquery that will open an email collection pop-up to sign up for a newsletter. I think I understand how to make it work if someone clicks on a link but I don't want the visitor to have to click a link, I want it to pop up automatically after say a 5 second delay when the visitor lands on the page as seems common on many pages. This is a non CMS page. Can someone tell me the simplest way to go about this?
You can use setTimout() for that :
setTimeout(function(){
//This code will run in 5 seconds
}, 5000);
Here's a fiddle with an alert to demonstrate.
So to do this add this code:
setTimeout(function(){ popupFunction(); }, 5000);
to your jquery window ready event:
$(document).ready(function() {
//add code here
setTimeout(function(){ popupFunction(); }, 5000);
});
And then create a function that makes your popup work:
function popupFunction(){
//code here that works the popup
}
I am having issues with getting my script to work. I am using this bit of code from Codyhouse to add a navigation to my page. The basics of it are, clicking the hamburger opens it, then when you click on a link, it should scroll the page to that location, while closing the menu.
This all works fine, but because the animation is using transform: translateY(170px);, the link is finding it's position, but when it gets to it, the page has been moved 170px, resulting in being 170px below where it needs to be on screen.
My idea for the fix was to delay the clicking on the link until the animation was finished, which lasts .5 seconds, and then go to the point on the page.
This is my script,
$('.nav-click').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
setTimeout(function(){
window.location = goTo;
},2000);
});
The result of my script is that, when you click on the link, it still scrolls to the position on the page, and then, after the 2 seconds I have set currently, it jumps to the proper place on the page.
It should be waiting 2 seconds, and then following it's href.
Try doing something like this:
$('.nav-click').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute('href');
var interval = setInterval(function() {
if (!$('main').hasClass('nav-is-visible')) {
clearInterval(interval);
window.location = goTo;
}
}, 100);
});
I found no solution to this problem, but opted to remove the transform from the page all together as the links going to the right place is more important to me then having that effect.
I have a button on the site I am working on that uses a sprite sheet animation and so needs to be set as a background image. I require a regular click on the button to delay the redirect to another page by a fraction of a second for the animation to play, however I still wish for middle mouse clicks to function to open in new tab, without a delay.
Currently I have this working in Javascript but it seems a pretty bad idea for everything to be handled that way and not to just have a href.
So I have made this:
<script type="text/javascript">
function delayed(){
window.stop();
setTimeout('window.location = "http://www.dog.com";', 800);}
</script>
I am a link
The idea being that a regular click triggers the function and incurs a delay whereas a middle mouse click will just go straight to the href link.
This works in Firefox. However in Chrome and Safari the middle click triggers the function and as a result opens the dog link in the same window (on the finished version the links will be the same of course).
Basically all I need is a href that delays on click but still functions normally on middle click. My working solution uses Javascript to open in new tab on middle click but it strikes me that this may override browser settings and is probably a bad idea.
EDIT:
In the meantime I had found this solution using Jquery:
$(document).ready(function() {
$(".delayed").click(function() {
var href = $(this).attr('href');
setTimeout(function() {window.location = href}, 800);
return false;
});
});
...and the HTML:
<a href="http://www.google.com/" class='delayed'></a>
This worked but encountered the same problem with Chrome treating a middle click as a left click and hence opening it in the same window.
I have now modified it to include the content from sransara so that... I think... everything is resolved. Again using Jquery:
$(document).ready(function() {
$(".delayed").click(function(event) {
var href = $(this).attr('href');
if(event.button == 0){
event.preventDefault ? event.preventDefault():event.returnValue = false;
setTimeout(function() {window.location = href}, 800);
}
});
});
Seems to work in all browsers. Hopefully these can be of use to anyone stumbling upon this page in the future.
This is just a quick solution, but I think it mostly fits into your need.
The code of HTML anchor tag:
I am a link
Here is the Javascript:
function delayed(event){
window.stop();
if(event.button == 0){
event.preventDefault ? event.preventDefault():event.returnValue = false;
setTimeout(function(){ window.location = "http://www.yahoo.com"; }, 800);
}
}
There are few simple changes:
I have removed the return false from onclick event, but the new code line event.preventDefault ? event.preventDefault():event.returnValue = false;, prevents default action when left clicked.
And added a button code check to Javascript.
Working demo code is here.
This is a quick solution, some area for improvement is to:
Take out the inline onclick event and add an event listener dynamically with JS.