- Thank you received: 9
Share your coding samples or ask questions
Question JavaScript time picker with auto increment while mouse down
13 years 5 months ago - 9 years 2 months ago #33
by roller
JavaScript time picker with auto increment while mouse down
If you want a simple time picker that auto increments while the mouse is held down then this one is for you. Incrementing a text box on an HTML page using JavaScript is simple enough but making it auto increment while you hold the mouse down requires few more lines of code.
I will go thru this entire tutorial with you step by step, first create a HTML document like this:
<html>
<head>
</head>
<body>
</body>
</html>
Next add the below JavaScript between the head tags:
<script language="javascript">
function timePicker(myTxt, inc, max, min, s) {
if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) inc};
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
var callbackFunction = function() {
if(mouseDown==1){if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
window.setTimeout(callbackFunction, 250);
}
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
}
window.setTimeout(callbackFunction, 1000);
}
var mouseDown = 0;
document.onmousedown = function() {
mouseDown = 1;
}
document.onmouseup = function() {
mouseDown = 0;
}
</script>
The above JavaScript contain a main function that does most of the work and two other functions that keep track of the mouse down and mouse up states.
Now add a textbox and a + and – letters and assign their onmousedown event to our JavaScript function timePicker() like this:
<input type="text" name="hour" value="12" >
<font onmousedown="timePicker(myform.hour,1,23,0, '-')" unselectable="on" size="5px">-</font>
The timePicker function takes 5 arguments, function timePicker(myTxt, inc, max, min, s). myTxt a reference to the text box name, inc is the increment, max and min are the counter top and bottom limit and s for sign + or -.
Now the best way to see the entire example working is to copy the entire HTML page below and run it in a browser, the below page has some additional stuff like a table layout and some styling:
<html>
<head>
<!-- written by Edgar Badawy fracta.net -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Javascript Time Picker auto increment while mousedown</title>
<script language="javascript">
function timePicker(myTxt, inc, max, min, s) {
if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
var callbackFunction = function() {
if(mouseDown==1){if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
window.setTimeout(callbackFunction, 250);
}
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
}
window.setTimeout(callbackFunction, 1000);
}
var mouseDown = 0;
document.onmousedown = function() {
mouseDown = 1;
}
document.onmouseup = function() {
mouseDown = 0;
}
</script>
</head>
<body>
<style type="text/css">
.txt{
margin-bottom:40px; width: 50px; height: 50px; font-size:40px; color:#00ff00; vertical-align:middle; font-weight:bold;
}
.tbl{
background-color:#a0a0a0; height: 20px; width: 10px; border:1px solid #000000;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="1129" height="306">
<tr>
<td valign="top">
</td>
<td valign="top" height="42">
Javascript Time Picker written by<a href=" fracta.net "> Edgar Badawy fracta.net
</tr>
<tr>
<td valign="top" width="194">
</td>
<td valign="top" height="264" width="935">
<form name="myform" method="POST" action=""
<br>
Select time - 1 minute increments - auto increment while mouse is down
<br>
<input class="txt" type="text" name="hour" value="12" >
<table style="display:inline; margin-right:20px"; cellspacing="0" cellpadding="0">
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.hour,1,23,0, '+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.hour,1,23,0, '-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<input class="txt" type="text" name="minutes" value="0" size="2" >
<table style="display:inline;" cellspacing="0" cellpadding="0">
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.minutes,1,59,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.minutes,1,59,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<br>
<br>
Select time - 15 minutes increments - auto increment while mouse is down
<br>
<input class="txt" type="text" name="hour2" value="12" size="2" >
<table style="display:inline; background-color:#cfcfcf; margin-bottom:-5px; margin-right:20px" cellspacing="0" cellpadding="0">
<!-- MSTableType="nolayout" -->
<tr>
<td class="tbl" ><font onmousedown="timePicker(myform.hour2,1,23,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl" ><font onmousedown="timePicker(myform.hour2,1,23,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<input class="txt" type="text" name="minutes2" value="0" size="2" >
<table style="display:inline; background-color:#cfcfcf; margin-bottom:-5px" cellspacing="0" cellpadding="0">
<!-- MSTableType="nolayout" -->
<tr>
<td class="tbl"> <font onmousedown="timePicker(myform.minutes2,15,45,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"> <font onmousedown="timePicker(myform.minutes2,15,45,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</body>
</html>
The above code will display two time pickers, the first demonstrates the time picker with 1 minute Increments and the second with 15 minutes Increments.
The time picker will wait 1 second with the mouse pressed down before starting to auto increment.
To view a working demo click here
If you want a simple time picker that auto increments while the mouse is held down then this one is for you. Incrementing a text box on an HTML page using JavaScript is simple enough but making it auto increment while you hold the mouse down requires few more lines of code.
I will go thru this entire tutorial with you step by step, first create a HTML document like this:
<html>
<head>
</head>
<body>
</body>
</html>
Next add the below JavaScript between the head tags:
<script language="javascript">
function timePicker(myTxt, inc, max, min, s) {
if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) inc};
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
var callbackFunction = function() {
if(mouseDown==1){if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
window.setTimeout(callbackFunction, 250);
}
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
}
window.setTimeout(callbackFunction, 1000);
}
var mouseDown = 0;
document.onmousedown = function() {
mouseDown = 1;
}
document.onmouseup = function() {
mouseDown = 0;
}
</script>
The above JavaScript contain a main function that does most of the work and two other functions that keep track of the mouse down and mouse up states.
Now add a textbox and a + and – letters and assign their onmousedown event to our JavaScript function timePicker() like this:
<input type="text" name="hour" value="12" >
<font onmousedown="timePicker(myform.hour,1,23,0, '-')" unselectable="on" size="5px">-</font>
The timePicker function takes 5 arguments, function timePicker(myTxt, inc, max, min, s). myTxt a reference to the text box name, inc is the increment, max and min are the counter top and bottom limit and s for sign + or -.
Now the best way to see the entire example working is to copy the entire HTML page below and run it in a browser, the below page has some additional stuff like a table layout and some styling:
<html>
<head>
<!-- written by Edgar Badawy fracta.net -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Javascript Time Picker auto increment while mousedown</title>
<script language="javascript">
function timePicker(myTxt, inc, max, min, s) {
if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
var callbackFunction = function() {
if(mouseDown==1){if (s == "+"){myTxt.value = parseInt(myTxt.value) + inc} else {myTxt.value = parseInt(myTxt.value) - inc};
window.setTimeout(callbackFunction, 250);
}
if (myTxt.value == max+inc) {myTxt.value = min} else if (myTxt.value == min-inc) {myTxt.value = max};
}
window.setTimeout(callbackFunction, 1000);
}
var mouseDown = 0;
document.onmousedown = function() {
mouseDown = 1;
}
document.onmouseup = function() {
mouseDown = 0;
}
</script>
</head>
<body>
<style type="text/css">
.txt{
margin-bottom:40px; width: 50px; height: 50px; font-size:40px; color:#00ff00; vertical-align:middle; font-weight:bold;
}
.tbl{
background-color:#a0a0a0; height: 20px; width: 10px; border:1px solid #000000;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="1129" height="306">
<tr>
<td valign="top">
</td>
<td valign="top" height="42">
Javascript Time Picker written by<a href=" fracta.net "> Edgar Badawy fracta.net
</tr>
<tr>
<td valign="top" width="194">
</td>
<td valign="top" height="264" width="935">
<form name="myform" method="POST" action=""
<br>
Select time - 1 minute increments - auto increment while mouse is down
<br>
<input class="txt" type="text" name="hour" value="12" >
<table style="display:inline; margin-right:20px"; cellspacing="0" cellpadding="0">
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.hour,1,23,0, '+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.hour,1,23,0, '-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<input class="txt" type="text" name="minutes" value="0" size="2" >
<table style="display:inline;" cellspacing="0" cellpadding="0">
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.minutes,1,59,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"><font onmousedown="timePicker(myform.minutes,1,59,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<br>
<br>
Select time - 15 minutes increments - auto increment while mouse is down
<br>
<input class="txt" type="text" name="hour2" value="12" size="2" >
<table style="display:inline; background-color:#cfcfcf; margin-bottom:-5px; margin-right:20px" cellspacing="0" cellpadding="0">
<!-- MSTableType="nolayout" -->
<tr>
<td class="tbl" ><font onmousedown="timePicker(myform.hour2,1,23,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl" ><font onmousedown="timePicker(myform.hour2,1,23,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<input class="txt" type="text" name="minutes2" value="0" size="2" >
<table style="display:inline; background-color:#cfcfcf; margin-bottom:-5px" cellspacing="0" cellpadding="0">
<!-- MSTableType="nolayout" -->
<tr>
<td class="tbl"> <font onmousedown="timePicker(myform.minutes2,15,45,0,'+')" unselectable="on" size="5px">+</font></td>
</tr>
<tr>
<td class="tbl"> <font onmousedown="timePicker(myform.minutes2,15,45,0,'-')" unselectable="on" size="5px">-</font></td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</body>
</html>
The above code will display two time pickers, the first demonstrates the time picker with 1 minute Increments and the second with 15 minutes Increments.
The time picker will wait 1 second with the mouse pressed down before starting to auto increment.
To view a working demo click here
Last edit: 9 years 2 months ago by roller.
Please Log in or Create an account to join the conversation.
Time to create page: 0.713 seconds