Automate html in Javascript/jQuery - javascript

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

Related

click a button programmatically in a website

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.

How do you refresh a page or certain content for a number of times and then stop?

I have a HTML page which has CSS animations and I wanted to know if there is a way where I wanted the page to reload 3 times and then stop it. Also when reloading it 3 times, for each time I want it to have a delay so for example the first time when my page loads it will play the animations and then after all the animations have been played I want it to reload again so some kind of a delay function?
Thank you.
Add this on page load.
<script>
var timeinmilliseconds = 3000;
var reloadCnt = window.sessionStorage.getItem( "reloadCounter") ? parseInt(window.sessionStorage.getItem( "reloadCounter")) + 1 : 1;
window.sessionStorage.setItem( "reloadCounter", reloadCnt )
console.log(reloadCnt);
if ( reloadCnt <= 3 )
setTimeout(function(){ window.location.reload(true) }, timeinmilliseconds);
</script>
Let me know if this helps. This is pure javascript, just add it to your page and let me know. Here is the link http://jsfiddle.net/

Limiting click detection on the page [javascript]

I'm trying to limit the user's ability to click on an object to a certain time limit. I looked around and found that apparently, setTimeout() is the correct function to use for this type of thing. I've applied the function to my code, but its not working. I'm thinking/know now that the problem is that the setTimeout in my code isn't limiting the actual click event, which I need to do. Here is a snippet of my click code:
function clickRun(event) {
var $objectVersion = correspondingObject(event.target.id);
if (isAnyVisible() == false) { // none open
$objectVersion.makeVisible();
} else if (isAnyVisible() && $objectVersion.isVisible()) { //click already open div
$objectVersion.makeInvisible();
} else if (isAnyVisible() && $objectVersion.isVisible()==false) { //different div open
searchAndDestroy();
$objectVersion.delay(600).makeVisible();
};
};
$('.ChartLink').click(function(event) {
setTimeout(clickRun(event),5000);
});
I've also created a JSFiddle to represent what I'm talking about: http://jsfiddle.net/FHC7s/
Is there a way to achieve limiting the actual click detection on the page?
I think the easiest way to do it is to keep track of the time of the previous click and if the current click is too soon after that, then don't do anything:
onClick = function(){
if(new Date().getTime() - lastCheck < MIN_CLICK_SPACING) return;
}
Have a look at this JSFiddle, I've set it up so you can have the button disable itself for time duration after detecting a click. Just make sure to remember how your closures are operating with your setTimeouts.
Your code contains an error... your line should be
setTimeout(function(){clickRun(event)},5000);
but even then I don't think that's exactly what you're looking for; that code will "delay" the click by 5 seconds, not actually prevent more clicks. If your true intent is to ignore all clicks after a certain amount of time, then I would go with mowwalker's answer; there's no way to stop the clicks, but you can check to see if you should honor them or not.

Refresh a certain div

Can anyone give me advice on how to make a div refresh.
I'm making a chess game and I want the div to load every time the other player posts data into the database. My game is almost finished the thing is, when you move a piece, Player 2 wont see the move that Player 1 made, when Player 2 refreshes the browser he/she can now see that the Player 1 has moved a piece.
How can I achieve this automatically?
I'm using jQuery and Ajax.
something like:
<script type="text/javascript">
window.onload = setupRefresh;
var interval = 1000;
function setupRefresh() {
setTimeout("refreshPage();", interval); // milliseconds
}
function refreshPage() {
//get game state using ajax and update div
}
this will refresh every second (== 1000ms, change to what you want/need), you need to implement the stuff in refreshPage()
Try this,Auto Load and Refresh Div every 10 Seconds with jQuery.
cant answer more without showing what you already done?
Hope something like this might help you... :)
$(document).ready(function(){
setInterval(targetDiv, 1000);
});
function targetDiv(){
$.ajax({
url: "/refresh_your_div_function",
//Other code u need to perform
}).done(function() {
//Your code
});
}

Code being multiplied and all instances are running

My website works in a way so that any links clicked do not load a new page but however trigger a .load() event into a div named "content".
Everything has been nice and dandy but now I have run into a small problem.
On one of the content pages, I have the following code:
$('.count').each(function () {
$this = $(this);
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});
The code works... it works very well. But when I load that same page again, it seems like the code is running twice because the seconds are going down by 2 at a time. Then when I load it again, it's going down by 3 seconds at a time. Another load, and it goes down by 4 seconds at a time. I load it a couple more times and it goes down faster then I can read.
I tried giving the .count divs their own unique id's (the .remain div is nested inside the .count div), even when pages are subsequently loaded the id is still entirely different and this did not fix my problem. I also tried putting clearInterval(countdown) right before the function but that just made it stop working entirely. Any suggestions?
And yes I know the countdown doesn't currently stop when it reaches 0.
Try this:
var countdown;
$('.count').each(function () {
$this = $(this);
if (!countdown)
countdown = setInterval(function(){
countnow = parseInt($('.remain', $this).html());
$('.remain', $this).html(countnow-1);
}, 1000);
return false;
});

Categories