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
}
Related
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);
});
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 found this article helpful for what I was needing to do, which was have a slideshow of sorts with a tab and tab_container using JavaScript. The code works great:
Automatic tab switch in javascript or jquery
However, what I want it to do is if you let the page run, it keeps rotating between the tabs. But if a tab is manually clicked on (example, they want to read the content on that tab) it stops the auto-rotation of the tabs for the duration of while they are on that webpage. If the page is refreshed, or they go back to the page, it starts the tab rotation again.
I'm not sure the Javascript code that I can add to the above example to make the auto-rotation stop.
Thanks in advance for the help!
You can use clearInterval to stop the setInterval function from running. setInterval returns an ID and you can pass that ID to clearInterval to stop it, e.g.
var intervalID = setInterval(function() {
....
clearInterval(intervalID);
So just make the code
var intervalID = setInterval(function() {
....
tabs.on('click', 'a', function(e) {
clearInterval(intervalID);
$(this).trigger('slides.swap');
e.preventDefault();
});
I'd also change the setInterval function from triggering a click to just straight-up triggering slides.swap, so that you know the difference between a triggered click and a user's click:
$('a:eq('+idx+')').trigger('slides.swap');
Here's the updated Fiddle from that question.
I am making a B2C website for elearning. I want that when users come to the website and they have been on a page for more than x seconds( say more than 15 seconds ) then a popup window opens up and this window will have some kind of a help message, say a message like "Questions ? We can help. Please call us on XXXXXXX or write to us at abc#xyz.com" . The popup will have a simple image in it and a close button on top right.
My question is that how can I achieve this behavior of an automatic popup coming after a specific delay , when the user is on the site. Also, I would like to have this popup on specific pages and not the complete site.
Thanks !
Use setTimeout() function in document.ready() and provide your function to it which generates the pop-up.
For more reference, check out http://www.w3schools.com/js/js_timing.asp
just use javascript setTimeout Function :
$(document).ready(function() {
setTimeout(function() {
yourPopupFunction();
}, 15000));
})
What's the most simple way to detect user inactivity and ask him if he's there?
Basically, after 3 minutes of the user not clicking on anything on the site, I'd like to ask him if he's there. He click's the OK button of a prompt of sorts and the entire page reloads.
Is there a jQuery script for this?
Here is a jquery plugin "idleTime" that seems designed to do exactly what you need http://paulirish.com/2009/jquery-idletimer-plugin/
Demo
Here is a simple implementation:
$.idleTimer(10000);
$(document).bind("idle.idleTimer", function(){
var reload = confirm("Refresh the Page?");
if (reload){
location.reload(true);
}
else{
window.location = "Log Out Url";
}
});