JSCalc: the JavaScript calculator bookmarklet

21 June 2005

31 comments

A Blue Perspective: JSCalc: the JavaScript calculator bookmarklet

» JSCalc calculator bookmarklet «

Doug pointed out Calq and I thought "Yeah, that's handy, but I don't like installing stuff".

So, here's a bookmarklet that pops up a calculator on top of whatever webpage you're viewing and lets you figure out the 35th decimal of Pi, or just how much tax you're paying to maintain "Hamster Xing" signs on our State highways.

Right-click here and "Bookmark" JSCalc to access it anywhere, or click the link to try it out.

At the moment it only works perfectly in Mozilla/Firefox because:

  • Internet Explorer doesn't like long URLs. The current compressed code is about 2000 characters – well over IE's limit of 508 on "favorites". While the code could definitely be optimised more, I doubt that enough could be butchered to fit into such cramped quarters.
  • Opera doesn't like to resize an element's font-size after the page has been loaded, therefore the feature where you type more than 8 characters into the calculator and the font-size decreases doesn't work. I suppose it still works if you're doing small calculations though.
  • Same goes for Safari as it does for Opera, though it manifests itself in a different visual aberration.

Who knows, I (or you) might get around to making it cross-browser.

Categories

, ,

Comments

  1. 1/31

    Frank Manno commented on 21 June 2005 @ 05:42

    Cameron,

    Sweet!  I love the text re-sizing effect.  Definitely bookmarking this one.

    Any chance of you releasing the source for others to modify?

  2. 2/31

    Hans commented on 21 June 2005 @ 05:48

    Looks good (actually better than Calq), but I'd rather install something than waste more of my screen space by enabling the Bookmarks toolbar.

    It's great and all, just not the right solution for me.

  3. 3/31

    Jeff Wheeler commented on 21 June 2005 @ 05:54

    Very cool effect, and it works great in Firefox. I don't think I'll use it until you have Safari support though.

    When you do, it'll be mighty useful function.

  4. 4/31

    Agustin commented on 21 June 2005 @ 06:32

    Nice work!

    Why are some letters allowed and others not?

  5. 5/31

    Dave commented on 21 June 2005 @ 07:48

    The text is pritty!

  6. 6/31

    Nicholas Rougeux commented on 21 June 2005 @ 11:46

    Very intersting little JS tool there. I think the fade-out after you're finished using it is a nice touch. It's too bad it doesn't work in the other browsers. I'm sure it's only a matter of time until it does since the code's available.

    I'd definitely use it but what's holding me back is the ability to use it from a shortcut key. I currently use PowerCalc (Windows user) and assigning it a quick shortcut key is quite useful. Unless I'm offbase and It's easy to assign one in which case, I'd probably give this a good bit of use.

    All in all, I think it's great. Nice short bit of code too. Why are some letters allowed though? I understand "x" since that doubles as multiplication but what about the others?

  7. 7/31

    The Man in Blue commented on 21 June 2005 @ 12:43

    > Why are some letters allowed though?

    Left some stray character codes in there, removed now.

    "x" is allowed for multiplication.

  8. 8/31

    Lach commented on 21 June 2005 @ 14:27

    It sounds useful -- I haven't taken a look at the code, so if I'm wrong feel free to have at me. However, if the cookmarklet is so long have you considered changing it to query Google calculator behind the scenes and have the bookmarklet simply run on top of that?

    I've used only Google calculator since the last time I tried to calculate a factorial in Windows calculator -- I'm not going to make that mistake again.

  9. 9/31

    The Man in Blue commented on 21 June 2005 @ 14:40

    > have you considered changing it to query Google calculator behind the scenes?

    Remote scripting only works for the current domain -- you can't access files outside the current domain.

  10. 10/31

    Nicholas Rougeux commented on 21 June 2005 @ 20:45

    Thanks for updating the script. I also noticed that "^" isn't allowed either. Is this just because it's regarded as a bit too complex for a basic calculator? It's a minor thing but one I noticed.

    Also, when you use the calculator on this page, the link to the about page appears to always be in the same position no matter how far down you have scrolled before you clicked it. You're at the top of the page, it's right where it should be but the farther you scroll down on the page before clicking it, farther "removed" from the main body the link is.

    Do you think that you might include a "close" button in addition to the current closing method? I like the fade but I find myself accidentally clicking the about link to close it by reflex.

  11. 11/31

    Unearthed Ruminator commented on 21 June 2005 @ 21:19

    This is a very cool little app.  Great work.

  12. 12/31

    Tom commented on 21 June 2005 @ 22:07

    Escape should close it, without the fade.

  13. 13/31

    Tim Hill commented on 22 June 2005 @ 14:27

    I reckon the fade is sweet =)

  14. 14/31

    deoren commented on 24 June 2005 @ 05:41

    Normally I hate to see JavaScript in action (read: ad annoyances) but this is a great example of how it can be so useful.  :)

  15. 15/31

    Randy commented on 25 June 2005 @ 01:34

    For a simple cross-browser bookmarkable calculator, just use:

    javascript:alert(eval(prompt("Enter calculation:")))

    The bonus here is that you can use all the Javascript Math functions (e.g., Math.pow, Math.sqrt)

  16. 16/31

    Matt commented on 25 June 2005 @ 03:49

    Sweet app. When I scroll down on the page and then click the bookmark, there is a big gap between the title and the main text area, though.

  17. 17/31

    Matt commented on 25 June 2005 @ 08:38

    Using google calculator would be a neat idea, although you can't do cross-site scripting.  However, for personal use, one could write their own personal server-side script to pass data to/parse results from google calc.

    Would be neat, for sure.

    Good job with the jscalc!

  18. 18/31

    The Man in Blue commented on 26 June 2005 @ 00:40

    Title positioning bug fixed.

  19. 19/31

    dusoft commented on 5 July 2005 @ 07:07

    ^ square function should be certainly available as sometimes could be handy.

     otherwise very nice.

    but why is the length of numbers limited? e.g. you can only enter few operations at once...?

  20. 20/31

    Fred commented on 7 July 2005 @ 05:44

    At the very end of script here http://www.themaninblue.com/experiment/JSCalc/scripts/JSCalc.js just simply add one line with JSCalc(); and then call it this way in bookmarklet href.
    javascript:void(MIB=document.getElementsByTagName('head').item(0).appendChild(document.createElement('script')));void(MIB.type='text/javascript');void(MIB.src='JSCalc.js');
    There is some another  problem in function verticalAlign just replace window.innerHeight/2 with document.body.scrollHeight/2 and it will works in both MSIE6 and Firefox 1.0

  21. 21/31

    Fred commented on 7 July 2005 @ 05:48

    I forget to say that here MIB.src='JSCalc.js' has to be correct src to script, similar way as it works at http://slayeroffice.com. And even you could move whole the css part to separate css file and then call it this way:
    var d = document;
    function jscss(){
    var csslink = d.createElement('link');
    csslink.setAttribute('href','js.css');
    csslink.setAttribute('rel','stylesheet');
    csslink.setAttribute('type','text/css');
    d.getElementsByTagName('head').item(0).appendChild(csslink);
    }
    This trick use to be at http://www.paranoidfish.org/

  22. 22/31

    The Man in Blue commented on 7 July 2005 @ 14:09

    Yeah, I thought about making an external script call, but I didn't want the bookmarklet to rely on anything external, plus it would introduce a time delay factor.

  23. 23/31

    Fred commented on 7 July 2005 @ 16:44

    Time delay factor, it explain me why this my personal bookmarklet for radio listening sometimes stop. I didn't know that. http://xy.wz.cz/radio/ :-)

  24. 24/31

    Kim Siever commented on 14 July 2005 @ 06:56

    Very cool. Thanks for the pointer.

  25. 25/31

    Rob Morgan commented on 15 July 2005 @ 13:03

    I love it! keep up the good work this is awesome!

  26. 26/31

    Dude commented on 17 August 2005 @ 21:08

    good stuff

    love it

    showed my web class

  27. 27/31

    Shishank commented on 25 August 2005 @ 18:37

    Its really cool !! Works great in firefox.

  28. 28/31

    A commented on 8 September 2005 @ 10:00

    Very nice, but needs ^

    Esc should close, not clear

    Doesn't work when you put something like 2(3+4), forces you to put 2*(3+4)

  29. 29/31

    Kragen Sitaker commented on 1 December 2005 @ 10:02

     Very nice.  My DHTML calculator 

    isn't nearly as pretty, and it's RPN to boot, but it supports circular and exponential functions and, more importantly, stores intermediate results.  But if you don't like RPN, you'll hate it.

    I always intended to make a bookmarklet version, and this lovely example shows how to do it.

  30. 30/31

    Rodrigo Martinez commented on 15 December 2005 @ 01:26

    I've been using JSCalc for a while now and it comes in handy all the time. I just realized that while you are on a tab in firefox with gmail opened JSCalc won't open.

  31. 31/31

    falcon commented on 27 March 2006 @ 15:25

    Doesn't work on firefox 1.5 in linux!

  32. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed