Web Analytics Made Easy - StatCounter Dynamic Progress Bar: - CodingForum

Announcement

Collapse
No announcement yet.

Dynamic Progress Bar:

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Dynamic Progress Bar:

    I am having trouble setting the "post action to carry out " in the code for the Progress Bar script. Where do I put it?

    I get a blank html page and script error—"Syntax error" and " 'baranchor' is undefined" error. I need help!

    Dynamic Drive DHTML Scripts- Time-based Progress Bar
    http://www.dynamicdrive.com/dynamicindex11/dhtmlprogress.htm


    Thanks,
    A3D
    Tags: None
  • #2
    We would have to see how you have implemented the code on your page in order to effecitvely help you.

    Comment

    • #3
      Re: Dynamic Progress Bar code implementation

      I created a test HTML page in my editor (FrontPageExpress) to try it out—here's the page code:

      <html>

      <head>
      <meta http-equiv="Content-Type"
      content="text/html; charset=iso-8859-1">
      <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0">
      <title>Untitled Normal Page</title>
      <style>
      <!--
      #bar, #barbackground{
      position:absolute;
      left:0;
      top:0;
      background-color:blue;
      }

      #barbackground{
      background-color:black;
      }

      -->
      </style>
      </head>

      <body bgcolor="#FFFFFF">
      <script language="JavaScript1.2">

      /*
      Dynamic Progress Bar- By Dynamicdrive.com
      For full source, Terms of service, and 100s DTHML scripts
      Visit http://www.dynamicdrive.com
      */

      //1) Set the duration for the progress bar to complete loading (in seconds)
      var duration=5

      //2) Set post action to carry out inside function below:
      function postaction(){
      //Example action could be to navigate to a URL, like following:
      window.location="http://www.dynamicdrive.com"
      }


      ///Done Editing/////////////
      var clipright=0
      var widthIE=0
      var widthNS=0

      function initializebar(){
      if (document.all){
      baranchor.style.visibility="visible"
      widthIE=bar.style.pixelWidth
      startIE=setInterval("increaseIE()",50)
      }
      if (document.layers){
      widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
      document.baranchorNS.document.barNS.clip.right=0
      document.baranchorNS.visibility="show"

      startNS=setInterval("increaseNS()",50)
      }
      }

      function increaseIE(){
      bar.style.clip="rect(0 "+clipright+" auto 0)"
      window.status="Loading..."
      if (clipright<widthIE)
      clipright=clipright+(widthIE/(duration*20))
      else{
      window.status=''
      clearInterval(startIE)
      postaction()
      }
      }

      function increaseNS(){
      if (clipright<202){
      window.status="Loading..."
      document.baranchorNS.document.barNS.clip.right=clipright
      clipright=clipright+(widthNS/(duration*20))
      }
      else{
      window.status=''
      clearInterval(startNS)
      postaction()
      }
      }


      window.onload=initializebar
      </script>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

      <p align="center"><script language="JavaScript"><!--
      <script language="JavaScript1.2">
      if (document.all){
      document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
      document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
      document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
      document.write('</div>')
      }

      </script> <ilayer name="baranchorNS" visibility="hide" width="200" height="20"> <layer name="barbackgroundNS" bgcolor="black" width="200" height="20" z-index="10" left="0" top="0"></layer> <layer name="barNS" bgcolor="blue" width="200" height="20" z-index="11" left="0" top="0"></layer> </ilayer> //
      --&gt;</p>
      </body>
      </html>


      hth
      A3D

      Comment

      • #4
        Your problem in this bit of code:

        <p align="center"><script language="JavaScript"><!--
        <script language="JavaScript1.2">
        if (document.all){
        document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
        document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
        document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
        document.write('</div>')
        }

        </script> <ilayer name="baranchorNS" visibility="hide" width="200" height="20"> <layer name="barbackgroundNS" bgcolor="black" width="200" height="20" z-index="10" left="0" top="0"></layer> <layer name="barNS" bgcolor="blue" width="200" height="20" z-index="11" left="0" top="0"></layer> </ilayer> //
        --&gt;        </p>

        You have two javascript tags and the clossing comment tag is malformed and out of place, this did the trick for me when I tested it:

        Code:
        [size=1]<script language="JavaScript1.2"> 
if (document.all){ 
 divs= '<div id="baranchor" style="position:relative;width:200;height:20;visibility:hidden">'; [color=red]note: this line should not be broken, the forum inserted this line break[/color]
 divs+='<div id="barbackground" style="width:200;height:20;z-index:9"></div>';
 divs+='<div id="bar" style="width:200;height:20;z-index:10"></div>';
 document.write(divs+'</div>');
} 
</script> 
<ilayer name="baranchorNS" visibility="hide" width="200" height="20">
 <layer name="barbackgroundNS" bgcolor="black" width="200" height="20" z-index="10" left="0" top="0"></layer> 
 <layer name="barNS" bgcolor="blue" width="200" height="20" z-index="11" left="0" top="0"></layer>
</ilayer>
</p>[/size]
        Last edited by JohnKrutsch; Jun 17, 2002, 10:38 AM.

        Comment

        • #5
          Progress Bar Working! Now...

          John,

          Thanks for the help — I now have the progress bar working, but I need to code the post action function and I can't get it to work. Upon completion of the bar, I would like a URL to open in a new window automatically with no user input necessary. Can you help me?

          I believe I need to insert something into the following bit of code:

          <style>
          <!--
          #bar, #barbackground{
          position:absolute;
          left:0;
          top:0;
          background-color:blue;
          }

          #barbackground{
          background-color:black;
          }

          -->
          </style>

          <script language="JavaScript1.2">

          /*
          Dynamic Progress Bar- By Dynamicdrive.com
          For full source, Terms of service, and 100s DTHML scripts
          Visit http://www.dynamicdrive.com
          */

          //1) Set the duration for the progress bar to complete loading (in seconds)
          var duration=5

          //2) Set post action to carry out inside function below:
          function postaction(){
          //Example action could be to navigate to a URL, like following:
          //window.location="http://www.dynamicdrive.com"
          }


          ///Done Editing/////////////
          var clipright=0
          var widthIE=0
          var widthNS=0

          function initializebar(){
          if (document.all){
          baranchor.style.visibility="visible"
          widthIE=bar.style.pixelWidth
          startIE=setInterval("increaseIE()",50)
          }
          if (document.layers){
          widthNS=document.baranchorNS.document.barbackgroundNS.clip.width
          document.baranchorNS.document.barNS.clip.right=0
          document.baranchorNS.visibility="show"

          startNS=setInterval("increaseNS()",50)
          }
          }

          function increaseIE(){
          bar.style.clip="rect(0 "+clipright+" auto 0)"
          window.status="Loading..."
          if (clipright<widthIE)
          clipright=clipright+(widthIE/(duration*20))
          else{
          window.status=''
          clearInterval(startIE)
          postaction()
          }
          }

          function increaseNS(){
          if (clipright<202){
          window.status="Loading..."
          document.baranchorNS.document.barNS.clip.right=clipright
          clipright=clipright+(widthNS/(duration*20))
          }
          else{
          window.status=''
          clearInterval(startNS)
          postaction()
          }
          }


          window.onload=initializebar
          </script>

          Any help would be greatly appreciated!

          Regards,
          A3D

          Comment

          • #6
            Try changing this:

            //2) Set post action to carry out inside function below:
            function postaction(){
            //Example action could be to navigate to a URL, like following:
            //window.location="http://www.dynamicdrive.com"
            }

            to this:

            //2) Set post action to carry out inside function below:
            function postaction(){
            //Example action could be to navigate to a URL, like following:
            window.location="http://www.dynamicdrive.com"
            }

            You need to uncomment the command to go to the new page.

            Comment

            • #7
              John,

              Thanks—that did it! I guess I need to learn at least the basics of JS and DHTML before I get any more scripts. Thanks for your replies and your expertise.

              Regards,
              A3D

              Comment

              Previous template Next
              Working...
              X