The Spinbox
The spinbox is also called spinbutton, spincontrol or UpDown button. You can see it in the picture on the right. It is commonly used to enter, for example, time and dates in desktop applications but isn’t available as an HTML form element.
Placing the arrows
The greatest challenge by far was positioning the arrow images. I started trying to do it using css, but soon gave up when I encountered too many browser inconsistensies, bugs and missing features (such as missing inline-block in Firefox), and decided to do it the old-fashioned way instead: using tables. In my solution, a table is created dynamically around the textbox and made inline so that more than one spinbox can be laid out on the same line. Only problem is, Firefox and IE both don’t understand display:inline-table, they want display:inline instead, which Safari & Opera don’t like. The solution to that:
table.style.display='inline';
try {
table.style.display = 'inline-table';
} catch(e) {}
Firefox just silently drops the inline-table declaration that it doesn’t understand but IE throws and error. That’s why the try/catch statement is needed.
PeriodicalExecuter
When one of the arrows is clicked, the value in the textbox should increase or decrease while the mouse button is held down. To accomplish this I created a Prototype PeriodicalExecuter which updates the textbox with increasing frequency. Only problem is, for some reason they’ve decided to not include a stop method for the PeriodicalExecuter. Luckily, someone else also ran into this problem. I’ve included that solution in my source.
Disable context menu
In Firefox on Mac, the context menu pops up when you hold down the left mouse button for a second or so anywhere in the window. This is obviously a bit annoying when you are trying to use the spinbox. Turns out that you can stop it from happening by denying the onContextMenu action from firing. In Prototype code:
Event.observe(img,'contextmenu',function(evt){Event.stop(evt);});
In HTML this would be:
<img src="pic.gif" oncontextmenu="return false;">
Files
Download the files here: tesSpinbox. You can try a live demo here: Demo.
Usage
Include prototype first, and then spinbox.js. Change the path to the images in spinbox.js (sb_imgpath) to point to where you uploaded the images. Then to convert any textbox into a spinbox:
new SpinBox(id_of_textbox,min_value,max_value,padded_length);
Padded_length is the desired length of the string in the textbox. If the string is shorter than this value, it will be padded with zeros. A padded_length of 3 would mean that 7 becomes 007, for example. A spinbox example:
<input type="text" id="myspin" size="2">
<script language="javascript">
new SpinBox('myspin',0,59);
</script>
Will turn the textbox into a spinbox with a minimum value of 0, maximum value of 59 which is not zero-padded at all.
Wouldn’t it be nice to be able to add some kind of dependencies between different spinboxes. So when one spinbox reach a certain value it will increase/decrease another spinbox with a specified amount.
E.g. in your demo, it would be nice if the hour spinbox increased with one when you’ve reached the max value of the minute spinbox, and that the minute spinbox restarted counting from one.
Great work by the way!
Thanks for the suggestion Erik! That will definitely be in the next version of the spinbox!
Hi !
i’ve installed it on a web page and see the spinboxes for an hour introduction. The web page is fine.
But there’s a glitch :/ the variables don’t POST in the HTTP_POST_VARS. My program can’t get these value.
I use POST type form.
Any idea ?
Very good work. I’m just learning Javascript and try many things such as Ajax. So I found prototype and your blog to stop a PeriodicalExecuter. So I tried your Spinbox.
My Question is now: Is it possible to create the javascript spinbox object with no html dom eventhandler? I have scripts, which load div.innerHTML and in this code is the defined. But it doesn’t exist at load-time. What can I do then?
Eric Binger: Did you copy the text inputs directly from the demo.html file? In that case you need to add name attributes to them before they work, i.e. <input type=”text” name=”name_of_input”>. If that’s not the case, what browser are you using?
Mike Greubel: You can create the spinbox anytime! It doesn’t need to be done at load-time. You can also provide the constructor with the actual textbox object rather than the id of the textbox. In your case however, you could just initialize the spinbox normally after the textbox has been created inside the div (if I’m understanding you correctly).
Hi Tomas !
yes i create the
new SpinBox(’minutespassage’,0,59,2);
I use mozilla on Linux ; have also tried Firefox, same issue :/
Good work anyway
Hi again !
my previous message has been truncated !
i have take a look on your javascript source ; i think there is perhaps a mixup with ‘disabled’ attribute.
Of course when a field is disabled the browser doesn’t send it to server ; the attribute ‘readonly’ make the field locked AND sended to server…
cya !
Hi,
I liked your spin button; I was trying to dynamically create the objects using PHP
and getting flowing error:
Error1:
Line:34
Char:1
Error’PeriodicalExecuter’ is undefined
Code:0
URL: file://C:\Documents and Settings\rramani.AGILE\Desktop\Untitled.htm
Error2:
Line: 159
Char: 5
Error:’toolbar[…].0′ is null or not an object
Code: 0
Any clue on why I am getting this error
Ramesh:
Have you included the prototype javascript library? Sounds like it can’t find the PeriodicalExecuter which is part of the prototype library
Good Work!
Clean and easy code and greate component!
I finded a little bug and posted at sourceforge and create a feature request too asking for set the step size.
[]’s
Vinícius Pitta Lima de Araújo
Nice use of the periodical executor. I’ll have to think of a need to use the spinbox
Thx. Great work. And saved me a lot of work.
Hi Tomas,
Thanks for your spinbox. I modified it to display time in just one spinbox. So instead of
separate spinboxes for hour, minutes, and seconds. A single spinbox shows all the
information (hh:mm:ss). By incrementing the seconds up to the maximum limit,
increments the minutes part. Also, incrementing the minutes part up to the
maximum limit increments the hour part.
I don’t know how to create spinbox in javascirpt and dhtml plzzz tell me
Hi Thomas,
I searched lot of websites in google, but I didn’t find how to create spin box and spin buttons. Finally, I got your link and I downloaded your files which you have kept in website. It’s work fine. good work by you. Thank you.