Progress bar using htp.DIV

Question

Hi,
Below is my Code to get a progress bar on the screen.
PROCEDURE lp_progress_bar IS
BEGIN
htp.htmlOpen;
htp.headOpen;
-- Create Link to Style Sheet
htp.linkrel(crel => 'stylesheet',
curl => pk_constant.PATH_STATIC||'internal_body.css',
ctitle => 'text/css');
--Include the Javascript to Call the Progress Bar
lp_js_copy();
htp.headClose;
htp.bodyOpen;
--Define Attributes for the DIV tags to print the Progress bar
htp.div(cattributes => 'id="bar"');
htp.div(cattributes => 'id="progress"');
htp.bodyClose;
htp.htmlClose();
END lp_progress_bar;
and the JS for the progress bar
PROCEDURE lp_js_copy
IS
vBodyCode VARCHAR2(500);
BEGIN
pk_js.js
'var time = 10000;'
|| NL ||'var aCopy = 5;'
|| NL ||'var aCopyDone = 1;'
|| NL ||'function progress() {'
|| NL ||'parent.fr_buttons.btnCancel.disabled= true;'
|| NL ||'var bar = document.getElementById("bar");'
|| NL || 'alert(bar);'
|| NL ||'var aStep = (bar.offsetWidth -2) /aCopy;'
|| NL ||'var x = Math.round( aStep *aCopyDone); '
|| NL ||'var progress = document.getElementById("progress");'
|| NL ||'progress.style.width = x +"px";'
|| NL ||'aCopyDone++;'
|| NL ||'if( aCopyDone > aCopy) redir();'
|| NL ||'else setTimeout( "progress();", time /aCopy);'
|| NL ||'}'
|| NL
|| NL ||'function redir() {'
|| NL ||'alert("Copy Successfully Completed");'
|| NL ||'parent.fr_buttons.btnCancel.disabled= false;'
|| NL ||'parent.fr_buttons.btnSave.disabled=true;'
|| NL ||'}'
END lp_js_copy;
The stlye for bar and progress aere defined in the stysheet internal_body.css as
#bar
MARGIN: 0 auto;
WIDTH: 250px;
TEXT-ALIGN: left;
BORDER: 1px solid black;
#progress {
WIDTH: 0;
BACKGROUND: darkblue;
but I am not getting anything on the screen. What should I do to get it pop up on the existing screen.
Please Help.

Answer 1

Hi Dwijesh,
U can use a OCX control. Make a OCX control and insert microsoft progress bar object into it. Then you can write codes into it accordingly to incerease the bar.