I'm new to coding. I am using image as my button. I want to hide the button when click and timer to start. When timer finish, i want a link to open automatically. (One more issue I've described at the end)
here is HTML and JAVASCRIPT that i'm using right now
<div id="download_button">
<a href="https://www.google.com">
<img src="https://1.bp.blogspot.com/-cel0yjs0H4A/X1tGU7oDpyI/AAAAAAAAATk/zw9Qa7YUnT4KOe8exOaxx-LJlFFofhjMACLcBGAsYHQ/s150/pdf-download-link.png" /></a>
</div>
<center>
<b>
<span style="font-size: 30px;">
<span id="countdown"></span>
</span>
</b>
</center>
and JAVASCRIPT
<script type="application/javascript">
document.getElementById("download_button").addEventListener("click", function(){
var timeleft = 5;
var downloadTimer = setInterval(function function1(){
document.getElementById("countdown").innerHTML = "Please wait "+ timeleft + " seconds";
timeleft -= 1;
if(timeleft <= 0){
clearInterval(downloadTimer);
document.getElementById("countdown").innerHTML = "downloading..."
}
}, 1000);
console.log(countdown);
});
And there is one more issue that i want to fix.
When 2 seconds left, "downloading..." appears. I want it to be appear when 1 second left instead of 2 seconds.
Thank you
As a small hint, please describe what does and what doesn't work with your attempt.
Anyway, your countdown probably doesn't work, so let's look into that.
The first issue is that upon clicking the link, your browser immediately follows it, but you want a countdown. We thus have to prevent this from happening. The preventDefault() method of Event might help you with that.
Your event listener would then start out like this:
document.getElementById("download_button").addEventListener("click", function(event){
event.preventDefault()
Now we need to hide the image. This can be done by setting it's display property to none, which might look like this:
document.querySelector('#download_button a img').style.display = "none";
After the countdown finishes, you need a way to actually trigger the download.
We could simulate a click by using the below code, but that would just create an infinite loop...
document.querySelector('#download_button a').click();
It is in fact much easier to directly trigger a navigate from JS:
window.location.href = document.querySelector('#download_button a').href;
Here we used querySelector to select the right element and edit it. It's very versatile, but if your button moves, you might have to change the selector. Using an id would be more stable.
Now, your last problem is that the downloading... phase is triggered too soon.
This is a typical problem of ordering statements. In your code, you decrease the value of timeleft before checking if it's 0. If you put that line all the way at the end, your problem will be solved.
I made a JSFiddle to show you how these things might work together.
Finally, I would like to remark that using things like <center> and <b> is discouraged (it should be done in CSS). Best of luck with your further learning!
A few ideas.
There is a delay starting the countdown. Solution: Add a countdown message above the setInterval
To fix the DL starting too early, move the timeleft - 1 above the next message
To prevent the a tag default behavior, add e.preventDefault() (which requires that you pass the e into the function)
Handy trick: use $ to replace all the document.getElementBy queries (note: this is not jQuery!)
const $ = document.querySelector.bind(document);
var timeleft = 5;
$("#download_button").addEventListener("click", function(e){
e.preventDefault(); //prevent the default a navigation behavior
$("#download_button").style.display = 'none';
$("#countdown").innerHTML = "Please wait "+ timeleft + " seconds"; //for quick start
var downloadTimer = setInterval(function function1(){
timeleft -= 1; //moved this line up 1 to fix timing
$("#countdown").innerHTML = "Please wait "+ timeleft + " seconds";
if(timeleft <= 0){
clearInterval(downloadTimer);
$("#countdown").innerHTML = "downloading...";
let dlRef = $("#download_button a").href;
window.location.href = dlRef;
}
}, 1000);
});
<style>
#countdown{font-size:30px;}
</style>
<div id="download_button">
<img src="https://1.bp.blogspot.com/-cel0yjs0H4A/X1tGU7oDpyI/AAAAAAAAATk/zw9Qa7YUnT4KOe8exOaxx-LJlFFofhjMACLcBGAsYHQ/s150/pdf-download-link.png" />
</div>
<div id="countdown"></div>
Also, try not to inline your styles. Inline styles look like this:
<span style="color:red">This is red</span>
Either use a style tag, or an external file for your styles:
<span class="fgRed">This is red</span>
<style>
.fgRed{color: red;}
</style>
Related
I have a problem. I am making an addon for Chrome and I want to check a value each time the timer is at 15 sec in an external website.
I have got this, for example:
<div id="timer">17.38</div>
or
<div id="timer">7.16</div>
I need to activate an event when my div is:
<div id="timer">15.00</div>
I need an event execute function in Javascript.
I need your help please
you can use this :
setInterval(function(){
check_timer();
}
,100)
the check function
function check_timer(){
var obj = document.getElementById("timer");
if (obj.innerHTML == "15.00"){
//your code here
}
}
Well i want to build a bot thats clicks a button after amount of time like every 5 hours,
how can i do that?
i prefer in PHP , but if there any other language that you know , i know also C#,Java,JS..
any suggestions to start, i just never did it before and i want to do learn how to do it very much, i have been searching, didn't find nothing.
Thank a lot!.
I already tried in chrome what the button send , and it send javascripts:void(0) something like and location.href = /Blah/blaahh.php.
So basically your question is programmatically click a button and trigger it in a certain time interval. So what came up to my mind was the solution below:
<script>
setInterval(function(){
$('#button').trigger('click');
}, 3000);
</sctipt>
The code above will trigger and the button will be triggered as clicked and it will take place for every amount of time. After the button is being clicked, try to add some function to handle the event after the button is technically being clicked.
Hope it helps =)
You must use setTimeout on every n < 10 seconds to prevent the browser from sleeping, setInterval with hours not a good idea.
In my opinion, The best two ways to implement something like that is:
Node.js
setTimeout every 10 seconds and loop on the same function, and each time check if the last click was 5 hours ago.
Javascript Example setTimeout:
var CLICK_EVERY_TIME = 10 * 1000; // i choosed to click every 10 sec
var clickCount = 0;
var lastClick = 0;
var loops = 0;
$(window).ready(function(){
// on page load start you auto clicker
runner();
});
function performClick(){
clickCount++;
$('#clickCount').html("clicks: "+clickCount);
// save last click time
lastClick = new Date().getTime();
}
function runner(){
loops++;
var currentTime = new Date().getTime();
if(currentTime - Number(lastClick) > CLICK_EVERY_TIME){
performClick();
}
$('#loops').html("runner: "+loops+" loops");
setTimeout(runner, 1000); // every 1 seconds
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="clickCount">clicks: 0</div>
<div id="loops">runner: 0 loops</div>
Node.js:
You have to use jsdom to simulate a browser, and perform your clicks.
Note: In Node.js you can use setInterval with hours as mush as you want, because the Node.js on standalone process.
I currently have a JavaScript file that will change the testimonial shown every five seconds. Everything works perfectly, except for the first five seconds, nothing appears. If I put a value where the JavaScript function is being called, it does show up initially, then is replaced by whatever the first testimonial is.
Here is the HTML code where the JavaScript is being called.
<html>
<head>
<SCRIPT language="JavaScript" SRC="textCycle.js"></SCRIPT>
</head>
<body>
<table border = 0><tr><td style="width:300px;"> <!-- Change the height in order to determine width of quotes -->
<div id="change"></div></td></tr></table>
</body>
</html>
Here is the Javascript:
var quotes=new Array(5);
var i = 0;
var authors=new Array(5);
//Load Quotes into array
quotes[0]="\"Website is awesome!\"";
quotes[1]="\"Love it!\"";
quotes[2]="\"Awesome site!\"";
quotes[3]="\"This site was very informative and helped with my problem.\"";
quotes[4]="\"Best site for helping with this issue.\"";
//Load authors that correspond with the quote array
authors[0]="Anonymous";
authors[1]="Anonymous";
authors[2]="Anonymous";
authors[3]="Anonymous";
authors[4]="Anonymous";
//Call the changeText() function every 5000 miliseconds
setInterval(changeText, 5000);
//Function that determine what quote and author to put in html.
function changeText(){
document.getElementById("change").innerHTML=(quotes[i] + '<p style="text-align: right"><i>' + authors[i] + '</i></p>');
if(i == 4)
i = 0;
else
i++;
}
Is this just a matter of changing the javascript file so that quotes[0] is outside of the loop?
Note: The values in the arrays were changed to keep it anonymous. These aren't real testimonials.
Just add changeText() (call your function) anywhere in your code before setInterval(). Well, it is not mandatory.
Fiddle
If you add the call to changeText() as mentioned, it likely still will not work. This is because the DOM has not been parsed yet. You should call it after the DOM is ready. One way to do this would be to put it in the onload event. This is the easiest way without a third-party library, but also waits until all images have been loaded. Here is an example:
<body onload="changeText()">
setInterval waits the interval duration (5 seconds) before executing the first time.
You could just call it once before setting the interval, and you'll be good to go. Eg:
//Call the changeText() function every 5000 miliseconds
changeText();
setInterval(changeText, 5000);
I'm currently preparing a cool video presentation on my html web page. At the end of it, I want to be able to click on the video and be taken to a page - however I only want the link to come into effect at a certain time.
I've done some research and I can't find anything about this.
As an example, let's say that I want to make a link on something...
This link will go somewhere after 15 seconds
How can I make it so that <a> tag doesn't work for 15 seconds with jQuery or JavaScript? (JavaScript preferred but it doesn't really matter!). Remember - I don't want that whole line of code to suddenly appear - prior to the link working that should just be text!
Thanks!
Here delay is set to 3 seconds (3000 milliseconds in call to setTimeout). Change it to 15000 to make it 15 seconds
$(document).ready(function() {
setTimeout(convertTextToLink, 3000);
});
function convertTextToLink() {
$('#thanks').html('Thanks for watching. You may now proceed.');
}
Html
<h1>Hello</h1>
<p>here are your vids</p>
<div id="thanks">Thanks for watching</div>
var waiting = true;
//set waiting to false after 15 seconds
setTimeOut(function() { waiting = false },15000);
$('#automate').click(function(e) {
if(waiting === true) {
e.preventDefault(); //prevent the link from firing
}
});
i'm having a little problem with jquery/javascript countdown and i'm hoping you can help me.
so, i have timer function, which has a one parameter, called selector (jquery selector) ..
function timer(selector) {
self = $(selector);
var sec = parseInt(self.find('span.timeout').text());
var interval = setInterval(function() {
sec--;
if (sec >= 0) {
self.find('span.timeout').text(sec);
} else {
setInterval(interval);
}
}, 1000);
}
in, html i have something like this.
<div class="element" id="el1"><span class="timeout">10</span></div>
<div class="element" id="el2"><span class="timeout">10</span></div>
multiple elements with same class and different id's
and the usage of the function is like this:
$("body").on('click', '.element', function() {
timer(this);
});
on the first click it works just fine, timer counts down.
but when i click on the second div with same class, first counter stops and the second goes from the previous second.
so, how can i do multiple countdowns on same page with js/jquery, so i could click on both elements and both timers work fine?
demo: http://jsfiddle.net/zKTkj/
You forgot to declare self with var. As a result, self became a global variable. You were overwriting this global ("shared") variable when the second timer was being created. So, both timers were from then on, at the same time, ouputting to the second element, causing glitches.
You probably meant clearInterval(interval).
http://jsfiddle.net/zKTkj/1/