0

Hi Friends i am very very new to javascript and and J Query . now i want to create virtual mouse pad . i am created two div's one for mouse pad and second one is container in container i am taken another div for act as a cursor(class name is follower) . in mouse pad div when ever mouse move follower div moving relative to the mouse position. now i want to generate click event using virtual cursor means click the buttons using follower. Button1 Button2 MousePad

this is my js code 

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$('.container1').mousemove(function(e){
  var offset = $('.container1').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
    mouseX=mouseX*3;
    mouseY=mouseY*3;
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp);
    yp += (mouseY - yp) ;
    follower.css({left:xp, top:yp});

    }, 30);
$('.buttons span').bind('click',function(){
    alert($(this).attr('title'));  

  });

JSbin Link

http://jsbin.com/AGAquhej/2/edit for code

http://jsbin.com/AGAquhej/1 Demo

i want generate click event using follower(moving in mouse pad) can any one solve the problem how to generate fake click events

Thanks in advance

Sarath Babu Nuthimadugu
  • 871
  • 2
  • 9
  • 21

1 Answers1

1

Using the some collision detection code from this SO answer https://stackoverflow.com/a/12180865/1481489 the following may work (untested, description is in the comments):

var overlaps = (function () { // this is the collision detection code
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

$('.container1').mousemove(function(e){
  var offset = $('.container1').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
    mouseX=mouseX*3;
    mouseY=mouseY*3;
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

$('.container1').click(function(){
    proxyTriggerEvent('click');
});

function proxyTriggerEvent(eventName) {
    $('.container').find('a,input,.buttons span')
    .each(function() { // and loop through them all for testing
        if ( overlaps(follower,this) ) { // collision detection for each item
            $(this).trigger(eventName); // click the specific element
            return false; // break out of the loop
        }
    });
}

Update:

  • Fixed a bug where the selector was not targeting the buttons. I misread the tag as <span class="button1"> but it is really <span title="button1">. The selector is now .buttons span instead of .button1,.button2.
  • Removed the unnecessary filtering of follower with .not('#follower')
  • Moved the hit detection to the click handler of .container - this way it isn't being run on every single interval frame, only when it really counts.
  • Moved the event trigger proxy out of the click call, now any event can be triggered, and it can be called as a regular function, e.g.: proxyTriggerEvent('mouseup'); or proxyTriggerEvent('click');
Community
  • 1
  • 1
zamnuts
  • 9,492
  • 3
  • 39
  • 46
  • sorry this is not worked for me http://jsbin.com/AGAquhej/3/edit i integrated your code and tested in this link.can you check this . is any thing wrong in this code if any thing can you do the modification. – Sarath Babu Nuthimadugu Nov 23 '13 at 09:27
  • this is working fine but small problem this is not pixel perfect and i want to add hover functionality to that.if possible please modify the code – Sarath Babu Nuthimadugu Nov 23 '13 at 10:10
  • @sarath not sure if it is the best way to do it, but here's the updated jsbin: http://jsbin.com/urEpESAM/4/edit also the :hover pseudo class cannot be triggered with javascript (that i know of): http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover – zamnuts Nov 23 '13 at 10:38
  • hi i have small question how to stop direct mouse click i want click only with trigger is any way to do it ?? please tell me – Sarath Babu Nuthimadugu Nov 26 '13 at 04:12
  • @sarath change the anonymous function within the `click()` to a named function and subsequently remove the click binding. Then when you want to "trigger" it, simply call that newly named function. – zamnuts Nov 26 '13 at 04:13
  • my sad i am unable to do that one if you have time can you write the code – Sarath Babu Nuthimadugu Nov 26 '13 at 04:16
  • yesterday i seen your website,blog and your resume . that's very great you worked as a faculty in your own college – Sarath Babu Nuthimadugu Nov 26 '13 at 04:23
  • @sarath, I abstracted the trigger code. Just call `proxyTriggerEvent('click');` wherever you'd like. Also notice, I kept the `.container1` click binding; you may remove it at your discretion. (And thanks for the compliment!) – zamnuts Nov 26 '13 at 04:37
  • Is there a way to do this but with a touch interface, like create a mouse pad in a mobile browser? – dvdcastro May 06 '16 at 00:14
  • @dvdcastro this question and answer is specific to click and hover events for the mouse, if you want it to work with a touch interface, open a new question and link it to this one :) – zamnuts May 10 '16 at 05:14