Repeating spinners

[Mark Rae]

Hi,

Not even sure if this is the right group for this, but here goes...

My client has asked me to come up with a "spinner" control which works with
the mouse so that the value in the associated textbox continues to change
until the mouse is released. I.e., for clarification:

1) A textbox contains the value 2006

2) The user clicks on a button (or whatever) and keeps the mouse button
pressed

3) The value in the textbox become 2007, then 2008, then 2009 etc

4) The user releases the mouse button

5) The value in the textbox stops incrementing / decrementing.

Given that this will clearly have to be done client-side, I began to
investigate the onmousedown and onmouseup events of standard HTML buttons.
So far, I've come up with this:

<script>

var blnSpinning;

function startSpinning(pstrTarget, pintJump)
{
var objTarget = document.getElementById(pstrTarget);
blnSpinning = true;

while(blnSpinning)
{
objTarget.value = parseInt(objTarget.value) + parseInt(pintJump);
}
}

function stopSpinning()
{
blnSpinning = false;
}
</script>

<input type=button id=cmdUp onmousedown="startSpinning('txtYear', -1);"
onmouseup="stopSpinning();" value="Up">


So far I'm enountering two problems:

1) Whereas the startSpinning code certainly increments / decrements the
value in the txtYear textbox (verified by running it in debug mode and
stepping through it), it does not refresh / repaint the screen each time.

2) The onmouseup event doesn't appear to fire, which means the browser gets
stuck in an interminable loop.

I've done a Google search and, whereas there are tons of examples of
JavaScript spinner controls, none of them seems to support repeated
spinning. I'm beginning to wonder if this functionality is even possible
natively in a browser, or whether a Java applet or somesuch would be
required...

Any assistance gratefully received.

Mark

 

[Hans Kesting]

Hi,

Not even sure if this is the right group for this, but here goes...

My client has asked me to come up with a "spinner" control which works with
the mouse so that the value in the associated textbox continues to change
until the mouse is released. I.e., for clarification:

1) A textbox contains the value 2006

2) The user clicks on a button (or whatever) and keeps the mouse button
pressed

3) The value in the textbox become 2007, then 2008, then 2009 etc

4) The user releases the mouse button

5) The value in the textbox stops incrementing / decrementing.

Given that this will clearly have to be done client-side, I began to
investigate the onmousedown and onmouseup events of standard HTML buttons. So
far, I've come up with this:

<script>

var blnSpinning;

function startSpinning(pstrTarget, pintJump)
{
var objTarget = document.getElementById(pstrTarget);
blnSpinning = true;

while(blnSpinning)
{
objTarget.value = parseInt(objTarget.value) + parseInt(pintJump);
}
}

function stopSpinning()
{
blnSpinning = false;
}
</script>

<input type=button id=cmdUp onmousedown="startSpinning('txtYear', -1);"
onmouseup="stopSpinning();" value="Up">

So far I'm enountering two problems:

1) Whereas the startSpinning code certainly increments / decrements the value
in the txtYear textbox (verified by running it in debug mode and stepping
through it), it does not refresh / repaint the screen each time.

2) The onmouseup event doesn't appear to fire, which means the browser gets
stuck in an interminable loop.

I've done a Google search and, whereas there are tons of examples of
JavaScript spinner controls, none of them seems to support repeated spinning.
I'm beginning to wonder if this functionality is even possible natively in a
browser, or whether a Java applet or somesuch would be required...

Any assistance gratefully received.

Mark

Your mouseup doesn't fire *because* you are in an infinite loop (I
think).

You might be able to do it, using a separate function for the
incrementing.
In the mousedown function use setInterval (or something like that) to
start a separate function every 0.5 seconds (or so). In that function
increment the value *once* for every time it is called.
In the mouseup function, cancel the interval. IIRC the setInterval
returns a value that you can use to cancel it later.

Hans Kesting

 

[Mark Rae]

Hans,

Your mouseup doesn't fire *because* you are in an infinite loop (I think).

I think you're right...

You might be able to do it, using a separate function for the
incrementing.
In the mousedown function use setInterval (or something like that) to
start a separate function every 0.5 seconds (or so). In that function
increment the value *once* for every time it is called.
In the mouseup function, cancel the interval. IIRC the setInterval returns
a value that you can use to cancel it later.

I'll give that a try - thanks.

Mark

 

[Mark Rae]

In the mousedown function use setInterval (or something like that) to

Got it working - setInterval is indeed the way to do it, and the associated
clearInterval function.

This site proved extremely helpful:
http://www.htmlgoodies.com/primers/jsp/article.php/3598531