OO Number Spinner

Inspired by this thread (http://www.codingforums.com/showthread.php?s=&threadid=34923). I've whipped up this code a while ago, so I have no time to make it cross-browser. Currently displays and works beautifully in IE6.

I like it :thumbsup:

Thanks! :cool:

I tried to do the same thing a while back but failed miserable :o

Nice work indeed! :)

[off-topic: It's too bad the browsers don't have these controlls built-in, anyone know why?]

I've modified the script to fix some onblur bugs and add some functionalities like the ability to specify a default value, to accept an increment of less than 1 (i.e. 0.5) and specify number of decimal places.

I'm still trying to make it work with NS7/Moz but to no avail. I didn't do any IE proprietary methods but I think the problem lies in the onfocus handler of input and window.

Edited. See post below before downloading the script.

For those who downloaded the attachment from the above post, please remove this line which can be found at the bottom part of the page:

<div id="db"></div>

I used it for debugging purposes and forgot to remove when I posted it.

I've managed to make it cross-browser. Only 2 minor problems now.

- the up/down buttons are displayed side by side in NS6+/Moz
- when (SHIFT+)TAB is used (as opposed to mouse clicks) to focus to the previous/next element, the "spinning" on the last target field still continue.

Tested and works in IE6, NS7.0, Moz1.0.
Assumed to work in IE5.x, NS6.x and probably in other browsers.
Even tested in NS4.7 and the functionality works! But of course, the control displays awfully.

Hope someone can help me fix those 2 minor bugs.

Perhaps you should let your object put the buttons to the input fields since they will only have a use if javascript is enabled anyway.

Okay, Glenn. You called, and I answer. Here's 1.7.

- The Up/Down buttons are atop each other in both IE 6 and Foxfire 0.8. Unfortunately, nothing works in Opera 7 any more.
- I couldn't reproduce your Shift-Tab error.
- I changed the <input type="button">s to <button>s, with carat (^) and vee (V) as the text; Foxfire was not applying Webdings to the buttons, and all I saw was 5 and 6.
- I added classNames to the buttons of spinUp and spinDown, for positioning and font size.
- I added to the buttons an onclick handler to return false and prevent form submission in Foxfire. (Didn't need it until I changed them to <button>s, but oh well.)
- I changed your currentTarget.select() and currentTarget.focus() functionality to use a CSS class that's applied dynamically, because
- I added support for spacebar on the up/down buttons.
- I also cleaned up all the whitespace. Why can't everybody follow MY coding style? </whine>

Next edition should encapsulate all the focus, targeting, etc. functionality into the constructor or at least the prototype.

Using ^ and V for up/down button text looks not good and uneven and the buttons are not aligned with the field. But I will leave the look and feel of the spinner control to the implementor of this script. That's what CSS is for. He can also make up/down arrows as background image of the button, or the buttons are images themselves, it's their call. What's important is the script within them.

My concern with your updated script is that when the button is clicked, it does not look "pressed down". Why? I think it's important for the user (especially common users) to see the button looks like being "pressed down" while it is being held down by the mouse and cursor or while the spacebar is pressed.

About the Tab/Shift-Tab error, try pressing Shift-Tab while the focus is on the "hour" field, then press the Up or Down button and you will see that the previously focused field "hour" still "spins". The same is true for pressing Tab. But you won't reproduce it because you don't have a field after the spinner control. The spinning error occurs because the currentTarget.field and currentTarget.spinner are not reset to null. My last resort is to instruct the implementor of this script to add

onfocus="setTarget(null, null)"

to the previous and next fields (according to the tabindex) of each spinner control.

Anyway, I appreciate your updates especially the fix for the alignment of Up and Down buttons. :thumbsup:

Regarding the coding style, did you know that I initially used Notepad to code this script without using tabs but instead spacebar?

Originally posted by Garadon
Perhaps you should let your object put the buttons to the input fields since they will only have a use if javascript is enabled anyway.

You're right. Actually, I initially thought of making the buttons set to display:none by default and set it to inline programmatically. I will add that in next update.

Originally posted by glenngv
Using ^ and V for up/down button text looks not good and uneven and the buttons are not aligned with the field. But I will leave the look and feel of the spinner control to the implementor of this script. That's what CSS is for. He can also make up/down arrows as background image of the button, or the buttons are images themselves, it's their call. What's important is the script within them.

In order to position the buttons correctly, a bit of CSS trickery was involved. I'd recommend packaging a .js and a .css for this script if you offer it for download from your site or something. I agree re: ^ and V; but it's better than seeing 5 and 6 in Gecko. As for alignment, what's wrong with this? (On the left is Foxfire 0.8, on the right is IE 6.)
http://www.10mar2001.com/images/grabs/spinner.gif

Originally posted by glenngv
My concern with your updated script is that when the button is clicked, it does not look "pressed down". Why? I think it's important for the user (especially common users) to see the button looks like being "pressed down" while it is being held down by the mouse and cursor or while the spacebar is pressed.

There's a line in the stylesheet which needs to be altered. Sorry about that: Change border: 1px outset #fff; to border-width: 1px; for the .spinButtonContainer button selector.

Originally posted by glenngv
About the Tab/Shift-Tab error, try pressing Shift-Tab while the focus is on the "hour" field, then press the Up or Down button and you will see that the previously focused field "hour" still "spins". The same is true for pressing Tab. But you won't reproduce it because you don't have a field after the spinner control. The spinning error occurs because the currentTarget.field and currentTarget.spinner are not reset to null. My last resort is to instruct the implementor of this script to add

onfocus="setTarget(null, null)"

to the previous and next fields (according to the tabindex) of each spinner control.

Like I said, I can't reproduce this. Likely, I can't reproduce this because I changed the focusing behavior: now, it just looks like it selects the input text; really, it's a CSS mockup that's applied in the fakeFocus() and fakeBlur() functions. Doesn't resetTarget() take care of the setTarget(null, null)?

Originally posted by glenngv
Anyway, I appreciate your updates especially the fix for the alignment of Up and Down buttons. :thumbsup:

Actually, positioning the buttons was ridiculously tricky. There's an issue with the span that nests the buttons - it's displayed as inline, and rightfully so, which means that when its children are positioned, it no longer has any flow size. The min-width property is the only thing I can use to get the buttons to be clickable, because Gecko believes I'm clicking on the P behind the BUTTON when I'm clicking on the BUTTON. There are a couple of bugs in bugzilla which reveal this kind of behavior; unfortunately all are marked UNCONF (irmed).

Originally posted by glenngv
Regarding the coding style, did you know that I initially used Notepad to code this script without using tabs but instead spacebar?
Oh, I was just kidding around. Why, though, would you work on a script of this size and breadth in Notepad? *shudder*

Oooh! Oooh! Add this to the constructor! Super cool!

targetField.onkeydown = function (evt) {
if ((evt ? evt.which : window.event.keyCode) == 38) {
startSpin(1,me.btnId);
return false;
} else if ((evt ? evt.which : window.event.keyCode) == 40) {
startSpin(0,me.btnId);
return false;
} else {
return true;
}
};
targetField.onkeyup = stopSpin;

Oh yeah. I LOVE keyboard controls.

Originally posted by Choopernickel
In order to position the buttons correctly, a bit of CSS trickery was involved. I'd recommend packaging a .js and a .css for this script if you offer it for download from your site or something. I agree re: ^ and V; but it's better than seeing 5 and 6 in Gecko. As for alignment, what's wrong with this? (On the left is Foxfire 0.8, on the right is IE 6.)
http://www.10mar2001.com/images/grabs/spinner.gif

See how the buttons look like in NS7.0, Moz1.0, IE6 in the attachment.

Originally posted by Choopernickel
Like I said, I can't reproduce this. Likely, I can't reproduce this because I changed the focusing behavior: now, it just looks like it selects the input text; really, it's a CSS mockup that's applied in the fakeFocus() and fakeBlur() functions. Doesn't resetTarget() take care of the setTarget(null, null)?

resetTarget is only called on document.onmousedown event. This function calls setTarget(null,null) when the mousedown target is not the Up/Down button. Therefore target field is not reset when onblur happens in the spinner control. You can't put onblur="setTarget(null, null)" to the spinner control because that would keep the control from "spinning". As I said in my previous post, my last resort is to instruct the implementor of this script to add onfocus="setTarget(null, null)" to the previous and next fields (according to the tabindex) of every spinner control.

Personally, I don't quite like faking the focus behavior just to give functionality to the spacebar. In Windows spinner control (such as the one used Date/Time properties window), the spacebar has no functionality and the Up/Down buttons have no focus. So I want to follow that behavior. And I like the keyboard up/down arrows functionality that you added. That also follows the behavior of Window spinner controls. :)

Originally posted by Choopernickel
Oh, I was just kidding around. Why, though, would you work on a script of this size and breadth in Notepad? *shudder* [/B]

I said I initially use notepad to create the base of the script. I used a better editor to finish the it. I used notepad because I was just trying if I can make such a script which was originally asked in the thread that I linked to in my first post. (FYI, I just use notepad when making scripts to answer problems posted here in CF). I was not really serious about it and had no inkling that it would make to "Post a Javascript" forum. Until I realized that it's becoming a cool control with robust and flexible features.

Sorry, I forgot the attachment I was talking about in my previous post.

Originally posted by glenngv
See how the buttons look like in NS7.0, Moz1.0, IE6 in the attachment.
Gotcha, broham. If you know of a way to send separate CSS instructions to Firefox versus Netscape7 and Moz1, I'd love to hear it. I can't think of any. Have you got FireFox? (Truly just curious.)

Originally posted by glenngv
resetTarget is only called on document.onmousedown event. This function calls setTarget(null,null) when the mousedown target is not the Up/Down button. Therefore target field is not reset when onblur happens in the spinner control. You can't put onblur="setTarget(null, null)" to the spinner control because that would keep the control from "spinning". As I said in my previous post, my last resort is to instruct the implementor of this script to add onfocus="setTarget(null, null)" to the previous and next fields (according to the tabindex) of every spinner control.
Seems like there would be a good way to program this, perhaps with a lastTarget object that would be a clone of the currentTarget object. I'll work on this.

Originally posted by glenngv Personally, I don't quite like faking the focus behavior just to give functionality to the spacebar. In Windows spinner control (such as the one used Date/Time properties window), the spacebar has no functionality and the Up/Down buttons have no focus. So I want to follow that behavior.
It might just be that I'm not using Netscape7 or Moz1 that means I can't replicate the error. Also, I see more where you're going with this and completely understand. Removal of that functionality is okey-dokey by me.

Originally posted by glenngv And I like the keyboard up/down arrows functionality that you added. That also follows the behavior of Window spinner controls. :)
:D I thought that would be a good touch.

Originally posted by glenngv
I said I initially use notepad to create the base of the script. I used a better editor to finish the it. I used notepad because I was just trying if I can make such a script which was originally asked in the thread that I linked to in my first post. (FYI, I just use notepad when making scripts to answer problems posted here in CF). I was not really serious about it and had no inkling that it would make to "Post a Javascript" forum. Until I realized that it's becoming a cool control with robust and flexible features.
Man, I'm just giving you a hard time. I know it's perfectly unreasonable to expect any kind of standard style. Myself, I always have HomeSite open, so I just pop back and forth - and replace all tabs with 4 spaces before I post any scripts, because tabs display so wide in browsers.

Version 1.75 - unstable, lightly tested.

- Space bar support removed (what to do about focus of up/down buttons?), including css-faked focus/blur.
- No positioning issues resolved.
- Persistence of last target; should eliminate focus issues.
- Rolling up of global persistors into (static?) properties of the constructor function.

Thoughts?

Using lastTarget object didn't solve the onfocus issue. It even introduce a new bug - the "spinning" still continue even if you already clicked outside the control and click the Up/Down buttons again.

Yeah, man, I'm pretty stumped. One change that helps is taking the "noleftright" input (the colon between the times) and setting it to disabled with the following stylesheet instructions:
background-color: Window;
color: WindowText;
...but that's a band-aid, and it doesn't fix focusing on other elements (link, input/select/etc, window). Also, in a page with nonstandard input styling, the effect will be lost.

I'm beginning to think faking the focus (without putting the spacebar stuff back in) might still be the best way to get around the problem.

Maybe what needs to happen for a clock/date implementation is a separate spinner class that extend the basic spinner's functionality. Using multiple spinner fields with the same spinner buttons is really the cause of this difficulty.

Thoughts?

Sorry about resurecting an old thread :)

I found this spinner code a couple months ago and I think it's fantastic. Recently I have needed a date spinner as well, and not being able to find a decent one I decided to try and extend this one.

I'm not much of a javascript programmer. I'm mainly a PHP developer, but I did manage to get something working so I thought I would post it here for you guys. The next challenge, which I think is beyond me at the moment (as this simple addition took me all morning to work out), is to make a month spinner which spins on month names. I always prefer to display a month name, that way Americans don't get confused by the correct way of displaying a date dd/mm/yyyy :p

There is a bug in the previous versions of this script.

If you request a spinner with a leading 0 but a default value greater than 10 then the initial output in the textbox ends up looking like this '012' instead of just '12'.

The problem was the line that set the initial value was checking if the textfield value was greater than 10 instead of the default value being greater than 10.

Here is the fixed version.

Good catch but there should be no .value because you're passing a number not a textfield object.

(me.hasLeadingZero && defaultValue.value < 10)

Have you guys noticed that if you press down on the button and then release the mouse when you are no longer on top of the button, the spinner just keeps spinning? anyone have a fix for that one? Also, the time between allowable clicks is too slow (click once, wait for a second, then you can click again)... anyone already work that one out?

Other than that, this is very nice. Thanks everyone.

Great script glenngv, did you release a version after 1.6 ? I tried it in IE6, Netscape and fire fox and to me - very much a coding newbie, better: nobody ;) - it seemed to work as it should although the look of the buttons were different in N and F.

Somebody has updated the script.

http://www.codingforums.com/showthread.php?t=110861