Monday, February 14, 2011

JCalculator - A calculator plugin for jQuery

Welcome and thanks for visiting! This is my first blog for the first plugin i made for jQuery. In a nutshell, jCalculator provides simple yet customizable calculator for a web application.

JCalculator v1.0

JCalculator Basic Usage
$().ready(function() {

JCalculator Options
defaultOpen: defaults to true
  the default state of calculator when it is loaded.
title: defaults to 'Calculator'
  the title of the calculator.
accuracy: defaults to 12
  the number of digits to accept as input for the calculator.
width: defaults to 164,
  the width of calculator.
height: defaults to 180
  the height of calculator
movable: defaults to  false
  whether the calculator is draggable or not [works only if jQuery UI is included in the page]
: defaults to false
  whether the calculator is resizable or not [works only if jQuery UI is included in the page]

JCalculator Events
buttonPressed: Supply a callback function to handle the event when a button is pressed by user
$( ".selector" ).calculator({
   buttonPressed: function(calc, button) { ... }
displayChanged: Supply a callback function to handle the event when the display of calculator is changed
$( ".selector" ).calculator({
   displayChanged: function(calc, button) { ... }

JCalculator Methods
No methods available yet

Special Considerations

For best experience please use this plugin with the jQuery UI included on the page. The plugin is not tested fully yet. Please report the issues here in case you found any bugs in the plugin.


  1. It's save my lot of effort to write code for this task.Thanks

  2. Its a gud plugin to use in web-application.. Great Job!!

  3. Great plugin !!!
    How can i change design or just color ?

  4. Thanks,
    To change design locate the <link> tag in <head>
    <link href="" rel="stylesheet" />

    and replace the theme cupertino/ with any of the following -
    # base/
    # black-tie/
    # blitzer/
    # cupertino/
    # dark-hive/
    # dot-luv/
    # eggplant/
    # excite-bike/
    # flick/
    # hot-sneaks/
    # humanity/
    # le-frog/
    # mint-choc/
    # overcast/
    # pepper-grinder/
    # redmond/
    # smoothness/
    # south-street/
    # start/
    # sunny/
    # swanky-purse/
    # trontastic/
    # ui-darkness/
    # ui-lightness/
    # vader/

    This is the easiest way to do it. If you are familiar with css you can write your custom css to include after the above link and to write custom design and colors. The calculator is already made up with classes you can use to write css.

  5. Can you add a demo of the plugin ?

  6. Sure tXK, Here you go

  7. Thank you so much!!!!! This has definitely made my day.

  8. Is it possible to use keyboard?
    Great job!

  9. Yes petergsm, you can use keyboard too.

  10. where can I edit the link tag?.sorry if the answer is very obvious. i just cant find it. I imported only to my project the calculator.css and calculator.js.

    1. Orvyl can you clear it more. Btw you need to have jquery script and than jquery UI script/css imported first before you import calculator.js in your html and there you can edit the link tag to change the theme.

      Let me know if it solves your query.


  11. How can I show it directly on top of everything so it doesn't move my elements around when shown ?

    1. put it inside an element having position: relative and the calculator itself should have position: absolute

  12. I have it in this div :

    I initialize it with :
    $('#calcdiv').calculator({movable:true,resizable:true, width:160,defaultOpen:true});

    And I'm using the css copy/pasta from the calculator.css file from the download link.

    It still pushes my elements down :-)
    Any ideas ? (I had to obfuscate with dots due to anti-html checks of the blog software)

  13. Sorry, no.

    But I ended up putting it inside a jquery dialog. Good enough. :-)

    Although I find it strange that it only captures keypad numbers.

  14. Thank you sharing this code. It saved hours of work. Firefox works fine for me however, in IE 8 the numbers do not display - the header title displays fine. Any idea? I used IE Developer Tool to debug and when I change the position to relative the numbers display but the format is lost. Can you help?

  15. Very nice, but you know that plugin?


  16. it is giving wrong answer..
    It is not giving right answer always..

  17. sorry its working fine.... i was trying with code which someone edited...