Geek Answers Handbook

Moving through a set of elements in the Raphaels

I have a set containing only a rectangle.

var hoverTrigger = this.paper.set(); var outline = this.paper.rect(); outline.attr({ ... hoverTrigger.push(outline) this.sprite.push(hoverTrigger);

When you hover, it is assumed that the rectangle will expand, and some links will be added to it, and when you turn off the mouse, the links will disappear and the rectangle will again become small.

 hoverTrigger.hover(function () { var link = this.paper.text(); hoverTrigger.push(link); outline.animate({ ... }, function() { link.remove(); outline.animate({ ... });

However, it seems that the hover function is applied to each element in the set separately, and not to the entire set, because when you click on the link above the link, the hover function works and the link disappears. Sometimes a box is hovering and hanging events quickly and sequentially.

Is there a way to apply hovering to a lot of things, so that mousing between two things in a set doesn't cause hovering?

+4
source share
4 answers

Recently, I came across this restriction, I decided to write a small extension to Raphael called hoverInBounds , which resolves it.

Simply, as soon as the mouse enters the element, we track when it really goes beyond its borders - then performing the function of hovering, and not earlier.

Demo: http://jsfiddle.net/amustill/Bh276/1

 Raphael.el.hoverInBounds = function(inFunc, outFunc) { var inBounds = false; // Mouseover function. Only execute if `inBounds` is false. this.mouseover(function() { if (!inBounds) { inBounds = true; inFunc.call(this); } }); // Mouseout function this.mouseout(function(e) { var x = e.offsetX || e.clientX, y = e.offsetY || e.clientY; // Return `false` if we're still inside the element bounds if (this.isPointInside(x, y)) return false; inBounds = false; outFunc.call(this); }); return this; }

Place the above code block before creating your paper Raphael object.

+5
source

I hit this problem before. I found 2 solutions.

Create a rectangle above other elements with opacity set to 0

 var paper = new Raphael( 0, 0, 100, 100 ); var rect = paper.rect( 0, 0, 100, 100 ).attr({ opacity: 0 }); rect.hover( func_in, func_out );

This only works for items that have 1 common action, such as a click.

Another option is to cancel the hover function when hovering over a set of elements.

 var funcOutTimer; set.hover( function( ) { if( funcOutTimer ) { // Hovered into this element in less than 100 milliseconds => cancel window.clearTimeout( funcOutTimer); } else { // do stuff } }, function( ) { funcOutTimer = setTimeout( function( ) { // do stuff }, 100 ); // wait for 100 milliseconds before executing hover out function });

In principle, the hover function is only performed the first time you enter a set of elements for the first time, and the shutter release function will only be executed once, when, finally, the element you are entering is not part of this set.

+3
source

I found that this works with the following

 myCircleElement.hover ( function(e) { myTextElement.animate({opacity:1}, 800); }, function(e) { var x = e.layerX || ex, y = e.layerY || ey; // Return `false` if we're still inside the element bounds if (this.isPointInside(x, y)) return false; // otherwise do something here.. eg below myTextElement.animate({opacity:0}, 800); // } );
0
source

The Bruno method contains this minor issue:

If you create a rectangle over other elements, if other elements are text, then these texts cannot be selected on the web page. But it does work.

By the way, the attribute "opacity": 0 is not enough, I had to add the attribute "fill": "white" in my case.

You need to bring the object to the forefront as follows: obj.toFront (); obj is a raphael form similar to "rect", etc.

I tested it on the mouseover and mouseout event and it works.

Check out my fiddle here: fiddle reference

 function withArray(x,y){ var rect = paper.rect(x, y, 100, 60).attr({ fill: "green" }); rect.text = paper.text(x+(100/2), y + 30, 'rect w/array').attr({ 'font-size': 12, "fill": "white" }); var rectover = paper.rect(x,y,100,60).attr({ fill: "white", opacity: 0 }); var myArray = paper.set(); myArray.push(rect, rect.text, rectover); myArray.mouseover(function() { var anim = Raphael.animation({ transform: ['S', 1.5, 1.5, (rect.attr("x")), (rect.attr("y"))] }, 100, "backOut", function() { }); myArray.animate(anim); }).mouseout(function() { var anim = Raphael.animation({ transform: [""] }, 50, "backOut", function() { }); myArray.stop().animate(anim); }); }
0
source

More articles:


All Articles