Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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?

    Code:
    <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:

    Code:
               <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?

  • #2
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, forgot to mention that the load command is embedded into the body tag, as follows:

    Code:
    <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.

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    Last edited by Mr J; 06-09-2007 at 03:03 PM. Reason: typo
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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%)?

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Give this a try

    Code:
    <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>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, fantastic. More importantly, I can see where I was going wrong. Thanks, Mr J; it is hugely appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •