I want to make a form like that: JavaSpinnerDemo

I can not find anything like that in html, so I think I have to use <input type="text"> and two <input type="button"> (or <button></button>). I tried to put these buttons in table like that:

<table cellspacing="0" cellspacing="0" border="0">
<tr><td style="width:2;height:2"><SPACER TYPE="block" HEIGHT="1" WIDTH="1"><button type="button" style="width:2;height:2"><p style="font-size:10%">+</p></button></td></tr>
<tr><td style="width:2;height:2"><SPACER TYPE="block" HEIGHT="1" WIDTH="1"><button type="button" style="width:2;height:2"><p style="font-size:10%">+</p></button></td>
</tr>
</table>

, but table is too high (about 2 lines height, and a big space between buttons). Also buttons are about 15 px wide...

Can anybody help me with that ?

2 answers

Mottie 1134
1
point
This was chosen as the best answer

Hi Rafal!

Spinners are not a standard part of HTML input forms, so you'll either need to create it yourself or use another script setup to provide the look and function.

jQuery UI has a spinner you could use and if you don't want to use jQuery, here are the essential parts to make your own using just HTML and CSS (demo). You'll have to add functionality to the buttons yourself.

HTML

<div class="spinner">
 <input type="text">
 <button class="up">&#9650;</button>
 <button class="down">&#9660;</button>
</div>

CSS

.spinner { border: #444 1px solid; padding: 0; margin: 0; position: relative; width: 165px; }
.spinner input { width: 150px; }
.spinner button { padding: 0; margin: 0; font-size: 5px; border: 0; height: 50%; position: absolute; right: 0; }
.spinner .up { top: 0; }
.spinner .down { bottom: 0; }
Answered almost 9 years ago by Mottie
  • I don't think he ever said anything about an indeterminate progress spinner. Nathan Duran almost 9 years ago
  • @Nathan Duran: Did you look at the image he linked? Mottie almost 9 years ago
  • Thank you, that is exactly what I wanted ! Very simple. BTW: I also found: [dijit Spinner][1] [1]: http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Spinner.html Rafal Magda almost 9 years ago
  • Yes I did, and there are no spinners in it or in his question. Nathan Duran almost 9 years ago
  • The OP set the image link text to JavaSpinnerDemo! And if there are no spinners in the screenshot, what are those three things with up and down buttons in them? danwellman almost 9 years ago
  • They look like numeric text field increment and decrement buttons to me. If you call things which do not spin "spinners" in your country, then that's unfortunate. Nathan Duran almost 9 years ago
  • Indeed, the buttons do increment and decrement, but collectively, each group of up and down buttons and the form field they act upon are called 'spinners' in many countries, even yours. The only thing that's unfortunate is that you don't know that. http://en.wikipedia.org/wiki/Spinner_%28computing%29 danwellman almost 9 years ago
  • Oh I can think of a lot more unfortunate things than that. Can you find me a Wikipedia article that justifies the use of stock photo star field backgrounds and terrible glows? Nathan Duran almost 9 years ago
  • If you're refering to the background I chose for my website, it's not a stock photo, it's a copyright-free NASA image of the Horsehead nebula, which I happen to quite like. We can pick holes in each other's sites all day long, but it's not going to change the fact that you were wrong, and ingraciously wrong at that danwellman almost 9 years ago
0
points

You're not going to be able to recreate those controls with form input buttons; you're going to have to fake them with some other block elements and wire up your own click tracking behavior in JavaScript.

Answered almost 9 years ago by Nathan Duran
  • I know - I will handle "onClick()" methods myself. Rafal Magda almost 9 years ago