Develop Reference

fail to create function interval to prevent other function run

hello i try to create the function to prevent the other function to run for 10 minutes IF user close the content and refresh the page.
the other function is to show the content when we scroll with 2 argument
first: it will run the function with first argument with no interval, if user click close and refresh. it will run the second argument that give interval
heres my code.
https://jsfiddle.net/8c1ng49a/1/
please look this code
var popUp= document.getElementById("popup");
var closePopUp= document.getElementsByClassName('popup-close');
var halfScreen= document.body.offsetHeight/2;
var showOnce = true;
var delay;
function slideUp(){
popUp.style.maxHeight="400px";
popUp.style.padding="10px 20px";
popUp.style.opacity="1";
if(popUp.className==="closed"){
popUp.className="";
}
}
function slideDown(){
popUp.style.maxHeight="0";
popUp.style.padding="0 20px";
popUp.style.opacity="0";
// add class closed for cache
if(popUp.className===""){
popUp.className="closed";
localStorage.setItem('closed', 'true'); //store state in localStorage
}
}
// start interval
function startDelay() {
delay = setInterval(slideUp, 1000);
}
// clear interval
function clearDelay() {
window.clearTimeout(delay);
}
// check if cache heve class close
window.onload = function() {
var closed = localStorage.getItem('closed');
if(closed === 'true'){
popUp.className="closed";
}
}
// show popup when scroll 50%
window.onscroll = function scroll(ev) {
// first time visited
if ((window.innerHeight+window.scrollY) >= halfScreen && showOnce) {
slideUp();
showOnce = false;
}
//same user mutilple time visited the site
else if((popUp.className==="closed" && window.innerHeight+window.scrollY) >= halfScreen && showOnce ){
startDelay();
showOnce = false;
}
};
// close button when click close
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
slideDown();
});
}
my interval didnt work onthe second argument its fire when i refresh, i dont know why.
but if add startDelay on my first arguments its work. but i need to place the interval on my second argu

When you want to make delay use setTimeout function.
Here is documentation of this function.
setInterval Repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

Javascript Text Slideshow Start from Beginning on Hover

I have added a text slideshow to a div that is called by JQuery on hover. How do I get the slideshow to start from the beginning each time the user hovers on the div? Right now it just continues to loop after the first time it is activated.
Thanks in advance!
<script>
$(document).ready(function(){
$('#mercury .infos').hover(
function () {
if($("a.active").is('.mercury')){
$("#descriptionls").fadeIn("2000");
};
var quotes = [
"Who’s the one who’s always there when that keeps happening?",
"Learn to dismantle self-defeating behaviors",
"JOIN THE FLOW TODAY",
];
var i = 0;
setInterval(function() {
$("#lstextslide").html(quotes[i]);
if (i == quotes.length)
i=0;
else
i++;
}, 1 * 4000);
});
});
</script>

You have to cancel the previous interval and call the function that updates the HTML immediately. See http://jsfiddle.net/xozL96fj/
$(document).ready(function(){
var intervalTimer = null;
$('#mercury .infos').hover(
function () {
if($("a.active").is('.mercury')){
$("#descriptionls").fadeIn("2000");
}
if (intervalTimer !== null) {
clearInterval(intervalTimer);
}
var quotes = [
"Who’s the one who’s always there when that keeps happening?",
"Learn to dismantle self-defeating behaviors",
"JOIN THE FLOW TODAY",
];
var i = 0;
function update() {
$("#lstextslide").html(quotes[i]);
i = (i + 1) % quotes.length;
}
// Call it immediately, don't wait until the interval
update();
intervalTimer = setInterval(update, 4000);
});
});

You need to make a check if your slider has already been activated. If you hover over your slider when the slider is already active, you will have to reset $i, and call setInterval() again.

Does anyone know how to make an image appear and then dissapear?

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);

Duplicated countdown timer after click event

I have this function:
var secondsRemaining = 45;
function countdown(secondsRemaining) {
var seconds = secondsRemaining;
if (secondsRemaining > 0) {
$('.timer > div').html(seconds);
secondsRemaining--;
} else {
if (secondsRemaining == 0) {
// Times up ....
}
}
setInterval(function() {
countdown(secondsRemaining);
}, 1000);
}
I am running the function in the Document ready function with:
countdown(secondsRemaining);
and also I run it again after I clicked for answer.
the problem is that I have 2 countdown timer now running simultaneously, new one that start from 45 seconds and the old one that continue from where it was.

Use clearInterval()
First, store the interval id of the first setInterval():
var secondsRemaining = 45;
function countdown(secondsRemaining) {
var seconds = secondsRemaining;
if (secondsRemaining > 0) {
$('.timer > div').html(seconds);
secondsRemaining--;
} else {
if (secondsRemaining == 0) {
// Times up ....
}
}
myinterval=setInterval(function() { //myint now contains the interval id
countdown(secondsRemaining);
}, 1000);
}
Now, when the user clicks, before setting up a new interval, cancel the first one with clearInterval():
button.onclick=function(){
//do stuff
clearInterval(myinterval)
setInterval(function() {
countdown(secondsRemaining);
}, 1000);
// do stuff
}

Sorry I don't really understand the way you have phrased the question seems to say that you intentionally want to start two time events, one when the document has loaded and the other when you click answer which are both outputting to the same element.
If the problem is you want it to have the output in two different elements then you could pass an argument of the element you could use:
countdown($('.pick-me'), secondsRemaining);
If you want to use the same element, then you could always clear the interval on each click and then set the interval for the new event, just got the update and seen Manishearths response so wont go into any more detail about it as that's probably the answer you are looking for.

Hide download link for 10 seconds? js

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);
}