I m just a starter of js. So please try to make replys simple to understand. Here is my doubt.
I have a date controll.. ie dd/mm/yyyy and for each i have + and - buttons. On clicking + the value increses by 1 now. So for large changes.. like if i want to change 2011 to 1955 i want to click lot of times. I need a function to controll that.. When i click and hold the button i need the +/- button to be increased in exponential manner. For single clicks i need to increase 1 by 1. Can any one help me.. Is any timer required for that? Thanks in adv.
You can always display other buttons (++ or --) or use shift key to increse or decrease the values by 10...
But that is not suitable for my purposes.. I need some increment on holding mouse click.. I think some method can do that.. by setting some timer on that.. But dont know how to do..
Then you have to work with onmousedown and onmouseup to build a timer like this prototype, witch give the click duration in milliseconds...
Code:
<body>
<input type="button" value="Click me !" onmousedown="dwn()" onmouseup="dup()">
<script type="text/javascript">
var tmr;
function dwn(){tmr=-(new Date().getTime());}
function dup(){tmr+=new Date().getTime();alert(tmr)}
</script>
</body>
It could be better to call a function with the onmousedown event to increase (or decrease) the year all the tenth of seconds (with a setTimeout) and to stop it with the onmouseup event, like this
Code:
<body>
<input type="button" value="Click me !" onmousedown="dwn()" onmouseup="dup()">
<p> Timer <span id="stm"></span></p>
<script type="text/javascript">
var ths,sto;// global variables
function dwn(){ths=0;setTimeout(tmr,100);}
function tmr() {ths++;sto=setTimeout(tmr,100);
// to replace with the function witch increase the year
document.getElementById('stm').innerHTML=ths;}
function dup(){clearTimeout(sto);}
</script>
</body>
Then it could be better to build an unique object to gather all these pieces...
EDIT : you can use the same function to increase or decrease the year with an argument (true or false) for the function dwn.
<input id='counter' value='0'>
<button onmousedown='start_counter_change(-1)' onmouseup='clearTimeout(timer)'
onmouseout='clearTimeout(timer)'>-</button>
<button onmousedown='start_counter_change(1)' onmouseout='clearTimeout(timer)'
onmouseup='clearTimeout(timer)'>+</button>
<script>
var counter_box = document.getElementById('counter');
var timer = false;
// how fast should the continuous change operate to start with
// (in milliseconds)
var starting_action_delay = 50;
var action_delay = starting_action_delay;
// This function applies changes to the counter value
function change_counter(difference)
{
// Get the current value
var value = parseInt(counter_box.value);
// If it's not a number, set it to zero.
if (isNaN(value)) value = 0;
// Increase by one.
counter_box.value = value + difference;
}
// This function changes the value once, then sets a timer
// to start changing the value continuously, in half a second,
// if the user keeps the mouse button down.
function start_counter_change(difference)
{
change_counter(difference);
// Set the starting rate for continuous actions.
action_delay = starting_action_delay;
timer = setTimeout(function(){continuous_change(difference);}, 500);
}
// This function, once started, will change the counter value
// repeatedly at an increasing rate until you release the mouse
// button or move it away.
function continuous_change(difference)
{
change_counter(difference);
// Decrease the delay each time, to a minimum of 20 milliseconds.
if (action_delay > 20) action_delay -= 1;
timer = setTimeout(function(){continuous_change(difference);}, action_delay);
}
</script>
<input id='counter' value='0'>
<button onmousedown='start_counter_change(-1)' onmouseup='clearTimeout(timer)'
onmouseout='clearTimeout(timer)'>-</button>
<button onmousedown='start_counter_change(1)' onmouseout='clearTimeout(timer)'
onmouseup='clearTimeout(timer)'>+</button>
<script>
var counter_box = document.getElementById('counter');
var timer = false;
// how fast should the continuous change operate to start with
// (in milliseconds)
var starting_action_delay = 50;
var action_delay = starting_action_delay;
// This function applies changes to the counter value
function change_counter(difference)
{
// Get the current value
var value = parseInt(counter_box.value);
// If it's not a number, set it to zero.
if (isNaN(value)) value = 0;
// Increase by one.
counter_box.value = value + difference;
}
// This function changes the value once, then sets a timer
// to start changing the value continuously, in half a second,
// if the user keeps the mouse button down.
function start_counter_change(difference)
{
change_counter(difference);
// Set the starting rate for continuous actions.
action_delay = starting_action_delay;
timer = setTimeout(function(){continuous_change(difference);}, 500);
}
// This function, once started, will change the counter value
// repeatedly at an increasing rate until you release the mouse
// button or move it away.
function continuous_change(difference)
{
change_counter(difference);
// Decrease the delay each time, to a minimum of 20 milliseconds.
if (action_delay > 20) action_delay -= 1;
timer = setTimeout(function(){continuous_change(difference);}, action_delay);
}
</script>
This is what I was looking for... I got the idea.. But I still feels difficulty in implementing it in my code. Can you help me out. I ll make it in detail below..
I tried implementing that in this code. But I couldn do that.. Can you help me.. An example with incrementing Year is enough. I couldnt update the function properly ,so got many errors when i tried.
Your have to change your event onclick with to events : onmousedown (to start increase or decrease function with a setTimeout, witch allows, with script pauses, to display the changing years) and onmouseup (to stop it).
Your code could be shorter :
1/ - With an object for monthIndex
Code:
var monthIndex={}
for(var i= 0; i < lMonthArray.length; i++) monthIndex[lMonthArray[i]]=i;
// This object give immediatly the index with a monthIndex[monthVal] !
2/ - With the Date object to determine the last day of a month, like for example
Code:
function isDateValid(id)
{
var lMonth = monthIndex(getValue("txtMonthValue" + id));
var lYear = parseInt(getValue("txtYearValue" + id));
var lDay = parseInt(getValue("txtDayValue" + id));;
var lMaxVal = new Date(lYear,lMonth+1,0).getDate();
return lDay <= lMaxVal;
}
The last day of the month is, with javascript Date, the day 0 of the following month !
In fact, a date is valid when the var dt = new Date(lYear,lMonth,lDay) give, with td.getFullYear(), td.getMonth() and td.getDate(), the same values as lYear, lMonth, lDay !
As 007Julien pointed out, you'll need to change your button events from using onclick to using onmousedown and onmouseup. Onmousedown calls a function (you'll have to create this new function) which first calls your existing value-changing function (e.g. changeYear), then starts the timer.
If the timer completes, it should call another (new) function which also calls the value-changing function, and then resets the timer (but for a shorter time).
onmouseup on all of the buttons should clear the timer.
Can you explain (and show code for) what you did when trying to apply this approach to your code and where you ran into problems. Or if you have any questions about how the technique works, please let me know and I will try to clarify it further.
Reply With Quote
Originally Posted by 007Julien
Bookmarks