StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Perhaps you shoud consider not to use the divs as "hotspots" but use some Math and Javascript to find the point where the mouse enters and leaves a div. This avoids overlapping/gaps problems. The code below basicaly divides a div in 4 triangled zones. Each zone returns a number when the mouse moves over it. The code needs some finetuning, and you have to decide for yourself where to bind and unbind the events. But I think it takes away most of your flickering problems.</p> <pre><code>$(".overlayLink").bind("mouseenter mouseleave",function(e){ /** the width and height of the current div **/ var w = $(this).width(); var h = $(this).height(); /** calculate the x and y to get an angle to the center of the div from that x and y. **/ /** gets the x value relative to the center of the DIV and "normalize" it **/ var x = (e.pageX - this.offset().left - (w/2)) * ( w > h ? (h/w) : 1 ); var y = (e.pageY - this.offset().top - (h/2)) * ( h > w ? (w/h) : 1 ); /** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/ /** first calculate the angle of the point, add 180 deg to get rid of the negative values divide by 90 to get the quadrant add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/ var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4; /** do your animations here **/ switch(direction) { case 0: /** animations from the TOP **/ break; case 1: /** animations from the RIGHT **/ break; case 2: /** animations from the BOTTOM **/ break; case 3: /** animations from the LEFT **/ break; }}); </code></pre> <p>of course the short notation to get the direction should be:</p> <pre><code>var direction = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4 </code></pre> <p>where 1.57... is Math.PI / 2 This is much more efiicient bit harder for me to explain since it skips the degrees conversion. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload