Jump to content

Circle-Progress [JQuery widget] fully customized


mhmda

Recommended Posts

Hello to all,

 

[Edit]: code/project was improved and uploaded.

 

Here is a jQuery widget with animation and fully customized and fully responsive that I have written recently:

 

Works excellent when resizing the browser window !

 

 

crcl.png

 

Code:

$('#newTasks').circleProgress({
  title:'15',
  caption:'New tasks',
  bgcolor:'#e1dddd',
  fgcolor:'#54c0fd',
  tfntcolor:'#54c0fd',
  cfntcolor:'#b0aeae',
  animationstep:1,
  rotateanimationstep:0.4,
  total:100,
  value:30,
  mstyle:0,
  thik:25,
  shadow:1
});

You may test is online (for limited time): http://80.179.68.220:8076

 

You can download project from here [port: 8076]: http://3msoft.net/mhmd/CircleProgress.rar

  • Like 1
  • Upvote 7
Link to comment
Share on other sites

  • 1 year later...
  • 6 months later...
  • 4 months later...

Hello, im trying out the evaluation version of unigui because i want to create a webportal. I found your great circleprogress but don't understand how to use it. if i copy the htmlframe, and put it on the mainform is shows fine, if i put it on a tab wich is not visible, and then activate the tab it doesnt show correctly..

Can u tell me what i am doing wrong?

Link to comment
Share on other sites

  • 4 months later...
  • 1 month later...
  • 4 weeks later...

Hi,

 

I have probably a stupid question.

The title and the caption are changed in the click event from the button component.

How can I do this straight from Delphi code?

I read the numbers from the database and would like to send the correct numbers to the component straight from Delphi.

Is that possible?

 

Thx,

Dominique

Link to comment
Share on other sites

Hi,

 

Like this for example:

UniSession.AddJS('$(circle1).circleProgress("title", 50);'); 
UniSession.AddJS('$(circle1).circleProgress("caption", "new caption");');
UniSession.AddJS('$(circle1).circleProgress("value", 50);');
UniSession.AddJS('$(circle1).circleProgress("total", 100);');
Link to comment
Share on other sites

Thx for the feedback, that works nicely.

I have one more problem.

I call this code on the create of the form, I perform the calculations and then add the UniSession.AddJS lines.

Problem here is that the objects don't exist yet I think, I get an error that the object is not defined.

It works well when I do this from a button on the form when the form is already displayed.

Is there a way to wait until the object is created and then call the UniSession.ADDJs?

 

Thx,

Dominique

Link to comment
Share on other sites

  • 1 year later...
  • 10 months later...
  • 10 months later...
On 7/19/2018 at 6:30 AM, Sherzod said:

Hi,

 

Like this for example:


UniSession.AddJS('$(circle1).circleProgress("title", 50);'); 
UniSession.AddJS('$(circle1).circleProgress("caption", "new caption");');
UniSession.AddJS('$(circle1).circleProgress("value", 50);');
UniSession.AddJS('$(circle1).circleProgress("total", 100);');

How do I determine the size of the circle?

Link to comment
Share on other sites

  • 1 year later...
On 11/19/2015 at 9:38 AM, mhmda said:

Hello to all,

 

[Edit]: code/project was improved and uploaded.

 

Here is a jQuery widget with animation and fully customized and fully responsive that I have written recently:

 

Works excellent when resizing the browser window !

 

 

http://3msoft.net/mhmd/crcl.png

 

Code:

$('#newTasks').circleProgress({
  title:'15',
  caption:'New tasks',
  bgcolor:'#e1dddd',
  fgcolor:'#54c0fd',
  tfntcolor:'#54c0fd',
  cfntcolor:'#b0aeae',
  animationstep:1,
  rotateanimationstep:0.4,
  total:100,
  value:30,
  mstyle:0,
  thik:25,
  shadow:1
});

You may test is online (for limited time): http://80.179.68.220:8076

 

You can download project from here [port: 8076]: http://3msoft.net/mhmd/CircleProgress.rar

sorry, how to use this widget jquery? simple code? thanks

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...