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.

Community · Accepted Answer · 2017-05-23 10:31:46Z

2

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.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Oct 22, 2013 at 11:28

rusmus

1,66511 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codedme Over a year ago

Yes I was looking for a way to define a trigger for it :(

rusmus Over a year ago

So what you are trying to accomplish is replacing the mouseenter handler with something like $('.box').on('circleenter', function(){ $this.css("background","#888");});?

palaѕн · Accepted Answer · 2013-10-22 11:28:21Z

1

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

answered Oct 22, 2013 at 11:28

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

1 Comment

codedme Over a year ago

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.

user1107799 · Accepted Answer · 2013-10-22 11:38:13Z

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, 2013 at 11:38

user1107799

2732 silver badges13 bronze badges

3 Comments

codedme Over a year ago

thanks but what is 'circleenter' ? We have to define it somewhere for being triggered I think its not possible as @rasmus said.

user1107799 Over a year ago

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? bennadel.com/blog/…

user1107799 Over a year ago

pls don't forget to upvote/mark as answered when you're satisfied

Collectives™ on Stack Overflow

JQuery custom event handler on element enter

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related