PHP/ Javascript Progress meter

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
cristiano
Forum Newbie
Posts: 18
Joined: Tue Jul 01, 2008 1:44 am

PHP/ Javascript Progress meter

Post by cristiano »

Hello,

I didn't know if I have to post this in the javascript forum or here. I am not sure how to implement this particular feature.

I have a set of SEO scripts. I am trying to form a single script with those. It will be multiple tests on a single URL, and so it will take a lot of time to get completed.

What I want to do is, I want to display simple/ajax/DHTML based progress meter. I have tried this forum for such posts and I find only progress meters related to file uploads. Also I tried google but found that there are some progress meters but all are css based.

I am quite stumped by this problem. I just need a lead to proceed, I can handle PHP/Javascript myself as I'm a developer.

If anyone has done such a thing before, please let me know.

Thanks.
User avatar
sergio-pro
Forum Commoner
Posts: 88
Joined: Sat Dec 27, 2008 12:26 pm

Re: PHP/ Javascript Progress meter

Post by sergio-pro »

Hello

The way you can do it is:
1. Create an element (ie DIV) width width 0. Make its backround different from page background
2. Create a javascript function, that increases DIVs width (name it "stepIt()" )
3. When page starts loading first output to the browser the DIV element, then after each task completes, output to browser:
<script type="text/javascript">stepIt();</script>

Now the div element will look like a progress bar

Code: Select all

 
<br/>
<div id="varTd" style="background-color: green; display: block; position: absolute;" width="0" height="20">&nbsp;</div>
 
<script type="text/javascript">
var width=0;
function stepIt() {
    var el = document.getElementById('varTd');
    width += 20;
    el.style.width = width;
}
 
</script>
 
<?
 
for ($i=0; $i<5; $i++) {
    echo '<script type="text/javascript">stepIt();</script>';
    flush();
    sleep(1);
}
 
?>
 
remember to set output_buffering = Off in PHP ini
cristiano
Forum Newbie
Posts: 18
Joined: Tue Jul 01, 2008 1:44 am

Re: PHP/ Javascript Progress meter

Post by cristiano »

Wow that was awesome! Thanks a bunch mate!
Post Reply