jQuery UI Spinner update

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!

38 Comments

  1. dalin at

    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.

  2. Perry at

    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!

  3. caphun at

    @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/

    As for jQuery use 1.3.2.

  4. Perry at

    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.

  5. caphun at

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

  6. Perry at

    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.

  7. caphun at

    @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:

    <pre>

    $('#spinner').spinner({

    currency: '$',

    step: 0.011

    });

    </pre>

    I will make sure this bug is fixed before we release it.

    Thanks!

  8. Perry at

    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.

  9. caphun at

    @perry – try:

    <pre>

    $('#spinner').spinner().val("");

    </pre>

    RE: decimals. Strange you get 3 decimal places as the currency option should force it to 2. maybe try the precision option aswell.

  10. Jeff at

    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.

  11. caphun at

    @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!

  12. Jeff at

    Awesome, thanks for the prompt response! :)

  13. Perry at

    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

  14. caphun at

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

  15. Perry at

    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!

  16. caphun at

    @perry – That's now supported! Thanks for noticing. The spinner should update on pressing ENTER aswell.

  17. Perry at

    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)

  18. Perry at

    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…

  19. caphun at

    @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! :)

  20. Perry at

    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.

  21. caphun at

    @perry – for now try this:

    <pre>$('#spinner')

    .spinner()

    .val("")

    .blur(function() {

    if ($(this).val() == '0.00') {

    $(this).val("");

    }

    }

    );</pre>

    I know it looks ugly but that's the quickest workaround I could think of.

  22. Perry at

    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?

  23. caphun at

    @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!

  24. Perry at

    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.

  25. Perry at

    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.

  26. caphun at

    OK, thanks for testing. By the way, which version of IE is this happening?

  27. Perry at

    IE 6-7-8. I'm trying to reproduce again as we speak

  28. Pingback: jQuery UI Spinner update | Yelotofu

  29. Pingback: jQuery UI Spinner update | Yelotofu

  30. Jeffsea at

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

  31. AF at

    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/

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

    but it does not work with core 1.7.2.

    Thanks

  32. AF at

    Hi,

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

    Thanks

  33. Very interesting list. It’s a great addon to what I’m already doing. Thanks.

  34. Has there been any more progress on this? Any word on a spinner that works with 1.8? Thanks!

  35. ads at

    Hi is this spinner going to ever make it ? this is a great tool, and looking at the history its been in development for a while.