Fixing a Javascript progress bar.

[SawnDiddle]

ok, So i am using a percent progress bar from http://scriptasylum.com/misc/percent_bar/percent_bar.html
on my page
http://newsalesparadigm.com/expediter/pretest.php?id=1&step=5
But for some reason, I can't get it to load the bar up-front. Is there something that I am doing wrong? Below is the script and some php used on the page.


<?php
include 'config.php';
include 'opendb.php';

$sID = $_GET['id'];
$sSTEP = $_GET['step'];

?>
<table cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><img src="images/image_01.jpg" width="35" height="500" /></td>
<td valign="top"><img src="images/image_02.jpg" width="238" height="59" /></td>
<td rowspan="3"><img src="images/image_03.jpg" width="35" height="500" /></td>
</tr>
<tr>
<td valign="top">
<?php include 'menu.php'; ?>
<div class="content">
<div align="center"><strong>PRETEST</strong>
</div>
<p>The components of a successful sale as it moves forward toward closure:
<p><strong>Steps</strong> in a successful close and interventions for recovery:<br>
<a name="1" id="1"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 1 ){echo "checked=checked";} ?> >
<strong>Step 1.</strong> First contact. Mutual agreement to move discussion forward with plans for inclusion of other decision makers on second contact. <br />
<?php echo "<a href=1.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br />
<a name="2" id="12"></a><br />

<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 2 ){echo "checked=checked";} ?> ><strong>Step 2.</strong> Second contact. Seller introduced to initial group of decision makers. Together, buyers and seller begin to discover the underlying basis of how the Identified Problem got created, and start recognizing and naming their criteria for resolving their problem.<br />
<?php echo "<a href=2.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="3" id="13"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 3 ){echo "checked=checked";} ?> ><strong>Step 3.</strong> Ongoing discussions around how to bring in entire decision team to get agreement<br />
<?php echo "<a href=3.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="4" id="14"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 4 ){echo "checked=checked";} ?> ><strong>Step 4.</strong> Buyer discusses roadblocks; buyer and seller begin to strategize<br />
<?php echo "<a href=4.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="5" id="15"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 5 ){echo "checked=checked";} ?> ><strong>Step 5.</strong> Buyer and seller discuss how to manage the current solution provider to ensure they support new solution.<br />
<?php echo "<a href=5.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="6" id="16"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 6 ){echo "checked=checked";} ?> ><strong>Step 6: </strong>Buyer and seller discuss how to influence full range of decision partners. <br />
<?php echo "<a href=6.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="7" id="17"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 7 ){echo "checked=checked";} ?> ><strong>Step 7:</strong> Buyer and seller discuss financials and decide how to manage solution cost.<br />
<?php echo "<a href=7.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="8" id="18"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 8 ){echo "checked=checked";} ?> ><strong>Step 8:</strong> Buyer and seller to discuss timing decisions, implementation plans, and means of ensuring buy-in if purchasing decision&nbsp;is to progress.&nbsp;&nbsp;&nbsp;<br />
<?php echo "<a href=8.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="9" id="19"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 9 ){echo "checked=checked";} ?> ><strong>Step 9:</strong> Buyer and seller to discuss how to ensure all high level stakeholders buy-in to decision to move forward.<br />
<?php echo "<a href=9.php?id=$sID&step=$sSTEP>If not...</a>"; ?><br>
<a name="10" id="110"></a><br>
<input type="checkbox"
onclick="if (this.checked){incrCount(10)}else{decrCount(10)};" <?php if ($sSTEP >= 10 ){echo "checked=checked";} ?> ><strong>Step 10: </strong>final discussions of logistics, or repetition of any of above steps. If any of the above steps were omitted, the following may occur:<br />
<?php echo "<a href=10.php?id=$sID&step=$sSTEP>If not...</a>"; ?></p>
</div>
<script language="javascript" src="percent_bar.js"></script>
<script type="text/javascript">
setCount(<?php $count = ($sSTEP * 10); echo "$count"; ?>)
</script>

</td>
</tr>
<tr>
<td valign="bottom"><img src="images/image_05.jpg" width="238" height="126" /></td>
</tr>
</table>
<?php include 'closedb.php'; ?>

[jscheuer1]

This is actually a Dynamic Drive Script, but is a later version than the one featured in the library:

http://www.dynamicdrive.com/dynamicindex11/dhtmlprogress2.htm

I mentioned that for no particular reason. OK, I'm no real wiz at PHP, but it looks like you changed things. The served source near the end looks like so:


<a href=10.php?id=1&step=5>If not...</a></div>
<script language="javascript" src="percent_bar.js"></script>


</td>
</tr>
<tr>
<td valign="bottom"><img src="images/image_05.jpg" width="238" height="126" /></td>
</tr>
</table>
<script type="text/javascript">
incrCount(50);
</script>
</body>
</html>


And the highlighted script appears to be written out, in part, by the server, but not by this PHP code from your post:


<script type="text/javascript">
setCount(<?php $count = ($sSTEP * 10); echo "$count"; ?>)
</script>

Either of these would probably do the trick except that the progress bar itself doesn't initialize until page load (from the script you are using):


window.onload=progressBarInit;

Which runs:


function progressBarInit(){
perouter=(ns4)?findlayer('perouter',document):(ie4)?document.all['perouter']:document.getElementById('perouter');
perdone=(ns4)?perouter.document.layers['perdone']:(ie4)?document.all['perdone']:document.getElementById('perdone');
clipid(perdone,0,0,barheight-2,0);
if(ns4)perouter.visibility="show";
else perouter.style.visibility="visible";
}

Which I would change to be like so:


function progressBarInit(){
perouter=(ns4)?findlayer('perouter',document):(ie4)?document.all['perouter']:document.getElementById('perouter');
perdone=(ns4)?perouter.document.layers['perdone']:(ie4)?document.all['perdone']:document.getElementById('perdone');
clipid(perdone,0,0,barheight-2,0);
if(ns4)perouter.visibility="show";
else perouter.style.visibility="visible";
if(incrCount.preset)
incrCount(incrCount.preset);
}

Which would allow you to have something like so in place of your PHP generated script:


<script type="text/javascript">
incrCount.preset=<?php $count = ($sSTEP * 10); echo "$count"; ?>;
</script>

Except that I'm not so sure that echo "$count" should use quotes. As I say, I'm not real up on PHP. In any case, it should write out something that looks like this:


<script type="text/javascript">
incrCount.preset=50;
</script>

[SawnDiddle]

omg, thank you. My boss has been on me trying to get this to work. You fixed the problem. And your right, about the no quotes around $count.