I have a javascript code that is only showing the DIV one time after 5 minutes, but I want that script to execute/show the DIV id "off" again every 5 minutes...
How can I do that?
<div id="off">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</div>
<script>
var div = document.getElementById('off');
div.style.display = 'none';
setTimeout(function() {
div.style.display = 'block';
}, 5 * 60000);
</script>
Using setInterval()
setInterval(function() {
div.style.display = 'block';
}, 5 * 60000);
If at some point you want to stop your interval ticking, you should use it assigned to a function expression like:
var myIntv = setInterval(function() {
div.style.display = 'block';
}, 5 * 60000);
// (let's say we're inside a button click event)
// clearInterval( myIntv ); // Stop it
jsBin demo
Using setTimeout()
function doSomething (){
div.style.display = 'block';
setTimeout(doSomething, 5 * 60000); // Recall
}
doSomething(); // Start
jsbin demo
Please remove "I am inside the Div" from the code and it will work for you as you need :
<div id="off" style="display:none">I am inside the Div
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</div>
<script>
var div = document.getElementById('off');
setInterval(function(){
var style = div.offsetWidth > 0 || div.offsetHeight > 0;
if(style){
document.getElementById('off').style.display="none";
}else{
document.getElementById('off').style.display="block";
}
}, 300000);
</script>
probably not the most efficient way to approach this but it works. tweak as u see fit.
var myVar = setInterval(myTimer, 1000);
var oncount=0;
var offcount=0;
var bool=true;
function myTimer() {
if (bool){
oncount+=1
document.getElementById("demo").style.display='block';
if (oncount==300)
{
bool=false;
oncount=0;
}
}
if (bool==false){
offcount+=1
document.getElementById("demo").style.display='none';
if (offcount==300){
bool=true;
offcount=0
}
}
}
use setInterval can do any time you want .Also used == to make sure none or block.
<script>
var div = document.getElementById('off');
setInterval(function(){
changingDiv();
},5*6000);
function changingDiv(){
if(div.style.display == 'none' || div.style.display == ""){
div.style.display = 'block';
}
else{
div.style.display = 'none';
}
}
</script>
If I'm understanding you correctly, you want to show an element after 5 minutes and then hide it again after another 5 minutes (if this is not the case then please edit your question to clarify).
What's not clear is whether you just want to do this once or continuously so I've provided both options below, which use different classList. For the purposes of these examples, I have the changes triggering every 3 seconds (3000ms) so you can see it in action; just changes the occurrences of 3000 below to 300000 for 5 minutes.
To execute the sequence just once, nest a timeout within another timeout, removing and then adding .hide class:
var div=document.querySelector("div");
setTimeout(function(){
div.classList.remove("hide");
setTimeout(function(){
div.classList.add("hide");
},3000);// change to 300000 for 5 minutes
},3000);// change to 300000 for 5 minutes
div{font-family:sans-serif;}
.hide{
display:none;
}
<div class="hide">Lorem Ipsum ...</div>
To execute the sequence continuously, use an interval to toggle the .hide class.
var div=document.querySelector("div");
setInterval(function(){
div.classList.toggle("hide");
},3000);// change to 300000 for 5 minutes
div{font-family:sans-serif;}
.hide{
display:none;
}
<div class="hide">Lorem ipsum ...</div>
Related
This is part of a larger Three.js project but basically what I am trying to do is display a div for 5 seconds and then making it disappear based on user interaction. However, if the user triggers the interaction before the 5 seconds are up, the current div must disappear to be replaced by a new div and stay for 5 seconds. I am using jQuery for DOM interaction
Here is my code:
let lastdiv = 1;
function displayState(text){
if ($("#temp"+String(lastdiv))){
$("#temp"+String(lastdiv)).remove();
}
lastdiv += 1
body.append('<div id = "temp' + String(lastdiv) +'" class = "state">' + text + '</div>');
setTimeout(function(){
if($("#temp"+String(lastdiv))){
$("#temp"+String(lastdiv)).remove();
}
}, 5000);
}
Currently what happens is that the div shows up for 5 seconds. If there is no further interaction it disappears. However, if there is another interaction within that 5 seconds, the new div does show up but it disappears in 5 seconds since the previous div was displayed i.e. if I trigger the interaction 2 seconds after div1 is displayed, div2 will replace div1 but will disappear after 3 seconds.
If there is a better way of doing this please let me know. Thanks in advance.
Keep track of the timeout and cancel it.
const body = $("body");
let lastdiv = 1;
let timer = null;
function hideElement() {
if (timer) {
window.clearTimeout(timer);
$("#temp"+ lastdiv).remove();
timer = null;
}
}
function displayState(text){
hideElement();
lastdiv += 1
body.append('<div id = "temp' + lastdiv +'" class = "state">' + text + '</div>');
timer = setTimeout(hideElement, 5000);
}
displayState("aaa");
window.setTimeout(() => displayState("bbb"), 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Store the returned value of setTimeout in a variable and call clearTimeout to cancel it.
Demo:
var a = setTimeout(function() {
one.style.display = "none";
}, 5000);
one.addEventListener('click', function() {
clearTimeout(a);
this.style.display = "none";
two.style.display = "block";
setTimeout(function() {
two.style.display = "none";
}, 5000);
})
#two {
display: none;
}
<div id="one">This div will disappear in 5 seconds unless you click it</div>
<div id="two">This div will disappear in 5 seconds</div>
What I want:
There are two pictures that are being switched/swapped every three seconds.
I want to make it so that when the button is clicked, the picture switches and the auto-swap resets. So if the button is clicked, the image swaps and three seconds later, it will auto-swap, until the button is clicked again in which the cycle will repeat.
What I have right now
Currently, the problem is that: when the button is clicked, it messes up the timing of the auto-switches.
Edit:
Please don't create a new code base. Just modify mines. The code doesn't have to be an expert super concise level. I'm only three weeks into JavaScript (and it's my first programming language). I have to explain to classmates and it wouldn't be nice the code had elements I don't understand. So sorry for the inconvenience.
Right now I just need the button to correctly stop and restart the time.
<html>
<head>
<script>
let reset = setTimeout(change, 3000);
function change() {
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
setTimeout(change, 3000);
}
function fastChange() {
clearTimeout(reset);
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
}
</script>
</head>
<body>
<input type="button" onclick="fastChange();">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" id="picture">
</body>
</html>
The reason why your timer resets is because you are not clearing the timeout.
you need to make a reference to the timeout and then use clearTimeout() on it whne you make the fast change. I don't think it is possible or wise to do that inline the way you have it so you code needs to be refactored
let imgSrc1 = 'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350'
let imgSrc2 = 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'
let imgElement = document.getElementById('picture');
let timeout;
function change() {
if(imgElement.src === imgSrc1) {
imgElement.src = imgSrc2;
} else {
imgElement.src = imgSrc1;
}
if (timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(change, 3000);
}
You don't even need the second function fastChange. Now you can sent the onClick listener to change() like this
document.getElementById('whatever you want to click').onCLick = change;
Setting and clearing timeouts in multiple places will work, but I prefer using a "main loop" and a variable to count frames.
Here's an example that uses setInterval and resets a timer variable when the button was clicked:
const url1 = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
const url2 = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
function change() {
picture.src = picture.src == url1 ? url2 : url1;
}
var timer = 0;
setInterval(function() {
timer++;
time.textContent = timer;
if (timer === 30) fastChange();
}, 100);
function fastChange() {
change();
timer = 0;
}
picture.src = url1;
swap.onclick = fastChange;
#picture {
height: 70vh
}
<button id="swap">SWAP</button> <span id="time"></span><br>
<img id="picture">
You can do this by calling setTimeout and updating the index as necessary. Just be sure to store the most recent timeout id so that it can be cancelled on reset using clearTimeout.
// store the reference to the <img> that contains the picture
const pic = document.getElementById('picture')
// store a list (array) of the two picture urls
const sources = [
'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350'
]
// used to store a reference to the interval timer you created.
var lastTimer
// a starting index of the list (i.e. which image we are up to right now)
var index = 1
// this functions swaps the image and sets a timer
function startRotation() {
// update the index to the next one (goes 0-1-0-1->etc)
index = 1 - index
// sets the .src of the image element
pic.src = sources[index]
// starts a 3 second timer to call this same function again
// but also stores a reference to the timer so that it can be cancelled
lastTimer = setTimeout(startRotation, 3000)
}
// this functions resets the timer and restarts the process
function reset() {
// stop the current timer if there is one
if(lastTimer){
clearTimeout(lastTimer)
}
// restart the process
startRotation()
}
// start the swapping process on start
startRotation()
<input type="button" onclick="reset();">
<img id="picture">
NOT HOW YOU CLEARTIMEOUT:
<html>
<head>
<script>
var i;
function change() {
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
i = setTimeout(change, 3000);
}
function fastChange() {
clearTimeout(i);
if(document.getElementById("picture").src == "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350") {
document.getElementById("picture").src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350";
}
else {
document.getElementById("picture").src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350";
}
i = setTimeout(change, 3000);
}
</script>
</head>
<body onload="setTimeout(change, 3000)">
<input type="button" onclick="fastChange();">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350" id="picture">
</body>
</html>
this is the code that comes in head section and it will automatically refresh the whole page in 1 min as i put 6000 in the code below
<script type="text/javascript">
setTimeout('window.location.href=window.location.href;', 6000);
</script>
is there any way for example, when there's 10 seconds left to refresh the page then, a button will display and say "Click here to reset timer" and it will reset that timer to 1 min again?
<script language="javascript">
var timeout,interval
var threshold = 15000;
var secondsleft=threshold;
startschedule();
window.onload = function()
{
startschedule();
}
function startChecking()
{
secondsleft-=1000;
if(secondsleft <= 10000)
{
document.getElementById("clickme").style.display="";
document.getElementById("timercounter").innerHTML = Math.abs((secondsleft/1000))+" secs";
}
}
function startschedule()
{
clearInterval(timeout);
clearInterval(interval);
timeout = setTimeout('window.location.href=window.location.href;', threshold);
secondsleft=threshold;
interval = setInterval(function()
{
startChecking();
},1000)
}
function resetTimer()
{
startschedule();
document.getElementById("clickme").style.display="none";
document.getElementById("timercounter").innerHTML="";
}
</script>
Please wait...<span id="timercounter"></span>
<button id="clickme" style="display:none;" onclick="javascript:resetTimer();">Click here to reset timer</button>
Assuming you have the following html for the button:
<button id="cancel-reload-button" style="display: none" onclick="cancelReload()">Cancel Reload</button>
And this as the script (Note: this gives the idea, but is not neccesarily fully tested):
// Variable for holding the reference to the current timeout
var myTimeout;
// Starts the reload, called when the page is loaded.
function startReload() {
myTimeout = setTimeout(function() {
document.getElementByID("cancel-reload-button").style.display = "inline";
myTimeout = setTimeout(function() {
window.location.reload();
} 10000)
}, 50000);
}
// Cancel the reload and start it over. Called when the button is
// clicked.
function cancelReload() {
clearTimeout(myTimeout)
startReload()
}
// On page load call this function top begin.
startReload();
I created two functions, one for starting the reload and the second one for cancelling it.
Then I assigned the timeout to the variable myTimeout which can be used to later cancel the timeout.
Then I called myTimeout twice - Once for 50 secs, at which point it shows the button and once for 10 secs after which it finally reloads.
How about below? If you click on OK to reset timer, it would keep giving the confirm box every 50 seconds. If you click cancel, it will refresh the page in 10 seconds.
setInterval(function(){ var r = confirm("Reset Timer");
if (r == true) {
setTimeout('window.location.href=window.location.href;', 60000);
} else {
setTimeout('window.location.href=window.location.href;', 10000);
}
}, 50000);
Note: In your question you specified 1 minute, but your code works for 6 seconds(6000 -- > 6 seconds not 60 seconds) I have included for a minute
You can use 2 setTimeout calls, one to make the "Reset" button show up and another one for the refresh timer reset. The trick is to store the second setTimeout on a global variable and use clearTimeout to reset it if the button is pressed.
Here is some JavaScript code to illustrate:
<script type="text/javascript">
var autoRefreshTime = 30 * 1000; // 60000ms = 60secs = 1 min
var warningTime = autoRefreshTime - (10 * 1000); // 10 secs before autoRefreshTime
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
warningTimeout = setTimeout('ShowResetButton();', warningTime);
function ShowResetButton() {
// Code to make the "Reset" button show up
}
// Make this function your button's onClick handler
function ResetAutoRefreshTimer() {
clearTimeout(waitTimeout);
waitTimeout = setTimeout('window.location.href=window.location.href;', autoRefreshTime);
}
</script>
The way I would do it is make a function with a timeout, and invoke that function
<script type="text/javascript">
var refreshFunc = function(){
setTimeout(function(){
var r = confirm("Do you want to reset the timer?");
if(r === false){
window.location.href=window.location.href;
}else{
refreshFunc();
}
}, 6000);
};
refreshFunc();
</script>
One big problem with using confirm in this case is you cannot program it to reject. You would have to implement you own modal/dialog box so you can auto reject in 10 seconds.
Try using setInterval():
var time;
$(function() {
time = $('#time');
$('#reset').on('click', reset);
start();
});
var timer, left;
var start = function() {
left = +(time.text()); //parsing
timer = setInterval(function() {
if (0 <= left) {
time.text(left--);
} else {
clearInterval(timer);
location.replace(location);
}
}, 1000);
};
var reset = function() {
if (timer) {
clearInterval(timer);
}
time.text('59');
start();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1><span id='time'>59</span> second(s) left</h1>
<input id='reset' value='Reset' type='button' />
I want to delay the appearance of an image by about 5 mins, and then once it appears I want it to disappear after 10 seconds.
I've been able to delay the appearance of an image using the code
<script type="text/javascript">
function showBuyLink() {
document.getElementById("buylink").style.visibility = "visible";
}
// adjust this as needed, 1 sec = 1000
setTimeout("showBuyLink()", 300000);
</script>
But then i'm unable to make it disappear.
This one may helps to you
function showBuyLink() {
document.getElementById("buylink").style.display = "block";
setTimeout(function (){
document.getElementById("buylink").style.display = "none";
}, 10000);
}
// adjust this as needed, 1 sec = 1000
setTimeout(showBuyLink(), 300000);
The answer is actually in your own code: setTimeout(…) is used to call a function after some time, so you can just create a second function (i.e. "hideBuyLink") and put another call to setTimeout into showBuyLink().
However, it looks as if you tried to put JavaScript onto a real site on which one shall be able to buy stuff. I advise you to contact someone to help you with the coding, since this is a beginners question, and I am afraid that you might make mistakes which could eventually be exploited by someone malicious.
Just set another timer in the show function that points to a hide function:
<script type="text/javascript">
function showBuyLink() {
document.getElementById("buylink").style.visibility = "visible";
setTimeout("hideBuyLink()", 10000);
}
function hideBuyLink() {
document.getElementById("buylink").style.visibility = "hidden";
}
// adjust this as needed, 1 sec = 1000
setTimeout("showBuyLink()", 300000);
</script>
Alternetively, if you want it in one function:
<script type="text/javascript">
function showBuyLink(){
var buyLink = document.getElementById("buylink");
if(buyLink.style.visibility == "hidden"){
buyLink.style.visibility = "visible";
setTimeout("showBuyLink()", 10000);
}else{
buyLink.style.visibility = "hidden";
}
}
// adjust this as needed, 1 sec = 1000
setTimeout("showBuyLink()", 300000);
</script>
Yet another way to do it.
setTimeout(function() {
document.getElementById("buylink").style.visibility = "visible";
setTimeout(function() {
document.getElementById("buylink").style.visibility = "hidden";
}, 10000);
},300000);
hey, how can I have my download link hidden, and make a count down type thing. Maybe have it count down from 10 and once it's done that have the download link appear, it would be best to do it in js right?
does anyone know how to do this? :D
Thanks
Complete example:
<span id="countdown"></span>
<a id="download_link" href="download.zip" style="display:none;">Download</a>
<noscript>JavaScript needs to be enabled in order to be able to download.</noscript>
<script type="application/javascript">
(function(){
var message = "%d seconds before download link appears";
// seconds before download link becomes visible
var count = 10;
var countdown_element = document.getElementById("countdown");
var download_link = document.getElementById("download_link");
var timer = setInterval(function(){
// if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed
if (count) {
// display text
countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count);
// decrease counter
count--;
} else {
// stop timer
clearInterval(timer);
// hide countdown
countdown_element.style.display = "none";
// show download link
download_link.style.display = "";
}
}, 1000);
})();
</script>
You can use setInterval for this. setInterval behaves like a timer, where you can run a certain function periodically. Something like this should do the work(untested):
$(".link").hide();
var iteration = 0;
var timer = setInterval(function() {
if(iteration++ >= 10) {
clearTimeout(timer);
$(".link").show();
$(".counter").hide();
}
$(".counter").text(10 - iteration);
}, 1000);
This will initially hide the download link and run a function every second which counts down from 10. When we reaced ten, we hide the counter and show the link. ClearTimeout is used so that we don't count after we reached ten. Easy as dell.
Edit: As mentioned in the comments, this function is using jQuery to find the elements.
Take a look at the setTimeout function. You can do something like:
function displayLink() {
document.getElementById('link_id').style.display = 'block';
}
setTimeout(displayLink, 10000);
var WAIT_FOR_SECONDS = 10;
var DOWNLOAD_BUTTON_ID = "btnDownload";
if (document.body.addEventListener) {
document.body.addEventListener("load", displayDownloadButton, false);
} else {
document.body.onload = displayDownloadButton;
}
function displayDownloadButton(event) {
setTimeout(function() {
_e(DOWNLOAD_BUTTON_ID).style.display = "";
}, WAIT_FOR_SECONDS*1000);
}
function _e(id) {
return document.getElementById(id);
}