Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Event Continues on Mouse Down 1

Status
Not open for further replies.
WebRic

WebRic

Technical User
Joined
Sep 21, 2004
Messages
95
Location
GB
Hi,

I've a pretty simple piece of code that adds or subtracts the number in a field when when a user clicks up (it adds) and click down (it subtracts).

This is all simple enough but I got to thinking that it would be nice if the event continues to happen when the user the mouse holds down.

Ideally there would be an initial movement of add/subtract that would have perhaps a 1.5 second pause simulating a click. It would then add(or subtract) continually at a reasonable rate i.e. you could just about stop it on the right number.

I'm guessing it would be something along the lines on onMousedown event starts and continues till onMouseUp, however, this is all very new territory for me so I'm not very sure about this at all.

The code so far is as follows
Code: 
<html>
<head>
<title>Add subtract value</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
function addOne(){
					var valField = document.forms[0].elements["selectionNumb"].value;
					var newvalField = parseFloat(valField) + 1;
					if (newvalField < 10) {
					document.forms[0].elements["selectionNumb"].value = newvalField;
					}
				}	

function reduceOne(){
					var valField = document.forms[0].elements["selectionNumb"].value;
					var newvalField = parseFloat(valField) - 1;
					if (newvalField > -1) {
					document.forms[0].elements["selectionNumb"].value = newvalField;
					}
				}	


</script>
</head>

<body>
<form name="form1" method="post" action="">
  <input name="selectionNumb" id="selectionNumb" type="text" value="0" size="3" maxlength="3" />
  <a href="#" onMouseDown="addOne()">up</a> | <a href="#" onMouseDown="reduceOne()">Down</a> 
</form>
</body>
</html>

Any help would be much appreciated.


Richard
 
Sort by date Sort by votes
Interesting little problem...

Try this for size:
Code: 
<html>
<head>
<title>Add subtract value</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="JavaScript" type="text/JavaScript">
var myHndl = null;
var initialDelay = 750; // milliseconds until auto repeat starts
var autoRepeatDelay = 150; // milliseconds between auto repeat steps

function addOne(){
	var valField = document.forms[0].elements["selectionNumb"].value;
	var newvalField = parseFloat(valField) + 1;
	if (newvalField < 10) {
		document.forms[0].elements["selectionNumb"].value = newvalField;
	}
	if (newvalField >= 10 && myHndl != null) clearInterval(myHndl);
	if (myHndl == null) setTimeout("myHndl=setInterval('addOne()'," + autoRepeatDelay + ");",initialDelay);
}

function reduceOne(){
	var valField = document.forms[0].elements["selectionNumb"].value;
	var newvalField = parseFloat(valField) - 1;
	if (newvalField > -1) {
		document.forms[0].elements["selectionNumb"].value = newvalField;
	}
	if (newvalField <= -1 && myHndl != null) clearInterval(myHndl);
	if (myHndl == null) setTimeout("myHndl=setInterval('reduceOne()'," + autoRepeatDelay + ");",initialDelay);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
  <input name="selectionNumb" id="selectionNumb" type="text" value="0" size="3" maxlength="3" />
  <a href="#" onMouseDown="addOne();" onMouseUp="clearInterval(myHndl);myHndl=null;">up</a> | <a href="#" onMouseDown="reduceOne()" onMouseUp="clearInterval(myHndl);myHndl=null;">Down</a>
</form>
</body>
</html>
I have attempted to keep as much of your code as possible... and merely added an onmouseup event to both links and several lines to each function.

There are two variables that allow you to alter the delays between the initial click and the auto increase/decrease functionality.

I've tested it in FF and IE6 for Windows and have no problems. If you have any questions... fire away!

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
That's excellent!

R
 
Upvote 0 Downvote
Not a huge problem but I have noticed a minor flaw. If a quick click is placed on one of the links on release of the mouse the event continues.... Any ideas on a solution?


Richard
 
Upvote 0 Downvote
Hmmm... one small change will fix this for you. I have bolded the addition (one change to each function):
Code: 
if (myHndl == null) [b]myHndl=[/b]setTimeout("myHndl=setInterval('addOne()'," + autoRepeatDelay + ");",initialDelay);
...
if (myHndl == null) [b]myHndl=[/b]setTimeout("myHndl=setInterval('reduceOne()'," + autoRepeatDelay + ");",initialDelay);
I should have spotted that [smile]

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch
[/tt]

What is Javascript? FAQ216-6094
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
nanbread
  • Locked
  • Question Question
Sweeping drop-down menus
Replies
0
Views
880
nanbread
nanbread
rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
916
rogerte
rogerte
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
952
JScannell
JScannell
Ahmad khalafalla
  • Locked
  • Question Question
How to listen to 'onclick' event on the document
Replies
1
Views
490
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top