Hi,
I can see what you mean by creating a couple of vaiables and call them one the highest nubmer and one the lowest number and the state if number entered in spinner is lower that the minimum from the variable then go back to minimum value and same with maximum value but how does it know which spinner it is referring to, to sort out this problem. That is the only problem I can see.
Below is current code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
.spinner {
clear: both;
width: 30px;
height:20px;
}
.spinner textarea {
overflow: hidden;
resize:none;
font-size:18px;
font-weight:bold;
}
.scrollBtn {
clear: both;
float: right;
}
</style>
<script type="text/javascript">
function Spinner(elem,min, max){
this.elem = elem;
this.elem.value = min;
this.min = min;
this.max = max;
this.timer;
this.speed = 150; //milliseconds between scroll values
var selfO = this;
this.elem.onkeyup = function(){
var regex = /^[0-9]*$/;
if(!regex.test(selfO.elem.value)){
selfO.elem.value = selfO.elem.value.substring(0,selfO.elem.value.length-1);
return;
}
selfO.validateValue();
}
this.validateValue = function(){
if(Number(selfO.elem.value) > selfO.max) {selfO.elem.value = selfO.max;}
if(Number(selfO.elem.value) < selfO.min) {selfO.elem.value = selfO.min;}
}
this.stopSpinning = function(){
clearTimeout(selfO.timer);
}
this.spinValue = function(dir){
selfO.elem.value = Number(selfO.elem.value) + dir;
selfO.validateValue();
selfO.timer = setTimeout(function(){selfO.spinValue(dir);},selfO.speed);
}
}
window.onload=function(){
//create the Spinner objects
var SpinnerHours = new Spinner(document.getElementById('txtHours'),0,23);
var SpinnerMins = new Spinner(document.getElementById('txtMins'),0,59);
var SpinnerSecs = new Spinner(document.getElementById('txtSecs'),0,59);
//assign the scoll buttons' events
var btnHoursUpO = document.getElementById('btnHoursUp');
btnHoursUpO.onmousedown = function(){SpinnerHours.spinValue(1);}
btnHoursUpO.onmouseup = function(){SpinnerHours.stopSpinning();}
var btnHoursDownO = document.getElementById('btnHoursDown');
btnHoursDownO.onmousedown = function(){SpinnerHours.spinValue(-1);}
btnHoursDownO.onmouseup = function(){SpinnerHours.stopSpinning();}
var btnMinsUpO = document.getElementById('btnMinsUp');
btnMinsUpO.onmousedown = function(){SpinnerMins.spinValue(1);}
btnMinsUpO.onmouseup = function(){SpinnerMins.stopSpinning();}
var btnMinsDownO = document.getElementById('btnMinsDown');
btnMinsDownO.onmousedown = function(){SpinnerMins.spinValue(-1);}
btnMinsDownO.onmouseup = function(){SpinnerMins.stopSpinning();}
var btnSecsUpO = document.getElementById('btnSecsUp');
btnSecsUpO.onmousedown = function(){SpinnerSecs.spinValue(1);}
btnSecsUpO.onmouseup = function(){SpinnerSecs.stopSpinning();}
var btnSecsDownO = document.getElementById('btnSecsDown');
btnSecsDownO.onmousedown = function(){SpinnerSecs.spinValue(-1);}
btnSecsDownO.onmouseup = function(){SpinnerSecs.stopSpinning();}
var scrollBtnO = document.getElementsByClassName('scrollBtn');
for(i=0; i < scrollBtnO.length; i++){
scrollBtnO[i].onclick = function(){return false;}
}
}
</script>
</head>
<body>
<form action="" method="post">
<p>
Hold down the left mouse key on either the up or down arrow to scroll values up or down<br />
or enter a number directly in the box.
</p>
<table>
<tr>
<td>Hrs</td>
<td class="spinner"><textarea class="spinner" name="txtHours" id="txtHours" cols="2" rows="1"></textarea></td>
<td><button class="scrollBtn" id="btnHoursUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnHoursDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
<td>Mins</td>
<td class="spinner"><textarea class="spinner" name="txtmins" id="txtMins" cols="2" rows="1"></textarea></td>
<td><button class="scrollBtn" id="btnMinsUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnMinsDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
<td>Secs</td>
<td class="spinner"><textarea class="spinner" name="txtsecs" id="txtSecs" cols="2" rows="1"></textarea></td>
<td><button class="scrollBtn" id="btnSecsUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnSecsDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
</tr>
</table>
</form>
</body>
</html>
Reply With Quote
. I wasn't having a go at you.
Originally Posted by manleybruce
Bookmarks