JQuery Plugin: SpinBox / SpinButton Control (with no extra markup)

[George Adamson]

Hi everyone,

I've been working on a Spin Control that uses only a standard textbox.
<input type="text" />
With Javascript enabled the textbox looks and acts like a spin-button
control without adding any extra elements.

http://www.softwareunity.com/sandbox/jqueryspinbtn/

The up/down arrows are achieved using a background image, the rest is
handled by Javascript/JQuery.
I hope it is useful for some of you. I'm also working on a drop down
date-picker that uses similar principles.
(I just don't like solutions that add loads of extra markup!)

Feedback/comments are welcomed, though I won't be able to respond to
requests for help/support, sorry!

George


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Andy Matthews-2]

Page not found.

<!----------------//------
andy matthews
web developer
certified advanced coldfusion programmer
ICGLink, Inc.
andy@...
615.370.1530 x737
--------------//--------->

-----Original Message-----
From: discuss-bounces@... [mailto:discuss-bounces@...]On
Behalf Of George Adamson
Sent: Friday, August 11, 2006 10:34 AM
To: discuss@...
Subject: [jQuery] JQuery Plugin: SpinBox / SpinButton Control (with no
extramarkup)


Hi everyone,

I've been working on a Spin Control that uses only a standard textbox.
<input type="text" />
With Javascript enabled the textbox looks and acts like a spin-button
control without adding any extra elements.

http://www.softwareunity.com/sandbox/jqueryspinbtn/

The up/down arrows are achieved using a background image, the rest is
handled by Javascript/JQuery.
I hope it is useful for some of you. I'm also working on a drop down
date-picker that uses similar principles.
(I just don't like solutions that add loads of extra markup!)

Feedback/comments are welcomed, though I won't be able to respond to
requests for help/support, sorry!

George


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Jonathan Sharp]

It doesn't work for me in FF1.5.05/IE6.x (no arrows show up)

-js

On 8/11/06, George Adamson <George.JQuery@...> wrote:

Hi everyone,

I've been working on a Spin Control that uses only a standard textbox.
<input type="text" />
With Javascript enabled the textbox looks and acts like a spin-button
control without adding any extra elements.

http://www.softwareunity.com/sandbox/jqueryspinbtn/

The up/down arrows are achieved using a background image, the rest is
handled by Javascript/JQuery.
I hope it is useful for some of you. I'm also working on a drop down
date-picker that uses similar principles.
(I just don't like solutions that add loads of extra markup!)

Feedback/comments are welcomed, though I won't be able to respond to
requests for help/support, sorry!

George


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[John Resig]

This is a great idea for a plugin - keep up the good work!

> It doesn't work for me in FF1.5.05/IE6.x (no arrows show up)

Works for me in Firefox 2.0 Beta 1, OSX.
However, Safari 2.0 shows no arrows (but if you click, it decreases
the count - only).
And in Opera 9 it also decreases the count only, but does show the arrows.

--John

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Jonathan Sharp]

It works now, very slick!

-js

On 8/11/06, John Resig <jeresig@...> wrote:

This is a great idea for a plugin - keep up the good work!

> It doesn't work for me in FF1.5.05/IE6.x (no arrows show up)

Works for me in Firefox 2.0 Beta 1, OSX.
However, Safari 2.0 shows no arrows (but if you click, it decreases
the count - only).
And in Opera 9 it also decreases the count only, but does show the arrows.

--John

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Andy Matthews-2]

Okay...

It's working in FF. Very nice! This should get melded in with the form
plugin posted earlier.

<!----------------//------
andy matthews
web developer
certified advanced coldfusion programmer
ICGLink, Inc.
andy@...
615.370.1530 x737
--------------//--------->

-----Original Message-----
From: discuss-bounces@... [mailto:discuss-bounces@...]On
Behalf Of George Adamson
Sent: Friday, August 11, 2006 10:34 AM
To: discuss@...
Subject: [jQuery] JQuery Plugin: SpinBox / SpinButton Control (with no
extramarkup)


Hi everyone,

I've been working on a Spin Control that uses only a standard textbox.
<input type="text" />
With Javascript enabled the textbox looks and acts like a spin-button
control without adding any extra elements.

http://www.softwareunity.com/sandbox/jqueryspinbtn/

The up/down arrows are achieved using a background image, the rest is
handled by Javascript/JQuery.
I hope it is useful for some of you. I'm also working on a drop down
date-picker that uses similar principles.
(I just don't like solutions that add loads of extra markup!)

Feedback/comments are welcomed, though I won't be able to respond to
requests for help/support, sorry!

George


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Jörn Zaefferer]

Hi George,

very nice work so far.

Some ideas:
- min, max and increments would be very useful and quite easy to implement
- concerning 'disallow non-numeric text': Sam wrote a plugin that does
exactly this ( http://sam.collett.googlepages.com/numeric.html )
- the perfect spinbutton could do this: up/down keys to in-/decrease;
up-/down-buttons single click for single step; hold up-/down-buttons for
repeated steps; click, hold and drag either button to in-/deacrease, based
on direction
- non numeric data as dates are rather uninteressting, as there are very
nice date pickers available; on the other hand, a spin button for time for
be great
- for avoiding namespace cluttering and easy option parsing there are some
tricks available - I learned these from jQuery itself and several plugins
and used them in a plugin of mine, if you are interesseted, have a look at
it: http://fuzz.bassistance.de/jQueryFormValidation/js/validate.js - Most
interesseting should be the start till this line:
jQuery.extend(this.settings, options);
If you apply this to your code, your syntax could look like this:
var options = {
 min: 0,
 max: 200,
 step: 5
}
$('input.spinMe').spinButton(options);

Something you should definitly change: Load a copy of jQuery from your own
server and remove the link zu jQuery.com. This is a something that remained
in the official docs. Please have a look at the updated tutorial here:
http://proj.jquery.com/docs/Tutorials/Basics/

I added your plugin (and Sam's numeric plugin) to the plugin page, so
everybody can find it: http://proj.jquery.com/docs/Plugins/

-- Jörn


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Dylan Verheul]

FF 1.5 shows arrows but otherwise doesnt work.
IE6 works for me.

On 8/11/06, Jörn Zaefferer <Enchos@...> wrote:

> Hi George,
>
> very nice work so far.
>
> Some ideas:
> - min, max and increments would be very useful and quite easy to implement
> - concerning 'disallow non-numeric text': Sam wrote a plugin that does
> exactly this ( http://sam.collett.googlepages.com/numeric.html )
> - the perfect spinbutton could do this: up/down keys to in-/decrease;
> up-/down-buttons single click for single step; hold up-/down-buttons for
> repeated steps; click, hold and drag either button to in-/deacrease, based
> on direction
> - non numeric data as dates are rather uninteressting, as there are very
> nice date pickers available; on the other hand, a spin button for time for
> be great
> - for avoiding namespace cluttering and easy option parsing there are some
> tricks available - I learned these from jQuery itself and several plugins
> and used them in a plugin of mine, if you are interesseted, have a look at
> it: http://fuzz.bassistance.de/jQueryFormValidation/js/validate.js - Most
> interesseting should be the start till this line:
> jQuery.extend(this.settings, options);
> If you apply this to your code, your syntax could look like this:
> var options = {
>  min: 0,
>  max: 200,
>  step: 5
> }
> $('input.spinMe').spinButton(options);
>
> Something you should definitly change: Load a copy of jQuery from your own
> server and remove the link zu jQuery.com. This is a something that remained
> in the official docs. Please have a look at the updated tutorial here:
> http://proj.jquery.com/docs/Tutorials/Basics/
>
> I added your plugin (and Sam's numeric plugin) to the plugin page, so
> everybody can find it: http://proj.jquery.com/docs/Plugins/
>
> -- Jörn
>
>
> _______________________________________________
> jQuery mailing list
> discuss@...
> http://jquery.com/discuss/
>

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[ashutosh bijoor-2]

Great work!
-Ashutosh

On 8/11/06, George Adamson <George.JQuery@...> wrote:

Hi everyone,

I've been working on a Spin Control that uses only a standard textbox.
<input type="text" />
With Javascript enabled the textbox looks and acts like a spin-button
control without adding any extra elements.

http://www.softwareunity.com/sandbox/jqueryspinbtn/

The up/down arrows are achieved using a background image, the rest is
handled by Javascript/JQuery.
I hope it is useful for some of you. I'm also working on a drop down
date-picker that uses similar principles.
(I just don't like solutions that add loads of extra markup!)

Feedback/comments are welcomed, though I won't be able to respond to
requests for help/support, sorry!

George


_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

--
Reach1to1 Communications
http://www.reach1to1.com
bijoor@...
98201-94408
_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[George Adamson]

Calculating the mouse position in relation to the buttons is tricky under certains circimstances. Relatively positioned ancestor elements can upset things, (I had to allow for them explicitly in IE).

Here's a simpler demo here that shows it working in Opera, FF & IE: http://www.softwareunity.com/sandbox/jqueryspinbtn/JQuerySpinBtn.OrigDemo.htm
(same js src as original demo but here the textbox parent elements have no fussy positioning)

The original demo is still here: http://www.softwareunity.com/sandbox/jqueryspinbtn/

Thanks for the feedback, I'll try to upgrade it to a proper plugin and hopefully add min/max limits and arrow key detection etc.

John Resig wrote:

This is a great idea for a plugin - keep up the good work!

> It doesn't work for me in FF1.5.05/IE6.x (no arrows show up)

Works for me in Firefox 2.0 Beta 1, OSX.
However, Safari 2.0 shows no arrows (but if you click, it decreases
the count - only).
And in Opera 9 it also decreases the count only, but does show the arrows.

--John

_______________________________________________
jQuery mailing list
[e-mail]
http://jquery.com/discuss/

[AKB]

I have found a little bug while trying to use it (last version from http://www.softwareunity.com/sandbox/jqueryspinbtn/)

It seems to fail when you set the min value to 0, like this:

var myOptionsHour = { min: 0, max: 23, step: 1 }
$("#someid").SpinButton(myOptionsHour);

Everything works fine, but it allows you to spin to negative values, just doesn't respect the 0 min value.

Seems to be a problem in adjustValue() function... sorry i can't help more, i'm just a newbie to javascript (And English tbh!).

I have "fixed" it for me in the mean time by just passing min as text...

var myOptionsHour = { min: "0", max: 23, step: 1 }
$("#someid").SpinButton(myOptionsHour);

Thanks for this great piece of software !

[Choan Gálvez]

Hi.

On 12/14/06, AKB <info@...> wrote:

>
> I have found a little bug while trying to use it (last version from
> http://www.softwareunity.com/sandbox/jqueryspinbtn/)
>
> It seems to fail when you set the min value to 0, like this:
>
> var myOptionsHour = { min: 0, max: 23, step: 1 }
> $("#someid").SpinButton(myOptionsHour);
>
> Everything works fine, but it allows you to spin to negative values, just
> doesn't respect the 0 min value.

Search for this line:

min: cfg && cfg.min ? Number(cfg.min) : null,

And replace with this:

min: cfg && cfg.min !== null ? Number(cfg.min) : null,

Then, if it worked, notify the plugin author.

--
Choan
<http://choangalvez.nom.es/>

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[Choan Gálvez]

To correct myself:

> Search for this line:
>
> min: cfg && cfg.min ? Number(cfg.min) : null,
>
> And replace with this:
>
> min: cfg && cfg.min !== null ? Number(cfg.min) : null,

Should be:

min: cfg && cfg.min !== undefined ? Number(cfg.min) : null,


--
Choan
<http://choangalvez.nom.es/>

_______________________________________________
jQuery mailing list
discuss@...
http://jquery.com/discuss/

[AKB]

I will try to send another email to the author about this issue, because last two just came rejected

Your mod works like a charm, Big Thank You !