Get Hover Direction with MooTools

  • Avinash
  • 0
  • Jun 14, 2012
  • Tutorial

Here is the quick MooTools tip to get the Hover direction. Here Hover direction refers to the side from where you have hovered that element.

First of all I would like to thanks Caspar, for this logic at here. I have modified this script to make it work with MooTools. That script was compatible with jQuery so as a MooTools Fan I love to create any effects in MooTools and here I have done the same.

Have a look at below code block, in this I have used Event delegation in MooTools. So in this way I can have event binded to multiple elements and elements which will added later using AJAX.

HTML Code

Hover Me
Hover Me
Hover Me
<div class="hero-unit holder" id="hero_unit">
 <div class="hover_div">
  Hover Me
 </div>
 <div class="hover_div">
  Hover Me
 </div>
 <div class="hover_div">
  Hover Me
 </div>
</div>

JavaScript Code

window.addEvent('domready', function(){ var obj = document.id('hero_unit'); obj.addEvent('mouseover:relay(div)', function(event){ // Get Height and Width of the Current Div var w = this.getCoordinates().width; var h = this.getCoordinates().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 positions = this.getPosition(); //alert(positions[0]); var x = (event.page.x - positions.x - (w/2)) * ( w > h ? (h/w) : 1 ); var y = (event.page.y - positions.y - (h/2)) * ( h > w ? (w/h) : 1 ); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4; switch(direction) { case 0: this.innerHTML = 'From Top'; break; case 1: this.innerHTML = 'From RIGHT'; break; case 2: this.innerHTML = 'From BOTTOM'; break; case 3: this.innerHTML = 'From LEFT'; break; } }); });
window.addEvent('domready', function(){
   
    var obj = document.id('hero_unit');
   
    obj.addEvent('mouseover:relay(div)', function(event){
        // Get Height and Width of the Current Div
        var w = this.getCoordinates().width;
        var h = this.getCoordinates().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 positions = this.getPosition();
       
            //alert(positions[0]);
        var x = (event.page.x - positions.x - (w/2)) * ( w > h ? (h/w) : 1 );
        var y = (event.page.y - positions.y  - (h/2)) * ( h > w ? (w/h) : 1 );
       
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;
       
        switch(direction) {
         case 0:
          this.innerHTML = 'From Top';
         break;
         case 1:
          this.innerHTML = 'From RIGHT';
         break;
         case 2:
          this.innerHTML = 'From BOTTOM';
         break;
         case 3:
          this.innerHTML = 'From LEFT';
         break;
        }
       
    });
   
});

Now its time to see some code in action, follow the article for the link to live demo page.

Demo

Get Hover Direction with MooTools

If you like this demo, please consider sharing this with your friends. And yes subscribe to our rss feed, like us on facebook and follow us on twitter to get latest updates from us.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: