Page style:

A Blue Perspective: JSCalc: the JavaScript calculator bookmarklet

JSCalc: the JavaScript calculator bookmarklet
21 June 2005

» 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.

Comments

1/30. 21 June 2005 @ 05:42, Frank Manno wrote:

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/30. 21 June 2005 @ 05:48, Hans wrote:

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/30. 21 June 2005 @ 05:54, Jeff Wheeler wrote:

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/30. 21 June 2005 @ 06:32, Agustin wrote:

Nice work!

Why are some letters allowed and others not?

5/30. 21 June 2005 @ 07:48, Dave wrote:

The text is pritty!

6/30. 21 June 2005 @ 11:46, Nicholas Rougeux wrote:

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/30. 21 June 2005 @ 12:43, The Man in Blue wrote:

> Why are some letters allowed though?

Left some stray character codes in there, removed now.

"x" is allowed for multiplication.

8/30. 21 June 2005 @ 14:27, Lach wrote:

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/30. 21 June 2005 @ 14:40, The Man in Blue wrote:

> 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/30. 21 June 2005 @ 20:45, Nicholas Rougeux wrote:

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/30. 21 June 2005 @ 21:19, Unearthed Ruminator wrote:

This is a very cool little app.  Great work.

12/30. 21 June 2005 @ 22:07, Tom wrote:

Escape should close it, without the fade.

13/30. 22 June 2005 @ 14:27, Tim Hill wrote:

I reckon the fade is sweet =)

14/30. 24 June 2005 @ 05:41, deoren wrote:

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/30. 25 June 2005 @ 01:34, Randy wrote:

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/30. 25 June 2005 @ 03:49, Matt wrote:

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/30. 25 June 2005 @ 08:38, Matt wrote:

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/30. 26 June 2005 @ 00:40, The Man in Blue wrote:

Title positioning bug fixed.

19/30. 5 July 2005 @ 07:07, dusoft wrote:

^ 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/30. 7 July 2005 @ 05:44, Fred wrote:

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/30. 7 July 2005 @ 05:48, Fred wrote:

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/30. 7 July 2005 @ 14:09, The Man in Blue wrote:

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/30. 7 July 2005 @ 16:44, Fred wrote:

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/30. 14 July 2005 @ 06:56, Kim Siever wrote:

Very cool. Thanks for the pointer.

25/30. 15 July 2005 @ 13:03, Rob Morgan wrote:

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

26/30. 17 August 2005 @ 21:08, Dude wrote:

good stuff

love it

showed my web class

27/30. 25 August 2005 @ 18:37, Shishank wrote:

Its really cool !! Works great in firefox.

28/30. 8 September 2005 @ 10:00, A wrote:

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/30. 1 December 2005 @ 10:02, Kragen Sitaker wrote:

 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. 15 December 2005 @ 01:26, Rodrigo Martinez wrote:

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.

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.