Timer based redirect problem using window.location - javascript

<script language="JavaScript" type="text/javascript">
var theBar = createProgressBar(document.getElementById('progress-bar'));
var value;
function resetValue() {
value = 0;
}
function showProgress() {
value += 1;
theBar.setValue(value);
if (value < 100) {
window.setTimeout(showProgress, 100);
}
if (value = 100) {
window.location = 'http://google.com';
}
}
window.onload=resetValue();showProgress();
</script>
I'm trying to redirect after the timer reaches 10 sec, but what I tried doesn`t seem to work (redirects instantly).
not familiar with JS one bit, tried my best to mimick

= means assignment
if (value == 100) { ...

Related

Javascript - window.history(-1) into a constant

I'm trying to check with a while, if browser history (back two pages) is a certain url, then decrease variable num by -1. And then do window.history.go(num);
The error I get, from my understanding is related to history not being put correctly into a variable/constant.
This is my code:
<script type="text/javascript">
window.setTimeout(function() {
var num = -2;
var page = history(-2);
if (page == 'http://www.dghsdfagasdfa.com/page4') {
while (page == 'http://www.dghsdfagasdfa.com/page4') {
var num = num -1;
page = history(num);
}
}
window.history.go(num);
}, 2500);
</script>
I'm new to javascript, what am I doing wrong?

Javascript countdown timer to change image and link

Apologies in advance for being somewhat out of my depth here.
I am trying to use a JavaScript countdown timer on an ASP page to do the following - every sixty seconds after the a page loads, an image-based link will switch between one of five image/link combinations.
I've done something somewhat wrong here, and I can't find the problem. It never runs.
Thanks in advance for any assistance.
The images are named the following:
1_AdvoImg.gif 2_AdvoImg.gif 3_AdvoImg.gif 4_AdvoImg.gif 5_AdvoImg.gif
The urls are the following:
linkone.html linktwo.html linkthree.html linkfour.html linkfive.html
The html encapsulating the link is this:
<a id='AdvoLink' href='../'><img id='AdvoImg' src='' border="0"></a>
The javascript is this:
<script language="javascript">
function startTimer(duration) {
var timer = duration, seconds, imgprefix, imgname, linkurl;
imgprefix = 1;
setInterval(function () {
seconds = parseInt(timer % 60, 10);
imgname = imgprefix.concat("_AdvoImg.gif");
if (imgprefix == 1) {
linkurl = "linkone.html";
}
if (imgprefix == 2) {
linkurl = "linktwo.html";
}
if (imgprefix == 3) {
linkurl = "linkthree.html";
}
if (imgprefix == 4) {
linkurl = "linkfour.html";
}
if (imgprefix == 5) {
linkurl = "linkfive.html";
}
if (--timer <= 0) {
document.getElementById("AdvoLink").href = "";
document.getElementById("AdvoImg").src = imgname;
++imgprefix;
timer = duration;
}
}, 5);
}
window.onload = function () {
startTimer(60);
};
</script>
You are trying to build a timer inside a timer there.
Try keeping it as simple as possible.
What you actually need is just:
window.onload = function () {
setInterval(function () {
//your url changing magic here - without the timer stuff
}, 60000);
};
With this, your magic code should trigger every 60000 milliseconds => 60s => 1minute.
You could actually kinda "debug" it by using console.log() inside your loop.
dunno what you were using var seconds for so I removed it
edited to stop image number going over 5, change if loop to whatever number you need
function startTimer(duration) {
var timer = duration;var seconds;var imgprefix;var imgname;var linkurl;
imgprefix = 1;
setInterval(function() {
imgname = imgprefix+"_AdvoImg.gif";
if (imgprefix == 1) {
linkurl = "linkone.html";
}
if (imgprefix == 2) {
linkurl = "linktwo.html";
}
if (imgprefix == 3) {
linkurl = "linkthree.html";
}
if (imgprefix == 4) {
linkurl = "linkfour.html";
}
if (imgprefix == 5) {
linkurl = "linkfive.html";
}
document.getElementById("timer").innerHTML=timer;
timer--;
if (timer <= 0) {
document.getElementById("AdvoLink").href = linkurl;
document.getElementById("AdvoImg").src = imgname;
document.getElementById("result").innerHTML = "image src = "+imgname+" and href = "+linkurl;
if(imgprefix < 5){++imgprefix;}else{imgprefix =1;}
timer = duration;
}
}, 200//speed up and slow down here, in milliseconds
);
}
window.onload = function () {
startTimer(10);
};
<a id='AdvoLink' href='../'><img id='AdvoImg' src='' border="0"></a>
<div id="timer"> </div>
<div id='result'> </div>

Display dynamic values in javascript alertbox

Display dynamic value in confirm box. This is how i wanted it to work but it didnt. Can anyone tell me how it is done properly.
<script type='text/javascript'>
setTimeout(function(){
var url = document.URL;
var r = confirm("Your session is about to be timedout in " + for (var i = 10; i > 0; i--){ i } + " seconds! Would you like to logged in?");
if (r == true) {
location = url;
} else {
location = '../logoff.php'
}
}, 10000)
</script>
Aside from the flawed string concatenation logic, you cannot achieve this in a standard confirm box. The value is set when the box is instantiated and cannot be changed.
To do what you need you would need to use a modal plugin of some description which you have HTML/JS control over.
This is a work around example:
$(function() {
var out = $('#out'),
sec;
(function() {
var th = setInterval(function() {
sec = parseInt(out.text()) || 0;
if (!sec) {
clearInterval(th);
timeout();
} else {
sec--;
out.text(sec);
}
}, 1000);
})();
var timeout = function() {
if ($('#in').prop('checked')) {
alert('login ...');
} else {
alert('don\'t login ...');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h2>Your session is about to be timedout in <span id="out">10</span> seconds! Would you like to logged in?
<br/>
<input type='checkbox' id='in'/>Yes
</h2>
</center>

Javascript show variable every 50 ms

I want to make a little 'loading...' widget for my website, using javascript.
var percent=0;
var message="Loading... "
var per="%"
function count(){
percent=percent+1;
if(percent==100){
alert("Loading end.")
}else{
setTimeout("count",50)
document.write(message)
document.write(percent)
document.write(per)
}
But it isn't running. I think I've got some mistake (or maybe totally wrong). How can I do this? I want to update the shown message every 50ms.
try with interval and clear it when progress is finished:
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="progress">MSG</div>
<script type="text/javascript">
var percent = 0;
var message = "Loading... ";
var per = "%";
var dom = document.getElementById('progress');
var iv = setInterval(function(){
console.log(message);
dom.innerHTML = ((percent++) + per +' '+ message);
if(percent === 100){
console.log("Loading end.");
clearInterval(iv);
return false;
}
}, 50);
</script>
</body>
</html>
try
setInterval(count,50);
instead of setTimeOut("count",50)
You want to set an interval which runs every x milliseconds, passing in an anonymous function to call the function to call
var percent=0;
var message="Loading... "
var per="%"
function count(){
percent=percent+1;
if(percent==100){
alert("Loading end.")
}else{
setInterval(function() { count() },50)
document.write(message)
document.write(percent)
document.write(per)
}
} <--- you were also missing this ending brace
Script:
var percent = 0;
var message = "Loading... ";
var per = "%";
$(document).ready(function () {
count();
});
function count() {
percent = percent + 1;
if (percent == 100) {
alert("Loading end.");
} else {
setTimeout(function () {
count();
}, 50);
document.write(message);
document.write(percent);
document.write(per);
}
}
see this fiddle for more http://jsfiddle.net/8nhmU/19/
See this jsfiddle
HTML:
<span id="loading"></span>
Javascript:
var percent = 0;
var message = "Loading...";
var per = "%";
var element = document.getElementById('loading');
var interval = setInterval(function() {
element.innerHTML = message + percent + per;
percent += 1;
if(percent > 100) {
clearInterval(interval)
};
}, 50)
The code in your example is missing a great deal of semi-colons and the ending curly-bracket, but that's not the end-issue.
The "problem" with your call to setTimeout is that the first argument must be an actual function, not a string. If you remove the quotes around the call, it will work.
Here is a copy of your code, re-formatted:
var percent=0;
var message="Loading... ";
var per="%";
function count() {
percent++;
if (percent == 100) {
alert("Loading end.");
} else {
setTimeout(count, 50);
document.write(message);
document.write(percent);
document.write(per);
}
}
You are doing it wrong way. You should call the setInterval method when window loads. And when loading is completed, you should stop interval by clearing it using its ID.
var countId;
window.onload = function(){
countId=setInterval(count,50);
}
function count(){
if(per=99){
clearInterval(countId);
}
per++;
//show your message
}

how do you repeat a process multiple times with java script

I have found the following code and I was wondering how can I repeat this code 9 times before changing the newPage. What i am doing right now is making 10 html documents and i change newPage to page2.html, page3.html ,page4.html so after the count done it changes and eventually cycles through all these html documents. I want to keep it to only 2 documents. index.html with this code and end.html. index ill perform this code 9 times then change to end.html. Can anyone help?
var startTime = 45;
var newPage = "page2.html";
function countDown() {
startTime--;
document.getElementById("counter_display").innerHTML = startTime;
if (startTime == 0) {
window.location = newPage;
}
}
function gett(id) {
if (document.getElementById) {
return document.getElementById(id);
}
if (document.all) {
return document.all.id;
}
if (document.layers) {
return document.layers.id;
}
if (window.opera) {
return window.opera.id;
}
}
function watchNow() {
if (gett('counter_display')) {
setInterval(countDown, 1000);
gett("counter_display").innerHTML = startTime;
} else {
setTimeout(watchNow, 50);
}
}
document.onload = watchNow();
<p><b id="counter_display"></b></p>
<iframe frameborder="no" height="735" src="http://website.com/video.php" width="385"></iframe>
If you were loading the contents of the other pages with AJAX into the current page in a frame then you could replace the last line with:
document.onload = function () {
for (var i= 1; i < 10; i++) {
newPage = "page"+i+".html";
watchNow();
}
}
But as to how you do the first bit, I'll need more information about what the overal pages does etc.

Categories