├── bower.json ├── readme.md ├── license.txt ├── jquery.hoverdir.min.js └── jquery.hoverdir.js /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.hoverdir", 3 | "version": "1.1.2", 4 | "homepage": "https://github.com/webmandesign/jquery.hoverdir", 5 | "authors": [ 6 | "Oliver Juhas, www.webmandesign.eu", 7 | "Codrops, www.codrops.com" 8 | ], 9 | "description": "Watches the direction of mouse cursor entering and leaving the item, applying the proper directional class on hovered element.", 10 | "keywords": [ 11 | "cursor", 12 | "hover", 13 | "direction", 14 | "animation", 15 | "class" 16 | ], 17 | "license": "MIT", 18 | "main": [ 19 | "./jquery.hoverdir.js", 20 | "./jquery.hoverdir.min.js" 21 | ], 22 | "ignore": [ 23 | "*.json", 24 | "*.md" 25 | ], 26 | "dependencies": { 27 | "jquery": ">=1.10.0" 28 | }, 29 | "devDependencies": {} 30 | } 31 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## jQuery.Hoverdir 2 | 3 | **This is a modified version of [jquery.hoverdir.js](https://github.com/codrops/DirectionAwareHoverEffect) by www.codrops.com (copyright 2012, Codrops, licensed under the MIT license).** 4 | 5 | ## Modifications 6 | 7 | Removed CSS3 transitions and Modernizr requirements. Applied CSS classes instead for better flexibility and controlability via CSS. 8 | 9 | ## Description 10 | 11 | This script watches the direction from where the mouse cursor came hovering the item. In these cases the class of `in-top`, `in-right`, `in-bottom` or `in-left` is added onto the hovered item. 12 | 13 | In case of mouse cursor leaving the item, the class of the leaving direction is applied on the item (`out-top`, `out-right`, `out-bottom` or `out-left`). 14 | 15 | ## Usage 16 | 17 | if ( jQuery().hoverdir ) { 18 | jQuery( '.hoverdir-container .hoverdir-item' ).each( function() { 19 | jQuery( this ).hoverdir(); 20 | } ); 21 | } // /hoverdir 22 | 23 | ## License 24 | 25 | Licensed under the MIT license. 26 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 WebMan - Oliver Juhas, www.webmandesign.eu 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /jquery.hoverdir.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery.Hoverdir 3 | * 4 | * Modified version of https://github.com/codrops/DirectionAwareHoverEffect 5 | * 6 | * Modifications: 7 | * - Removed CSS3 transitions and Modernizr requirements. 8 | * - Applied CSS classes for improved flexibility via CSS. 9 | * 10 | * @copyright 2015 WebMan - Oliver Juhas, www.webmandesign.eu 11 | * 12 | * @link https://github.com/webmandesign/jquery.hoverdir 13 | * 14 | * @version 1.1.2 15 | */ 16 | 17 | /** 18 | * jquery.hoverdir.js v1.1.2 19 | * http://www.codrops.com 20 | * 21 | * Licensed under the MIT license. 22 | * http://www.opensource.org/licenses/mit-license.php 23 | * 24 | * Copyright 2012, Codrops 25 | * http://www.codrops.com 26 | */ 27 | 28 | !function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"undefined"!=typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(b,c){this.$el=a(b),this.options=a.extend(!0,{},this.defaults,c),this.allClasses={from:this.options.fromPrefix+"top "+this.options.fromPrefix+"right "+this.options.fromPrefix+"bottom "+this.options.fromPrefix+"left",to:this.options.toPrefix+"top "+this.options.toPrefix+"right "+this.options.toPrefix+"bottom "+this.options.toPrefix+"left"},this._loadEvents()}b.prototype={defaults:{fromPrefix:"out-",toPrefix:"in-"},constructor:b,_loadEvents:function(){this.$el.on("mouseenter.hoverdir mouseleave.hoverdir",a.proxy(function(a){var b=this.options.fromPrefix,c=this.options.toPrefix,d=this._getDir({x:a.pageX,y:a.pageY}),e=this._getClass(d);"mouseenter"===a.type?this.$el.removeClass(this.allClasses.from).addClass(c+e).siblings().removeClass(this.allClasses.to):this.$el.removeClass(this.allClasses.to).addClass(b+e).siblings().removeClass(this.allClasses.from)},this))},_getDir:function(a){var b=this.$el.width(),c=this.$el.height(),d=(a.x-this.$el.offset().left-b/2)*(b>c?c/b:1),e=(a.y-this.$el.offset().top-c/2)*(c>b?b/c:1),f=Math.round((Math.atan2(e,d)*(180/Math.PI)+180)/90+3)%4;return f},_getClass:function(a){var b;switch(a){case 0:b="top";break;case 1:b="right";break;case 2:b="bottom";break;case 3:b="left"}return b},setOptions:function(b){this.options=a.extend(!0,{},this.defaults,this.options,b)},destroy:function(){this.$el.off("mouseenter.hoverdir mouseleave.hoverdir"),this.$el.data("hoverdir",null)},rebuild:function(a){"object"==typeof a&&this.setOptions(a),this._loadEvents()}},a.fn.hoverdir=function(c,d){return this.each(function(){var e=a(this).data("hoverdir"),f="object"==typeof c&&c;e||(e=new b(this,f),a(this).data("hoverdir",e)),"string"==typeof c&&(e[c](d),"destroy"===c&&a(this).data("hoverdir",!1))})},a.fn.hoverdir.Constructor=b}); 29 | -------------------------------------------------------------------------------- /jquery.hoverdir.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery.Hoverdir 3 | * 4 | * Modified version of https://github.com/codrops/DirectionAwareHoverEffect 5 | * 6 | * Modifications: 7 | * - Removed CSS3 transitions and Modernizr requirements. 8 | * - Applied CSS classes for improved flexibility via CSS. 9 | * 10 | * @copyright 2015 WebMan - Oliver Juhas, www.webmandesign.eu 11 | * 12 | * @link https://github.com/webmandesign/jquery.hoverdir 13 | * 14 | * @version 1.1.2 15 | */ 16 | 17 | /** 18 | * jquery.hoverdir.js v1.1.2 19 | * http://www.codrops.com 20 | * 21 | * Licensed under the MIT license. 22 | * http://www.opensource.org/licenses/mit-license.php 23 | * 24 | * Copyright 2012, Codrops 25 | * http://www.codrops.com 26 | */ 27 | 28 | ( function( factory ) { 29 | 30 | 31 | 32 | 'use strict'; 33 | 34 | 35 | 36 | if ( typeof define === 'function' && define.amd ) { 37 | define( ['jquery'], factory ); 38 | } else if ( typeof exports !== 'undefined' ) { 39 | module.exports = factory( require( 'jquery' ) ); 40 | } else { 41 | factory( jQuery ); 42 | } 43 | 44 | 45 | 46 | } )( function( $ ) { 47 | 48 | 49 | 50 | 'use strict'; 51 | 52 | 53 | 54 | function Hoverdir( element, options ) { 55 | 56 | this.$el = $( element ); 57 | 58 | // Set options 59 | 60 | this.options = $.extend( true, {}, this.defaults, options ); 61 | 62 | // All classes that plugin generates 63 | 64 | this.allClasses = { 65 | from : this.options.fromPrefix + 'top ' + this.options.fromPrefix + 'right ' + this.options.fromPrefix + 'bottom ' + this.options.fromPrefix + 'left', 66 | to : this.options.toPrefix + 'top ' + this.options.toPrefix + 'right ' + this.options.toPrefix + 'bottom ' + this.options.toPrefix + 'left' 67 | }; 68 | 69 | // Load the events 70 | 71 | this._loadEvents(); 72 | 73 | } // /Hoverdir 74 | 75 | 76 | 77 | Hoverdir.prototype = { 78 | 79 | defaults : { 80 | fromPrefix : 'out-', 81 | toPrefix : 'in-' 82 | }, 83 | 84 | constructor : Hoverdir, 85 | 86 | 87 | 88 | _loadEvents : function() { 89 | 90 | this.$el.on( 'mouseenter.hoverdir mouseleave.hoverdir', $.proxy( function( event ) { 91 | 92 | var fromPrefix = this.options.fromPrefix, 93 | toPrefix = this.options.toPrefix, 94 | direction = this._getDir( { x : event.pageX, y : event.pageY } ), 95 | CSSclass = this._getClass( direction ); 96 | 97 | if ( event.type === 'mouseenter' ) { 98 | 99 | this.$el 100 | .removeClass( this.allClasses.from ) 101 | .addClass( toPrefix + CSSclass ) 102 | .siblings() 103 | .removeClass( this.allClasses.to ); 104 | 105 | } else { 106 | 107 | this.$el 108 | .removeClass( this.allClasses.to ) 109 | .addClass( fromPrefix + CSSclass ) 110 | .siblings() 111 | .removeClass( this.allClasses.from ); 112 | 113 | } 114 | 115 | }, this ) ); 116 | 117 | }, 118 | 119 | 120 | 121 | /** 122 | * Get the direction when the event is triggered. 123 | * Credits : http://stackoverflow.com/a/3647634 124 | * 125 | * @param {Object} coordinates 126 | * 127 | * @return {Interger} 128 | */ 129 | _getDir : function( coordinates ) { 130 | 131 | // The width and height of the current div 132 | 133 | var w = this.$el.width(), 134 | h = this.$el.height(), 135 | 136 | // Calculate the x and y to get an angle to the center of the div from that x and y. 137 | // Gets the x value relative to the center of the DIV and "normalize" it 138 | 139 | x = ( coordinates.x - this.$el.offset().left - ( w / 2 ) ) * ( w > h ? ( h / w ) : 1 ), 140 | y = ( coordinates.y - this.$el.offset().top - ( h / 2 ) ) * ( h > w ? ( w / h ) : 1 ), 141 | 142 | // The angle and the direction from where the mouse came in/went out clockwise (TRBL=0123); 143 | // first calculate the angle of the point, 144 | // add 180 deg to get rid of the negative values 145 | // divide by 90 to get the quadrant 146 | // add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left). 147 | 148 | direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90 ) + 3 ) % 4; 149 | 150 | return direction; 151 | 152 | }, 153 | 154 | 155 | 156 | /** 157 | * Return a class based on cursor direction 158 | */ 159 | _getClass : function( direction ) { 160 | 161 | var CSSclass; 162 | 163 | switch( direction ) { 164 | case 0: 165 | CSSclass = 'top'; 166 | break; 167 | case 1: 168 | CSSclass = 'right'; 169 | break; 170 | case 2: 171 | CSSclass = 'bottom'; 172 | break; 173 | case 3: 174 | CSSclass = 'left'; 175 | break; 176 | } 177 | 178 | return CSSclass; 179 | 180 | }, 181 | 182 | 183 | 184 | /** 185 | * Setting options for plugin binding 186 | */ 187 | setOptions : function (options) { 188 | 189 | this.options = $.extend( true, {}, this.defaults, this.options, options ); 190 | 191 | }, 192 | 193 | 194 | 195 | /** 196 | * Unbinds the plugin 197 | */ 198 | destroy : function () { 199 | 200 | this.$el.off( 'mouseenter.hoverdir mouseleave.hoverdir' ); 201 | this.$el.data( 'hoverdir', null ); 202 | 203 | }, 204 | 205 | 206 | 207 | /** 208 | * Bind the plugin 209 | */ 210 | rebuild : function (options) { 211 | 212 | if ( typeof options === 'object' ) { 213 | this.setOptions( options ); 214 | } 215 | 216 | this._loadEvents(); 217 | 218 | } 219 | 220 | }; 221 | 222 | 223 | 224 | $.fn.hoverdir = function( option, parameter ) { 225 | 226 | return this.each( function() { 227 | 228 | var data = $( this ).data( 'hoverdir' ), 229 | options = typeof option === 'object' && option; 230 | 231 | // Initialize hoverdir. 232 | 233 | if ( ! data ) { 234 | data = new Hoverdir( this, options ); 235 | $( this ).data( 'hoverdir', data ); 236 | } 237 | 238 | // Call hoverdir method. 239 | 240 | if ( typeof option === 'string' ) { 241 | data[ option ]( parameter ); 242 | 243 | if ( option === 'destroy' ) { 244 | $( this ).data( 'hoverdir', false ); 245 | } 246 | } 247 | 248 | } ); 249 | 250 | }; 251 | 252 | 253 | 254 | $.fn.hoverdir.Constructor = Hoverdir; 255 | 256 | 257 | 258 | } ); 259 | --------------------------------------------------------------------------------