function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
NeedHelp55NeedHelp55 

Progressbar on Visualforce Page

I want to show alert whenever progressbar reaches to the max value.

 

Here is my code---------

<script>
var width=0;
var timer;
$(document).ready(function(){
if(width<100){
timer=setInterval("CallMeInterval()", 2000);
}
});

function CallMeInterval()
{

$( "#progressbar" ).progressbar({
value: width+=10
});
}
</script>
<apex:form >
</apex:form>
<div id="progressbar"></div>

 

I have tried it through lots of way but not working perfectly.Please Help.

Best Answer chosen by Admin (Salesforce Developers) 
NeedHelp55NeedHelp55

------i got my solution----------------------

 

<apex:page sidebar="flase">

<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-1.7.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-ui-1.8.20.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jqueryStable, '/css/cupertino/jquery-ui-1.8.20.custom.css')}"/>

<script>
var width=0;
var timer;
$(document).ready(function(){
if(width<100){
timer=setInterval("CallMeInterval()", 1000);
}

});

function CallMeInterval()
{

$( "#progressbar" ).progressbar({
value: width+=4

});
//alert(width);
if(width==100){

alert('Successfully Completed');
timer = window.clearInterval(timer);
}
}

</script>
<apex:form >
</apex:form>
<div id="progressbar" style="width:500px;border: 1px solid #4C3C1B;"></div>
</apex:page>

All Answers

NeedHelp55NeedHelp55

------i got my solution----------------------

 

<apex:page sidebar="flase">

<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-1.7.2.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jqueryStable, '/js/jquery-ui-1.8.20.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jqueryStable, '/css/cupertino/jquery-ui-1.8.20.custom.css')}"/>

<script>
var width=0;
var timer;
$(document).ready(function(){
if(width<100){
timer=setInterval("CallMeInterval()", 1000);
}

});

function CallMeInterval()
{

$( "#progressbar" ).progressbar({
value: width+=4

});
//alert(width);
if(width==100){

alert('Successfully Completed');
timer = window.clearInterval(timer);
}
}

</script>
<apex:form >
</apex:form>
<div id="progressbar" style="width:500px;border: 1px solid #4C3C1B;"></div>
</apex:page>

This was selected as the best answer
Nirmal ChristopherNirmal Christopher
Thanks for sharing the code. Can you please give me the link for jquery static resource.
lakshman.mattilakshman.matti
hi Pratik,
i dont find any use with this example.

Regards
Lakshman