When I use window.open("file") then it'll open the file as a new tab. I already tried .load but it doesn't work either. You may know how to solve my problem that the html file loads directly in the running window ?
function progress() {
var prg = document.getElementById('progress');
var percent = document.getElementById('percentCount');
var counter = 5;
var progress = 25;
var id = setInterval(frame, 64);
function frame() {
if (counter == 100) {
clearInterval(id);
window.open("welcome.html")
}
else {
progress += 5;
counter += 1;
prg.style.width = progress + 'px';
percent.innerHTML = counter + '%';
}
}
}
progress();
You can open the file in the current tab but adding the _self argument to the name parameter:
window.open("welcome.html","_self");
▲
You can also achieve the same by using window.location.href:
window.location.href = "welcome.html";
you can use
window.location.href = "welcome.html";
It will open file in same tab.
You can use window.location.assign("welcome.html"); instead of window.open("welcome.html");
See this article
Related
My son is doing times tables practice on this page, a timed test in which he gets 10 seconds for each sum.
https://www.timestables.com/speed-test/ - this is not my site or code, I have no direct control over the source code.
I want to give him a little more time per sum but I cannot find a way to modify the relevant code and make it work with 20 seconds instead of 10.
It looks to me like the relevant variable is maxTime (milliseconds) in this function, but nothing I do using the Chrome Developer Tools will modify this in a live running page to give 20 seconds instead of 10.
function startSom(){
vraagnr = vraagnr + 1;
if(vraagnr <= totaalSommen)
{
bezig = true;
$('#pbar_innerdiv').stop();
$('#pbar_innerdiv').css("width","100%");
$('#pbar_innerdiv').css("backgroundColor","#33BF00");
$('#pbar_innerdiv').css("borderColor","#33BF00");
if(mobiel){
$("#antwVak").html("");
}
else{
$("#antwoordI").val("");
$("#antwoordI").focus();
}
$('#pbar_innerdiv').stop();
start = new Date();
maxTime = 10000;
timeoutVal = Math.floor(maxTime/100);
var somT = sommen[vraagnr-1].split(",");
$('#somVak').html(somT[1]+"×"+somT[0]+"=");
$('#voortgangVak').html("Question "+vraagnr+" / "+totaalSommen+"<br />"+ punten + " points");
animateUpdate();
started = false;
}
else
{
showEindScherm();
}
}
Can anyone suggest what to do please?
You can copy the entire method, pase it into chrome devtools and change
function startSom() {
to
window.startSom = function() {
And obviously change your time from 10000 to 20000. This changes the amount of time it allows you to answer, but not the moving progress bar which will still only take 10 seconds.
Please paste this:
window.startSom = function(){
vraagnr = vraagnr + 1;
if(vraagnr <= totaalSommen)
{
bezig = true;
$('#pbar_innerdiv').stop();
$('#pbar_innerdiv').css("width","100%");
$('#pbar_innerdiv').css("backgroundColor","#33BF00");
$('#pbar_innerdiv').css("borderColor","#33BF00");
if(mobiel){
$("#antwVak").html("");
}
else{
$("#antwoordI").val("");
$("#antwoordI").focus();
}
$('#pbar_innerdiv').stop();
start = new Date();
maxTime = 20000;
timeoutVal = Math.floor(maxTime/100);
var somT = sommen[vraagnr-1].split(",");
$('#somVak').html(somT[1]+"×"+somT[0]+"=");
$('#voortgangVak').html("Question "+vraagnr+" / "+totaalSommen+"<br />"+ punten + " points");
animateUpdate();
started = false;
}
else
{
showEindScherm();
}
}
Here:
And if you want to make the progress bar following the new max Time, also paste this:
window.animateUpdate = function() {
if(bezig)
{
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
if(!started){
$('#pbar_innerdiv').css("width", (100) + "%");
$('#pbar_innerdiv').animate({width: 0 + "%"},20000);
started = true;
}
perc = Math.round((timeDiff/maxTime)*100);
console.log(perc);
if(perc == 33)
{
$('#pbar_innerdiv').css("backgroundColor", "#FF9500");
$('#pbar_innerdiv').css("borderColor", "#FF9500");
}
if(perc== 66)
{
$('#pbar_innerdiv').css("backgroundColor", "#FF0000");
$('#pbar_innerdiv').css("borderColor", "#FF0000");
}
if (perc <= 100) {
//updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
}
else
{
bezig = false;
showTeLaat();
//alert("tijd is om");
}
}
}
There is a possibility to change files persistently in chrome devtools: Overrides.
If the script is in a seperate file you can change the maxTime directly there or if it is in a file, which needs to be reloaded you can edit any other .js and add an eventlistener there to change the startSom method on page load.
I have a function to display dot dot dot in a popup window while generating a report. I want to display the text:
Generating Report.
Generating Report..
Generating Report...
...repeat, until the report is ready. So far I've only been able to get the three dots in the popup without the other text. Here is my code snippet:
on(link, "click", function(){
var dots = window.setInterval( function() {
var wait = document.getElementById("reportLink");
if ( wait.innerHTML.length > 2)
wait.innerHTML = "";
else
wait.innerHTML += ".";
}, 400);
domAttr.set(dom.byId("reportLink"), "innerHTML", dots);
I tried this but it didn't work:
domAttr.set(dom.byId("reportLink"), "innerHTML", "Generating Report" + dots);
The function you're passing to setInterval is directly manipulating the dom element instead of returning a value (which wouldn't work anyway), so you "Generating Report" + dots won't work since dots is just a reference to the setInterval function. Instead, you need to modify your setInterval function using something like this (untested since I'm not sure what JS library/framework you're using):
var dots = window.setInterval( function() {
var wait = document.getElementById("reportLink"),
msg = "Generating Report",
msgLen = msg.length;
// Initialize to msg if blank
wait.innerHTML = (wait.innerHTML === "")
? msg
: wait.innerHTML;
if (wait.innerHTML.length >= (msgLen + 2))
wait.innerHTML = msg;
else
wait.innerHTML += ".";
}, 400);
Instead of initializing and testing your message by empty string, this uses the actual message you want to show. I also made the number of dots configurable by variable instead of using a "magic number".
[EDIT 1]
Make sure you remove this line (and any derivatives):
domAttr.set(dom.byId("reportLink"), "innerHTML", dots);
The function you're passing to setInterval is doing all the work.
[EDIT 2: Fixed the excessive dots on first run by initializing to msg if the reportLink element is empty.]
Try this:
var dots = window.setInterval( function() {
var wait = document.getElementById("reportLink");
if ( wait.innerHTML.length > 19)
wait.innerHTML = "";
else
wait.innerHTML += ".";
}, 400);
var text = "Generating Report" + dots;
domAttr.set(dom.byId("reportLink"), "innerHTML", text);
When you check the length you need to include the length of 'Generating report'.
maybe this?
var wait = document.getElementById("reportLink");
var loop = 0;
var text = "Generating Report";
window.setInterval( function() {
if ( loop > 2) {
wait.innerHTML = text;
loop = 0
} else {
wait.innerHTML += ".";
loop++
}
}, 400);
this is my code JS
var elem3 = document.createElement('DIV');
elem3.setAttribute('id', 'eye');
elem3.style.display = "block";
elem3.style.width = "100px";
elem3.style.height = "100px";
elem3.style.zIndex = "301";
elem3.style.position = "absolute";
elem3.style.top = "0px";
elem3.style.left = "0px";
document.body.appendChild(elem3);
var danger, up = 0;
window.onscroll = function(e) {
up += 10;
document.getElementById('eye').style.top = up + "px";
}
function check() {
danger = setInterval(function() {
if (document.getElementById('eye').style.top >= 2000 + "px") {
location.href = "http://www.google.com";
clearInterval(danger);
}
})
};
check();
I want to create a div (eye) and with scroll I want that this div fall by 10px.1 scroll=10px, 10 scroll=100px. If the top of eye is greater then 2000px this will redirect the page. But this don't work because when I begin scroll, the page redirect automatically and the div don't scroll to 2000px.
if (document.getElementById('eye').style.top>=2000+"px"){
That check is wrong, the check is a string comparison, not a number comparison.
You should be using parseInt to get the number value of the position.
if (parseInt(document.getElementById('eye').style.top,10)>=2000) { ...
Why are you checking the style when the variable up should hold the value?
if (up>=2000){ ...
Don't use window.onscroll=function(e){up+=10;document.getElementById('eye').style.top=up+"px";}
1) use scrollTop and added delay in setInterval.
2) Your "if" not work, use integer instead of string
Try this:
var elem3=document.createElement('DIV');
elem3.setAttribute('id','eye');
elem3.style.display="block";
elem3.style.width="100px";
elem3.style.height="100px";
elem3.style.zIndex="301";
elem3.style.position="absolute";
elem3.style.top="0px";
elem3.style.left="0px";
document.body.appendChild(elem3);
var danger, up=0;
window.onscroll=function(e){
up = window.scrollTop() + 10; //or `up = window.scrollTop();`
document.getElementById('eye').style.top = up +"px";
};
function check(){
danger = setInterval(function(){
if (parseInt(String(document.getElementById('eye').style.top).replace(/[a-zA-Z]/g)) >= 2000){
location.href="http://www.google.com";
clearInterval(danger);
}
}, 100);//Added delay
};
check();
I think that I will build chrome extensions to count down.
In case of the present code, if popup.html is closed, processing will be completed compulsorily.
In this case, is it better to write setInterval to background.js?
Moreover, I want you to teach whether what I should do concrete.
background.js
var num = window.localStorage.setItem("minite_num", 20);
default_count = num*60;
function count_start() {
count = default_count;
chrome.browserAction.setIcon({
path: {
"19": "img/icon_count19.png",
"38": "img/icon_count38.png"
}
});
}
function count_down() {
count--;
if (count <= 0) {
page_change();
count_stop();
}
}
popup.js
var bg = chrome.extension.getBackgroundPage();
var num = bg.num;
var start_btn = document.count_timer.start_btn;
var count_time = document.getElementById("counter");
document.addEventListener('DOMContentLoaded', function () {
load();
start_btn.addEventListener('click', start_display);
});
function timer_reset() {
timerID = 0;
}
function count_format(num) {
var tm,ts;
tm = Math.floor(num / 60); //分
ts = num % 60; //秒
if (ts < 10) ts = "0" + ts;
return tm + ":" + ts;
}
function load(){
display_num = bg.count_format(bg.default_count);
bg.timer_reset();
start_btn.disabled = false;
count_time.innerHTML = display_num;
}
function start_display() {
start_btn.disabled = true;
bg.count_start();
timerID = setInterval(function() {bg.count_down();count_time.innerHTML = bg.count;}, 1000);
}
popup.html
<form name="count_timer" class="count_timer">
<div id="counter" class="counter"></div>
<input type="button" name="start_btn" value="START">
</form>
Thanks.
use chrome storage / localStorage to remember your target time.
Use an interval from the popup to update your calculations. First time, the popup needs to read from storage and determine where the countdown is at.
Nothing needs to be done from background, unless you want to separate logic (as in MVC), then maybe do all storage stuff from background, and ask for it with messaging.
I have a published open-source chrome extension (plus for trello) with a count(up) timer feature that does something similar.
I'm looking to build a very simple whack a mole-esque game in javascript. Right now I know how to do everything else except the scoring. My current animation code is as follows
<script language="JavaScript"
type="text/javascript">
var urls;
function animate(pos) {
pos %= urls.length;
document.images["animation"].src=urls[pos];
window.setTimeout("animate(" + (pos + 1) + ");",
500);
}
window.onload = function() {
urls = new Array(
"Frame1.jpg","Frame2.jpg"
);
animate(0);
}
</script>
So far it all works, the first frame is the hole and the second is the groundhog/mole out of the hole. I need to count the clicks on the second frame but I can't figure out how to incorporate a counter. Help? (Sorry if the code doesn't show up correctly, first time using this site)
Here is an example that counts clicks on the flashing animation: http://jsfiddle.net/maniator/TQqJ8/
JS:
function animate(pos) {
pos %= urls.length;
var animation = document.getElementById('animation');
var counter = document.getElementById('counter');
animation.src = urls[pos];
animation.onclick = function() {
counter.innerHTML = parseInt(counter.innerHTML) + 1;
}
setTimeout(function() {
animate(++pos);
}, 500);
}
UPDATE:
Here is a fiddle that only detects click on one of the images: http://jsfiddle.net/maniator/TQqJ8/8/