jQuery UI Spinner update

Tags: jquery, jqueryui, spinner, uispinner

Sorry for no news these past few months. It's been very hectic since the new family addition back in Dec which I managed to keep low key. I feel so guilty now for neglecting this blog and my readers (don't think I have any regulars anyway so I guess nothing missed!), but hey priorities are priorities!

Right, the reason for this post is that there has been some recent exciting updates to the spinner which I would love to get feedback on from the public. Thanks to Brant Burnett, the Spinner has been re-invigorated and looks set to become a kick ass component in the making!

We've added a bunch of new features and updates including:

support for jquery 1.3.2
support for ThemeRoller
spinning hexidecimals and other numbering systems
ability to auto-hide buttons and show on hover with customizable speeds
better keyboard interaction - you could now use PgUp/PgDn to setup up/down in a large increment set by options

We also have a lot more in the works, such as:

ability to spin time and date
segment spinning based on formatter
HTML5 support
and more...

If interested, check out the latest demo

We're still in the planning / development stage so any features you see now or currently being planned may not necessarily land in the final release. It all depends on what you want - collectively that is! So if there is something you really think should be added please shout in the dev mailing list or on the UI planning wiki.

Looking forward to some feedback.

Thanks!

25th May 2009, 3:03 am PDT | RSS 2.0 | Comment | Trackback

Similar Posts

34 Comments

By dalin at 25 May 2009 3:37 pm PDT

Cool. I didn’t even realize that it was a JS thing when I first opened it. For some reason I thought it was a native HTML tool. But I guess that’s what you should be aiming for — don’t let the tool get in the way of the content.
By Perry at 10 Jul 2009 11:33 am PDT

Hi! I have a question. I’d like to start using the spinner now. I noticed it was yanked from the UI library. But this post says that it has been updated to work with 1.3.2, the latest version. My question is will it work with the 1.7 version of the UI library? Or do I need to basically include the ui.core.js that is in the branch your site references?! I’m a bit confused as to what version of core, the css, and JQuery itself I should be using. Any advice would be appreciated!
By caphun at 10 Jul 2009 3:04 pm PDT

@perry – yes it will work with UI 1.7 so just use ui.core.js from the existing 1.7 code you have. As for the css you will need the standard TR themes and additionally ui.spinner.css found here:

http://jquery-ui.googlecode.com/svn/branches/dev/spinner/themes/base/ui.spinner.css

As for jQuery use 1.3.2.
By Perry at 11 Jul 2009 1:56 am PDT

Hey, what do you mean by standard TR themes? Forgive the rookie question. All I have is the default contents of the zip file from the JQuery UI website.
By caphun at 11 Jul 2009 2:25 am PDT

@perry – TR means ThemeRoller. Sorry for not explaining that. The zip file you downloaded should contain a TR theme which you will find in two places.

First is under css/your-theme/jquery-ui-1.7.2.custom.css (assuming you downloaded UI 1.7.2) – this one css is a combination of all the UI CSS.

Second place is under development-bundle/themes/your-theme – you will see loads of css files here. This is the original source.
By Perry at 14 Jul 2009 3:45 am PDT

Caphun, thanks for your help. I’ve got everything working nicely. Except for a spinner that has to spin currency by pennies. (USD) I noticed that none of the examples for currency handled a step of .01. Have you ever done this? I think there is a defect in the current impl..(decrement works just fine) Thanks again for all your help.
By caphun at 14 Jul 2009 7:47 pm PDT
@perry – you’re welcome! To spin decimals you simply specify it in the step value, e.g. step: 0.01.

However, there is a bug in the current code which forces the spinner to stop at a value of 0.06 if you specify a step size of 0.01, so do the following instead:
```
$('#spinner').spinner({
    currency: '$',
    step: 0.011
});
```
I will make sure this bug is fixed before we release it.

Thanks!
By Perry at 16 Jul 2009 12:48 am PDT

Hey Caphun, thanks for the work around. I don’t think it will work for my purposes, because it shows 3 decimal places for currency instead of the two..but I’ll live with moving up in .10 increments. Final question for you – is there any way I can keep the spinner’s default value set to “” instead of 0 or $0.00? Is there a way to do this? I need to have the spinner start blank. And then increment on user action. Thanks again for your hard work on this stuff.
By caphun at 16 Jul 2009 1:12 am PDT
@perry – try:
```
$('#spinner').spinner().val("");
```
RE: decimals. Strange you get 3 decimal places as the currency option should force it to 2. maybe try the precision option aswell.
By Jeff at 13 Aug 2009 1:23 am PDT

Hi there. I was wondering whether or not Spinner was included in the jQuery UI 1.7.2 release? I tried to get it to work on a test page and had no luck.
By caphun at 13 Aug 2009 1:37 am PDT

@jeff – we’re aiming for the UI 1.8 release. For now you’d have to get latest from SVN (see comments above). Feel free to ask questions here or on the mailing list if you’re still out of luck. Thanks!
By Jeff at 13 Aug 2009 1:53 am PDT

Awesome, thanks for the prompt response!
By Perry at 27 Aug 2009 5:27 am PDT

Hey Caphun, I was wondering if you had a chance to look at the precision, and step work around you gave me? setting step to .011 with a precision of 2 is acting weird when people are attempting to step up quickly, and then back down. It skips values. For example I can click and hold the up arrow and watch it increment to .56 and then hit the down arrow and it will skip .55 and go down to .53.
This also causes a problem when submitting the form. For some reason the input field is set to 1.20 and what gets posted is 1.19. Weird, right? Anyway, the decimal/precision issue is my biggest roadblock now. Any progress? I’d like to stop using the step:.011 hack which I believe is causing issues in general with my spinners. Thanks again for any help
By caphun at 27 Aug 2009 8:51 pm PDT

@perry – That workaround shouldn’t be necessary if you use the latest revision. Give the latest dev branch code a try. I’ve setup an example here to demostrate step and precision:

http://jsbin.com/ezovi

If you’d also like to play with this demo you could do via http://jsbin.com/ezovi/edit

Note: As I’m linking directly to the dev branch this demo will no longer work should the spinner move to trunk.
By Perry at 28 Aug 2009 4:16 am PDT

Thanks Caphun. BTW – you ever notice you can’t type .56 into the input field of this spinner, and then take focus away from it?! The value never sticks to .56. I have customers that want to just type in cents – without the leading 0!
By caphun at 28 Aug 2009 4:58 am PDT

@perry – That’s now supported! Thanks for noticing. The spinner should update on pressing ENTER aswell.
By Perry at 28 Aug 2009 6:13 am PDT

Supported in IE?!? BTW – I do get javascript errors as I scroll up to .20…and clicking the up arrow quickly seems to work very slowly in IE too…Sorry to be a bother, but I am testing and coding as we speak on this thing..(heavily)
By Perry at 28 Aug 2009 6:41 am PDT

Final question (I hope, for the night at least) What about supporting a blank field, or allowNull which I saw on the version that btburnett3 had on his site? If a user deletes the value in the spinner, and if I set the default value to .val(”") it doesn’t stick to blank. It goes back to 0.00. Please let me know if I need to start moving this to a message board thread or what have you…
By caphun at 28 Aug 2009 2:17 pm PDT

@perry – Yup IE is supported. I just fixed that javascript error. Thanks for reporting back

re: clicking buttons quickly is slow in IE. In IE if you click quickly the dblclick event is fired. dblclick does weird things across browsers so we’re not handling that event. For quick spinning try keeping the mouse button pressed down.

re: allowNull – if there’s a really good use case I don’t see why it cannot be added. Yes, additions like this must be properly discussed. The best place to do that is on http://wiki.jqueryui.com/Spinner (you’d need to register first before you can comment)

As you’re actually using the spinner in a real world scenario already your input is much valued and appreciated.

Thanks!
By Perry at 28 Aug 2009 8:13 pm PDT

Thanks for the advice and help these past few weeks Caphun. I’ll sign up to the group and start contributing formally when I get back to the office on Monday. As far as the allowNull idea – I’m basically setting the val(”") on the spinner and kind of expect it to go back to the default value if it is ever cleared out. At this point I have been mucking around with _parse to remove the recently added “|| 0″ clause which I believe is restoring my input box with 0.00 whenever I clear it out and move focus off the control.
By caphun at 28 Aug 2009 11:57 pm PDT
@perry – for now try this:
```
$('#spinner')
  .spinner()
  .val("")
  .blur(function() {
    if ($(this).val() == '0.00') {
      $(this).val("");
    }
  }
);
```
I know it looks ugly but that’s the quickest workaround I could think of.
By Perry at 1 Sep 2009 4:30 am PDT

Hey Caphun – thanks for the work around. I will say that the latest branch has a pretty big math bug in it. If you type -10.02 into the control and then jump out of it, or move focus somewhere else, it seems to do some subtraction and moves the control’s value to -9.98. That shouldn’t happen! Also, typing in the control is super slow in IE. I’m not sure what changed in the event handling, but it is a monster issue for us. I understand the double click event not working well in IE, but typing?! Check it out, maybe its just me?
By caphun at 1 Sep 2009 2:41 pm PDT

@perry – that does sound like a bug but I’ve not noticed it. Could you setup a test page with instructions on how to replicate this? Thanks!
By Perry at 1 Sep 2009 9:27 pm PDT

I’ll see if I can get a demo page up on my blog. But I was able to reproduce it yesterday from your sample, in that cool AJAX debugger: http://jsbin.com/ezovi/edit.

Seems like someone must have fixed it. I’m checking SVN now.
By Perry at 1 Sep 2009 10:56 pm PDT

I guess I’m wrong. Seems to work on my Macbook, in Firefox. But we are working on IE, and in IE this subtraction error shows up still. You can test using that sample page you set up for me in the link above. Just tab out of the bottom control (non currency) after entering -10.02.
By caphun at 2 Sep 2009 1:13 am PDT

OK, thanks for testing. By the way, which version of IE is this happening?
By Perry at 2 Sep 2009 1:52 am PDT

IE 6-7-8. I’m trying to reproduce again as we speak
By jQuery UI Spinner update | Yelotofu at 16 Sep 2009 2:36 am PDT

[...] See the original post: jQuery UI Spinner update | Yelotofu [...]
By jQuery UI Spinner update | Yelotofu at 16 Sep 2009 2:37 am PDT

[...] Visit link: jQuery UI Spinner update | Yelotofu [...]
By Jeffsea at 8 Oct 2009 11:05 pm PDT

@caphun thanks for all of the info above. has been very helpful. wish jquery-ui site had info about the current status of spinner instead of just ignoring it. thnx for the insights above.
By AF at 6 Nov 2009 12:34 am PST

Hi,

Where can find a spinner js and css that work with ui 1.7.2? There is no more spinner under http://jquery-ui.googlecode.com/svn/branches/dev/ui/

Am I looking at the right place? I tried the version under http://jquery-ui.googlecode.com/svn/branches/labs/spinner/ui/

but it does not work with core 1.7.2.
Thanks
By AF at 6 Nov 2009 12:48 am PST

Hi,

I wasn’t looking at the right place – just found it on http://dev.jqueryui.com/browser/branches/dev/spinner

Thanks
By bamboolabcode at 29 Jan 2010 11:52 am PST

Very interesting list. It’s a great addon to what I’m already doing. Thanks.
By XqELLEN at 30 Jan 2010 2:30 pm PST

People do opine that the term paper format accomplishing seems to be the really time wasting procedure. But, we count on the paper writing service help every time when it’s required.