www.webdeveloper.com
Results 1 to 11 of 11

Thread: Mouse key up - action accelarator

  1. #1
    Join Date
    Oct 2011
    Posts
    19

    Mouse key up - action accelarator

    Hi all,

    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.

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    You can always display other buttons (++ or --) or use shift key to increse or decrease the values by 10...

  3. #3
    Join Date
    Oct 2011
    Posts
    19
    Quote Originally Posted by 007Julien View Post
    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..

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    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.
    Last edited by 007Julien; 12-05-2011 at 06:19 AM.

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    A simple script to allow increase or decrease numbers (the class plsMns is enough to transfrm this numbers)...
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>Untitled</title>
    <style type="text/css">
    p {margin:0;}
    .cpt {cursor:pointer;font-weight:bold;padding:0 5px;}
    </style>
    </head>
    <body>
    <p>Ann&#233;e : <span class="plsMns">2011</span></p>
    <p>Mois : <span class="plsMns">11</span></p>
    <p>Jour : <span class="plsMns">5</span></p>
    <script type="text/javascript">
    function addEvent(o,t,f){
    	if (o.addEventListener){o.addEventListener(t,f,false);return true}
    	else if (o.attachEvent){var r=o.attachEvent("on"+t,f);return r}
    }
    var pmsObj={
    	okc:null,pls:null,obj:null,inc:1.0,
    	tmr:function(){var t=pmsObj.obj.innerHTML;
    		pmsObj.obj.innerHTML=t.replace(/[\d-]+/,
    			function(){var a=Number(arguments[0]),b=Math.floor(pmsObj.inc);if (pmsObj.pls) a+=b;else a-=b;return a;});
    		pmsObj.inc=pmsObj.inc*(1.1);
    		if (pmsObj.okc) setTimeout(pmsObj.tmr,100);
    		},
    	mdw:function(e){var t=e.target || window.event.srcElement,n=t;
    		while(n.className!="plsMns" && n.tagName!="BODY" && n.tagName!="HTML") n=n.parentNode;
    		if (n.className!="plsMns") return;
    		pmsObj.inc=1;pmsObj.okc=true;pmsObj.obj=n;
    		pmsObj.pls=t.innerHTML.charCodeAt()==187;
    		setTimeout(pmsObj.tmr,200);
    	},
    	ini:function(){
    	  addEvent(document,'mousedown',this.mdw);
    		addEvent(document,'mouseup',function(){pmsObj.okc=false;});
    		var i,o=document.getElementsByTagName('span'),l=o.length; 
    		i=-1;while (o[++i]) if (o[i].className=="plsMns") { 
    			u=document.createElement('span');p=document.createTextNode(String.fromCharCode(171));
    			u.appendChild(p);u.className='cpt';o[i].insertBefore(u,o[i].firstChild);
    			v=document.createElement('span');m=document.createTextNode(String.fromCharCode(187));
    			v.appendChild(m);v.className='cpt';o[i].appendChild(v);}}
    }			
    pmsObj.ini();
    addEvent(document,'mouseup',function(){pmsObj.okc=false;});
    </script>
    </body>
    </html>

  6. #6
    Join Date
    Nov 2010
    Posts
    86
    Hi, you could have one timer (setTimeout) to test if they've held the mouse down long enough for it to count as a "hold" rather than a "click".

    Then a second, shorter timer to do the continuous changing while they hold the mouse down.

    If they release the mouse, or move it away from the button you can just clear the timer.

    If you wanted you could also decrease the timer as they hold the mouse down longer, so the action speeds up.

    I've made a quick example of this with plus and minus buttons which you can test out here:
    http://pagefabricator.com/?page=continuous_mouse_click

    Here is the code:
    Code:
    <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>

  7. #7
    Join Date
    Oct 2011
    Posts
    19
    Quote Originally Posted by interfacetricks View Post
    Hi, you could have one timer (setTimeout) to test if they've held the mouse down long enough for it to count as a "hold" rather than a "click".

    Then a second, shorter timer to do the continuous changing while they hold the mouse down.

    If they release the mouse, or move it away from the button you can just clear the timer.

    If you wanted you could also decrease the timer as they hold the mouse down longer, so the action speeds up.

    I've made a quick example of this with plus and minus buttons which you can test out here:
    http://pagefabricator.com/?page=continuous_mouse_click

    Here is the code:
    Code:
    <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..

  8. #8
    Join Date
    Oct 2011
    Posts
    19
    I am doing a date controll.. actually I have it..

    Code:
    
    function buildCalControl(id, methodname) 
    {
        var lHtml = "";
        lHtml += "<table cellpadding='3' cellspacing='0' border='0'>";
        lHtml += "<tr>";
        lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;+&nbsp;&nbsp;' name='btnMonthAdd"+ id +"' onclick = changeMonth(true,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;+&nbsp;&nbsp;' name='btnDayAdd"+ id +"' onclick = changeDay(true,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;+&nbsp;&nbsp;' name='btnYearAdd"+ id +"' onclick = changeYear(true,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "</tr>";
        lHtml += "<tr>";
    	lHtml += "<td align='center'><input type='text' class='calctrlMonth' value='"+ lMonthArray[lCurrentDate.getMonth()] +"' readonly name='txtMonthValue"+ id +"' id='txtMonthValue"+ id +"' size='4'></td>";
        lHtml += "<td align='center'><input type='text' class='calctrlDay' value='"+ lCurrentDay +"' readonly name='txtDayValue"+ id +"' id='txtDayValue"+ id +"' size='4'></td>";
    	lHtml += "<td align='center'><input type='text' class='calctrlYear' value='"+ lCurrentYear +"' readonly name='txtYearValue"+ id +"'  id='txtYearValue"+ id +"' size='4'></td>";
    	lHtml += "</tr>";
        lHtml += "<tr>";
        lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;-&nbsp;&nbsp;' name='btnMonthSub"+ id +"' onclick = changeMonth(false,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;-&nbsp;&nbsp;' name='btnDaySub"+ id +"'  onclick = changeDay(false,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;-&nbsp;&nbsp;' name='btnYearSub"+ id +"' onclick = changeYear(false,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "</tr>";	
        lHtml += "</table>";
        
    	return lHtml;
    }




    Now my function is below..


    Code:
    
    function changeYear(up, id, methodname)
    {
    	var lValue = parseInt(getValue("txtYearValue" + id));
    
    	if(up)
    	{
    		document.getElementById("txtYearValue" + id).value = (lValue+1);
    	}
    	else
    	{
    		document.getElementById("txtYearValue" + id).value = (lValue-1);	
    	}
    	
    	if(methodname!=null)
    	{
    		eval(methodname+"(id)");
    	}
    
    }




    You can have a look at the full code.


    Code:
    var lMonthArray = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
    var lCurrentDate = new Date();
    var lCurrentDay = formatDay(lCurrentDate.getDay());
    var lCurrentMonth = lCurrentDate.getMonth();
    var lCurrentYear = lCurrentDate.getFullYear();
    
    function buildCalControl(id, methodname) 
    {
        var lHtml = "";
        lHtml += "<table cellpadding='3' cellspacing='0' border='0'>";
        lHtml += "<tr>";
        lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;+&nbsp;&nbsp;' name='btnMonthAdd"+ id +"' onclick = changeMonth(true,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;+&nbsp;&nbsp;' name='btnDayAdd"+ id +"' onclick = changeDay(true,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;+&nbsp;&nbsp;' name='btnYearAdd"+ id +"' onclick = changeYear(true,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "</tr>";
        lHtml += "<tr>";
    	lHtml += "<td align='center'><input type='text' class='calctrlMonth' value='"+ lMonthArray[lCurrentDate.getMonth()] +"' readonly name='txtMonthValue"+ id +"' id='txtMonthValue"+ id +"' size='4'></td>";
        lHtml += "<td align='center'><input type='text' class='calctrlDay' value='"+ lCurrentDay +"' readonly name='txtDayValue"+ id +"' id='txtDayValue"+ id +"' size='4'></td>";
    	lHtml += "<td align='center'><input type='text' class='calctrlYear' value='"+ lCurrentYear +"' readonly name='txtYearValue"+ id +"'  id='txtYearValue"+ id +"' size='4'></td>";
    	lHtml += "</tr>";
        lHtml += "<tr>";
        lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;-&nbsp;&nbsp;' name='btnMonthSub"+ id +"' onclick = changeMonth(false,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;-&nbsp;&nbsp;' name='btnDaySub"+ id +"'  onclick = changeDay(false,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "<td align='center'><input type='button' value='&nbsp;&nbsp;-&nbsp;&nbsp;' name='btnYearSub"+ id +"' onclick = changeYear(false,'"+ id +"','"+ methodname +"')></td>";
    	lHtml += "</tr>";	
        lHtml += "</table>";
        
    	return lHtml;
    }
    
    function getMonthIndex(monthVal)
    {
    	for(var i= 0; i < lMonthArray.length; i++)
    	{
    		if(lMonthArray[i] == monthVal)
    		{
    			return i;
    		}
    	}
    }
    
    
    function changeMonth(up, id, methodname)
    {
    	var lMonthIndex = getMonthIndex(getValue("txtMonthValue" + id));
    	var lValue = parseInt(getValue("txtDayValue" + id));
    	
    	if(up)
    	{
    		if(lMonthIndex < 11)
    		{
    			document.getElementById("txtMonthValue" + id).value = lMonthArray[lMonthIndex+1];
    			
    			if(!isDateValid(id))
    			{
    				document.getElementById("txtDayValue" + id).value = "1";
    			}
    		}
    	}
    	else
    	{
    		if(lMonthIndex > 0)
    		{
    			document.getElementById("txtMonthValue" + id).value = lMonthArray[lMonthIndex-1];
    			
    			if(!isDateValid(id))
    			{
    				document.getElementById("txtDayValue" + id).value = "1";
    			}
    		}	
    	}
    	
    	if(methodname!=null)
    	{
    		eval(methodname+"(id)");
    	}
    }
    
    
    function changeDay(up, id, methodname)
    {
    	var lValue = parseInt(getValue("txtDayValue" + id));
    
    	if(up)
    	{
    		if(incrementDate(id, lValue))
    		{
    			document.getElementById("txtDayValue" + id).value = formatDay(lValue+1);
    		}
    	}
    	else
    	{
    		if(lValue > 1)
    		{
    			document.getElementById("txtDayValue" + id).value = formatDay(lValue-1);	
    		}
    	}
    	
    	if(methodname!=null)
    	{
    		eval(methodname+"(id)");
    	}
    
    }
    
    function changeYear(up, id, methodname)
    {
    	var lValue = parseInt(getValue("txtYearValue" + id));
    
    	if(up)
    	{
    		document.getElementById("txtYearValue" + id).value = (lValue+1);
    	}
    	else
    	{
    		document.getElementById("txtYearValue" + id).value = (lValue-1);	
    	}
    	
    	if(methodname!=null)
    	{
    		eval(methodname+"(id)");
    	}
    
    }
    
    function formatDay(day)
    {
    	return day;
    }
    
    function incrementDate(id, val)
    {
    	var lMonth = getValue("txtMonthValue" + id);
    	var lYear = parseInt(getValue("txtYearValue" + id));
    	var lDay = val;
    	var lMaxVal = 0;
    	if(lMonth == "Jan" || lMonth == "Mar" || lMonth == "May" || lMonth == "Jul" || lMonth == "Aug" || lMonth == "Oct" || lMonth == "Dec")
    	{
    		lMaxVal = 31;
    	}
    	else if(lMonth == "Apr" || lMonth == "Jun" || lMonth == "Sep" || lMonth == "Nov")
    	{
    		lMaxVal = 30;			
    	}
    	else if(lMonth == "Feb")
    	{
    		if(lYear %4 == 0 || lYear %400 == 0  || lYear %100 == 0)
    		{
    			lMaxVal = 29;		
    		}
    		else
    		{
    			lMaxVal = 28;			
    		}		
    	}
    	
    	if(val < lMaxVal)
    	{
    		return true;
    	}	
    	else
    	{
    		return false;
    	}	
    }
    
    function isDateValid(id)
    {
    	var lMonth = getValue("txtMonthValue" + id);
    	var lYear = parseInt(getValue("txtYearValue" + id));
    	var lDay = parseInt(getValue("txtDayValue" + id));;
    	
    	var lMaxVal = 0;
    	
    	if(lMonth == "Jan" || lMonth == "Mar" || lMonth == "May" || lMonth == "Jul" || lMonth == "Aug" || lMonth == "Oct" || lMonth == "Dec")
    	{
    		lMaxVal = 31;
    	}
    	else if(lMonth == "Apr" || lMonth == "Jun" || lMonth == "Sep" || lMonth == "Nov")
    	{
    		lMaxVal = 30;			
    	}
    	else if(lMonth == "Feb")
    	{
    		if(lYear %4 == 0 || lYear %400 == 0  || lYear %100 == 0)
    		{
    			lMaxVal = 29;		
    		}
    		else
    		{
    			lMaxVal = 28;			
    		}		
    	}
    		
    	if(lDay <= lMaxVal)
    	{
    		return true;
    	}	
    	else
    	{
    		return false;
    	}	
    }


    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.

  9. #9
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    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 !
    Last edited by 007Julien; 12-06-2011 at 10:02 AM.

  10. #10
    Join Date
    Nov 2010
    Posts
    86
    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.

  11. #11
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,276
    How do you change the year on 29 February 2012 ?
    An other method is to used a datepicker with jQuery or without like on this page to translate...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles