JQuery custom event handler on element enter

Question

Here is the thing I have 4 box and a circle (just some sample elements) the circle is position absolute and can freely move throw boxes by a trigger.

Now I need to do something on entering the circle into a box .I was wondering if there is any way to define a custom event handler something like "circleenter" instead of "mouseenter"

Here is a JSFiddle

On mouse hover of each box the circle will move to that box and change the color suppose we want to change color of all passed squares too or do something else on squares in path.

Script:

$(document).ready(function(){
    var circle=$(".circle");
    $(".box").mouseenter(function(){
        var $this=$(this),
            idx=$this.index();
        width=$this.width();
        var animate={left:width*idx+18};
        circle.animate(animate,200,function(){
            $this.css("background","#888");
        });
    });
});

CSS:

#box-wrapper{
    position:relative;
    width:400px;
    height:100px;
}
.box{
    width:75px;
    height:75px;
    border:1px solid #000;
    background:#ccc;
    float:left;
    cursor:pointer;
}
.circle{
    position:absolute;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff800;
    left:18px;
    top:18px;     
}

This is just an example so the question is in such a situation can we have something like $(".box").on("circleenter")?

Thanks in advance.

score 2 · Accepted Answer · edited May 23 '17 at 10:31

You can't make the event fire automatically, but you can trigger a custom event using the jQuery trigger method documented here. Example from the docs:

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

From the comments it seems that you would like the event to fire as the circle passes through the squares, regardless of whether the mouse has entered the circle. That being the case I can't see any solution other than using the 'progress' option on the animation, and check whether you have entered a square at each step. You need to watch out for performance problems though...

$(document).ready(function(){
    var circle=$(".circle");

    $('.box').on('circleenter', function(){
        $this.css("background","#888");
    });

    $(".box").mouseenter(function(){
        var $this=$(this),
            idx=$this.index();
        width=$this.width();
        var animate={left:width*idx+18};
        var lastBoxId = null;
        circle.animate(animate,
           {duration: 200, 
            progress: function(){
              //Check whether the circle has entered a box
              var currentBox = //Get the current box;
              if(currentBox && currentBox.id != lastBoxId){
                  $(currentBox).trigger('circleenter');
                  lastBoxId = currentBox.id;
              }
            }});
    });
});

Here are a few SO answers that might help in finding the overlap between the elements:

jQuery/JavaScript collision detection

How to detect overlapping HTML elements

But a google search turns up quite a few more, if they aren't helpful.

So what you are trying to accomplish is replacing the mouseenter handler with something like $('.box').on('circleenter', function(){ $this.css("background","#888");});? — rusmus, Oct 22 '13 at 11:45

score 1 · Answer 2 · answered Oct 22 '13 at 11:28

You can do something like this with the help of .mouseenter() though :-

$(document).ready(function () {
    var circle = $(".circle");
    $(".box").mouseenter(function () {

        // Trigger the custom event
        $(this).trigger("circleenter");
    });

    // Bound the custom event handler
    $(".box").on("circleenter", function () {
        var $this = $(this),
            idx = $this.index();
        width = $this.width();
        var animate = {
            left: width * idx + 18
        };
        circle.animate(animate, 200, function () {
            $this.css("background", "#888");
        });
    });
});

Demo : Fiddle

Suppose at first run we mouse hover the last square the circle will enter all squares to reach the last one but not mouse. That's the problem but thanks it is useful. — codedme, Oct 22 '13 at 11:35

score 1 · Answer 3 · answered Oct 22 '13 at 11:38

1

You can trigger any custom event like this any time you want:

$('.circle').trigger('circleenter');

On page load, make sure the page listens to this event:

$('body').bind('circleenter', function() { 
    //do something;
});

answered Oct 22 '13 at 11:38

user1107799

272
2
13

thanks but what is 'circleenter' ? We have to define it somewhere for being triggered I think its not possible as @rasmus said. – codedme Oct 22 '13 at 11:42
1

the jquery animation function let's you define a callback for each 'step' that has been performed. Maybe you can check conditions in there and see if the 'circleenter' event can be triggered? http://www.bennadel.com/blog/1856-Using-jQuery-s-Animate-Step-Callback-Function-To-Create-Custom-Animations.htm – user1107799 Oct 22 '13 at 11:50
pls don't forget to upvote/mark as answered when you're satisfied – user1107799 Oct 22 '13 at 12:05

JQuery custom event handler on element enter

3 Answers3