My code doesn't always work...why?

smokingmirror

06-09-2007, 07:51 AM

Hi all,

Ok, this one has me a bit stumped, so I'm hoping you can help.

Background first: I'm building a webpage whose front page has a menu bar the links on which load different pages into an iframe below it. This works just fine.

Now when one of these menu options (the 'Search' button) is clicked, the iframe shows a progress bar that - when complete - changes the content of the iframe to a random search result, taken from a pre-determined list. This is the bit that sort of works.

Most often, especially if loading the site for the first time, or if 'refresh' has been clicked on the broswer first, the progress page does its thing, then jumps to a random page. But I often find that then clicking the search button again to repeat the process will have the progress bar work, but it doesn't then jump to a random page; it just hangs there at 100%.

I'm the first to admit that I'm probably achieving the desired result from my progress page by very sloppy coding, so could anyone take a look and tell me where I'm going wrong?

<script type="text/javascript">
var i
function prog()
{
document.getElementById("d1").innerHTML=""; document.getElementById("d2").style.width=0; i=0;
progBar();
}

function progBar()
{
if (i<=(300))
{
if (i>40){document.getElementById("d1").innerHTML=parseInt(i/3)+"%";}
document.getElementById("d2").style.width=i+"px";
var j=0;
while (j<=100)
j++;
setTimeout("progBar();", 10);
i++;
}
}
setTimeout("rand_link();",6000);
function go_to(url) {
window.location=url;
}
function rand_link() {
var a;
a = 1+Math.round(Math.random()*4);
if (a==1) go_to("result1.html");
if (a==2) go_to("result2.html");
if (a==3) go_to("result3.html");
if (a==4) go_to("result4.html");
}
</script>

The page itself contains the follow code to show the actual bar:

<div align="center">
<div id="empty" style="background-color:#ffffff;border:1px solid black;height:20px;width:300px;padding:0px;" align="left">
<div id="d2" style="position:relative;top:0px;left:0px;background-color:#666666;height:20px;width:0px;padding-top:5px;padding:0px;">
<div id="d1" style="position:relative;top:0px;left:0px;color:#666666;height:20px;text-align:center;font:bold;padding:0px;padding-top:0px;">
</div>

As you can see, when this page is called into the iframe by a menu button, it should show a progress bar (which it does), then, 6 seconds after being loaded, jump to a random page from the list (which it sometimes does).

Any thoughts?

smokingmirror

06-09-2007, 08:02 AM

Sorry, forgot to mention that the load command is embedded into the body tag, as follows:

<body onload="prog();">

I think the problem may stem from the fact I'm trying to merge two functions (one bar and one randomiser) into one set of code, whilst the body tag is telling the page to run the bar code, but I'm not sure how to get around this.

Mr J

06-09-2007, 08:32 AM

At this line you will randomly get a value of 5 so nothing will happen

a = 1+Math.round(Math.random()*4);

change it to

a = 1+Math.floor(Math.random()*4);

Using Math.round() rounds off a floating point number to a whole number.

If the number after the point is less than 5 it is rounded to the next lowest number.
If the number after the point is 5 or greater it is rounded to the next highest number

Math.round(1.4) = 1
Math.round(1.5) = 2

smokingmirror

06-09-2007, 08:48 AM

Ahhhh...thanks for that; will make the necessary change immediately.

One othe rthought I did have is that my body onload command obviously calls the prog (progress bar) function, but nowhere in the script am I calling the random link function by name; I just have it lumped in with the progress function on a 6 second timer.

Is there are more reliable way to get these two functions to work (since the timer use is actually me cheating; what I wanted is for the progress bar to spawn the random page when it hits 100%)?

Mr J

06-09-2007, 03:22 PM

Give this a try

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
var i
var timer=null

function prog(){
document.getElementById("d1").innerHTML="";
document.getElementById("d2").style.width=0;
i=0;
progBar();
}

function progBar(){

if(i<=300) {

if(i>40){
document.getElementById("d1").innerHTML=parseInt(i/3)+"%";
}

document.getElementById("d2").style.width=i+"px";

timer=setTimeout("progBar();", 10);
i++;
}

if(i>=300){
clearTimeout(timer)
rand_link()
}

}

function go_to(url){
window.location=url;
}

function rand_link() {
a = 1+Math.floor(Math.random()*4);
if (a==1) go_to("result1.html");
if (a==2) go_to("result2.html");
if (a==3) go_to("result3.html");
if (a==4) go_to("result4.html");
}

</script>
</HEAD>
<BODY onload="prog()">

<center>

<div id="empty" style="position:relative;background-color:#ffffff;border:1px solid black;height:22px;width:300px;padding:0px">

<div id="d2" style="position:absolute;top:0px;left:0px;background-color:#666666;height:20px;width:0px"></div>
<div id="d1" style="position:absolute;top:0px;left:0px;color:#000000;height:20px;width:300px;text-align:center;font:bold"></div>

</div>

</center>
</BODY>
</HTML>

smokingmirror

06-09-2007, 07:26 PM

Ah, fantastic. More importantly, I can see where I was going wrong. Thanks, Mr J; it is hugely appreciated.