Add class to elements one by one jquery EDITED - javascript

2ยบ EDIT:
thought it was solved but it isn't. when a page is loaded i want to add a class to some elements(on this case is to buttons) and for now my code is:
$("button").each(function(index){
// add the class
setTimeout(function(){
$(this).addClass("varrimento");
}.bind(this),index*5000);
// remove the class
setTimeout(function(){
$(this).removeClass("varrimento");
}.bind(this),(index+1)*5000);
});
This code add the class "varrimento" for 5 secs to each button one by one but it has 2 problems.
When i change page and return to the initial page it's like the
setTimeout of the first visit on the page it's still running, so on
the second visit the code of "varrimento" it's added to the buttons
again and they are not one by one like the first visit.
In some pages, don't know why, it takes too long to adding the class
to the elements. ex: on page "index" right after i visit page, the
class is added immediately to the first button but changing to second
page (code is the same, the only thing that differs is the amount of
buttons) it takes like 15secs to the first button have the class.
Second day in a row trying to solve this problem but can't figure it out. any help guys?

Save your timeout variable in localStorage and then remove it -
var timeout = setTimeout(auto_reload, 90000);
localStorage.setItem("timeout", timeout);
var timeout = localStorage.getItem("timeout");
clearTimeout(timeout);

Related

Load Button when Function is Finished

I have a issue with adding a button that should become visible after a Java script function is completed.
Code source:
"https://codepen.io/arcs/pen/rYXrNQ"
Note: code is not mine obviously and I take no any credit for this
Elaboration:
I moved this code to a simple html page, everything went fine.
Once the registry form is finished, text message will display with a small time delay.
What I would like to have here is, a button with timeout function (a bit longer than text message) under the text message, from where I can navigate the user to the next page.
Once again, when the entire process of this code is finished, text message will load.
I need a button to load below that text.
I need button to move user to the next page, so it should contain a link and open in same tab could be also added.
Any help with this would be highly appreciated.
First off create an 'a' tag with the link to the next page. Make sure you give it an id for the javascript part.
<a id="button" href="path_to/nextpage.html">Text for the button</a>
Do add basic CSS to it like position, width, and height. Set the opacity to 0 and pointer-events to none.
//other properties
opacity:0;
pointer-events:none;
//other properties
Once you have done this, just get a variable to point to the tag and add another setTimeout function which sets the opacity to 1 and pointer-events to all
var nextbtn = document.getElementById("button"); //or whatever id you gave the <a> tag
setTimeout(function() {
nextbtn.style.opacity = "1";
nextbtn.style.pointerEvents="auto"
}, 500);// you can change the delay to suit your requirements
I hope this clears your issue. Have a good day!

How can I click 2 buttons simultaneously?

I work in a Call center (ticket based Support) and for me to get a ticket I need to click on 2 Buttons. the one that opens the tickets section, and the one that actually gets me a ticket. After i click on the Get_ticket class, the ticket box closes. So i need to start again to click on the "Tickets" Button, and then on Get_Ticket. Tickets button -> Get_ticket. And repeat and repeat. I want to tell Google console to help me with this. I found a way but it's not very friendly. I tried with the button.click function at a different interval but it's not working...If i put the function separately, it's working, but when I put the functions at the same time in Console, it's not working. Can you please give me an advice ? Those are the functions:
1.(click on TICKETS)
var button = document.getElementsByClassName("_1f8o8ru7")[0];
setInterval(function(){button.click();},2000);
2.(Click on GET TICKET)
var button2 = document.getElementsByClassName("_sl2x43m")[0];
setInterval(function(){button2.click();},2500);
The second interval should be added inside the first interval. I also recommend to use setTimeout, instead of setInterval.
setInterval(function(){
var button = document.getElementsByClassName("_1f8o8ru7")[0];
button.click();
setInterval(
function(){
var button2 = document.getElementsByClassName("_sl2x43m")[0];
button2.click();
},2500);
},2000);
After you figure it out, you can save your code in a js file: my_script.js and use Chrome extension JS Injector to automatically inject it in your page, without needing to use Chrome DEV Tools.
you need to call first button click on click of first button call another method on given timeout
so first time 1 button is clicked after on click of first button call another button method with 500 timeouts will be ok no need to do 2000 or 2500 timeout

clickNextButton not executing properly when previously clicking on the next button

I am building a survey in Qualtrics and use the method clickNextButton to automatically direct the participant to the next page with questions. I implemented the method in several following pages. Furthermore, participants are also able to click the next button themselves. The problem arises when they do so: if they click on the next button before the time limit, in the next page the method directs the participant earlier than given to the page after that one.
this.hideNextButton();
var that = this;
(function(){that.clickNextButton();}).delay(40);
For example, I set the time limit on 40 seconds on every page. On page 1, the participant manually clicks on the 'next button' after 10 seconds. What happens then is that on page 2, the participant is forwarded to page 3 after 28 seconds instead of 40. If he would have clicked on the 'next button' on page 1 after 5 seconds, he would have been forwarded on page 2 to page 3 after around 33 seconds. So it apparently depends on his click speed on page 1 when he will be directed on page 2. How can I prevent this?
Rather than using the timer for automatic redirection. call respective on click method when the question is answered so it will redirect to the respective page. and also reset the timer on every page redirection.
You need to clear the timeout if the respondent clicks the Next button themselves (delay is just a prototypejs implementation of setTimeout). Do it something like this:
Qualtrics.SurveyEngine.addOnReady(function() {
this.hideNextButton();
var that = this;
var timer = setTimeout(function() { that.clickNextButton(); },4000);
Qualtrics.SurveyEngine.addOnPageSubmit(function() { clearTimeout(timer); });
});

How do I get protractor to check for an element before the page loads completely?

I am starting off on a non-angular page, clicking a button with browser.findElement.
Upon clicking on the element the user is taken to an angular page that has a spinner until the page load is complete. Using the following code, protractor waits for the page to load completely before doing the below and I would like it to begin checking for the page-busy-indicator as soon as the initial button is clicked because by the time it gets to this code, the spinner is no longer active.
browser.wait(function(){
element(by.className('page-busy-indicator')).getAttribute('class').then(function(value){
console.log(value);
if(value.indexOf('active')>-1){
return true;
}
});
});
Thanks to finspin and Barney for their comments that pointed me in the right direction. In the end, I needed to turn off waitForAngularEnabled and then use the opposite of what Barney had mentioned (presenceOf). Sorry if the question was confusing because of the way I worded it. Thanks again!
Note that what this is doing is setting up a watch for .page-busy-indicator.active and looking for it for 5 seconds before timing out.
browser.waitForAngularEnabled(false);
browser.wait(protractor.ExpectedConditions.presenceOf(element(by.css('.page-busy-indicator.active'))), 5000);

Hide tr from table after a specific time

I have this script that hides tr when it finds "text":
$('tr:has(td:contains("text"))').hide()
I want this to happen after a specific time, let's say 10 minutes. How I can do this?
Use setTimeout function.
setTimeout(function(){
$('tr:has(td:contains("text"))').hide()
}, 600000);
More details here
updated as per comments. Using #localStorage & #delay.. Whenever user runs the code for the first time it and hides the element after delay. On reload/revisit it will hide it on load.
if(localStorage.getItem("isFirst") == null)
$('tr:has(td:contains("text"))').delay(600000).hide(0)
else{
localStorage.setItem("isFirst",1)
$('tr:has(td:contains("text"))').hide()
}
whenever you want to reset the localstorage flag, add this
localStorage.removeItem("isFirst");

Categories

Resources