custom file progress bar

[lost_in_translation]

Hello,

I am playing with the new (nice) custom file feature on phpmaker 11.0.2.

In the Help File there is a simple example to add a bootstrap panel to a new page:

<div class="panel panel-default">
<div class="panel-heading">Latest news</div>
<div class="panel-body">
<p>PHPMaker 11.0 is released</p>
</div>
</div>

It is possible to replace the output text "PHPMaker 11.0 is released" with a progressbar like JQUERY Progressbar? (h**p://jqueryui.com/progressbar/)

Thanks you,
Enrique

[mobhar]

Sure, you can.

1. First of all, you need to include the library script in "Page_Head" server event (assume both this files are located in "phpcss" and "phpjs" subfolder respectively), for example:
   ew_AddStylesheet("phpcss/jquery-ui.css"); // Add CSS stylesheet
   ew_AddClientScript("phpjs/jquery-ui.js"); // Add JavaScript

2. Finally, add the following content to your Custom File, for example:
   <script>
   $(function() {
   $( "#progressbar" ).progressbar({
   value: 37
   });
   });
   </script>
   <div id="progressbar"></div>

[lost_in_translation]

Thanks mohbar, it works and looks amazing.

Does you know how i can manage progress bar values inside a php script?, i have a WHILE (loop untip EOF) inside PHP based on query results and want to manage the progress bar when the while move next.

I tried this inside the php script and does not works:

<script>$( ".selector" ).progressbar( "option", "max", 1024 );</script> // max must be the query result recordcount

<script>$( ".selector" ).progressbar({ value: 1 });</script> // value must ve a pointer like $i or similar

Regards,
Enrique

[lost_in_translation]

I found another progress bar based on bootstrap may be it is better: h**p://getbootstrap.com/components/#progress

[lost_in_translation]

Mohbar i can place the progress bar directly with bootstrap 3 without adding the JS and CSS to the header just pasting it to my custom file:

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>

Regards,
Enrique