├── LICENSE ├── README.md ├── example └── multiple-selector.html ├── jquery.overlap.js ├── jquery.overlap.json └── jquery.overlap.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Leandro Brunner 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jquery-overlap 2 | 3 | A jQuery plugin for detection of overlaps and selections by superposition. 4 | 5 | ![](https://cloud.githubusercontent.com/assets/1664991/6198552/85272e94-b3e7-11e4-8e2d-ca097db8a2cd.gif) 6 | 7 | ## How to use 8 | 9 | ```JavaScript 10 | $(selector).overlap({ 11 | rect: {x:0, y:0, w:0, h:0}, // Area to select the elements. 12 | element: false, // Element of where get automatically "rect". ($("selector") or "selector"). 13 | mark: ".class", // Class to add at elements overlapped. 14 | unmark: true, // Unmark if not overlapped (in new executions) 15 | filterMark: function(index) {return true}, // Filter elements to mark ($.filter) 16 | filterUnmark: function(index) {return true}, // Filter element to unmark ($.filter) 17 | callback: function($elements) {}, // Function to execute at end. 18 | w: function($element) {return $element.outerWidth(true)}, // Function for get the width of the elements. 19 | h: function($element) {return $element.outerHeight(true)}, // Function for get the height of the elements. 20 | position: function($element) {return $element.position()}, // Function for get the position of the elements. 21 | bring: true // get the element selected. 22 | }); 23 | ``` 24 | 25 | ### Examples 26 | 27 | ```Javascript 28 | var divs_in_the_area = $("div").overlap({ 29 | rect: {x: 120, y: 100, w: 500, h: 300} 30 | }); 31 | ``` 32 | 33 | ```Javascript 34 | var divs_superposing_other_div = $("div").overlap({ 35 | element: $("div.other_div") // If are multiple elements is selected the first. 36 | }); 37 | ``` 38 | 39 | ```Javascript 40 | var divs_superposing_other_div = $("div").overlap({ 41 | element: $("div.other_div"), // If are multiple elements is selected the first. 42 | position: function($element) {return $element.offset()} // Get the position with "$.offset". 43 | }); 44 | ``` 45 | 46 | ## Practical use 47 | 48 | Mutiple selector: [Demo online](http://rawgit.com/leandrobrunner/jquery-overlap/master/example/multiple-selector.html) 49 | 50 | ## License 51 | 52 | jquery-overlap is licensed under the MIT License (LICENSE). 53 | 54 | Copyright (c) 2015 [Leandro Brunner](mailto:leandrobrunner@yahoo.com.ar) 55 | -------------------------------------------------------------------------------- /example/multiple-selector.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | multiple-selector: Demo of jquery-overlap. 6 | 7 | 8 | 38 | 128 | 129 | 130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | 149 | 150 | -------------------------------------------------------------------------------- /jquery.overlap.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Overlap Plugin 0.2 3 | * https://github.com/leandrobrunner/jQuery-Overlap 4 | * 5 | * Copyright (c), Leandro Brunner 6 | * leandrobrunner@yahoo.com.ar 7 | * 8 | * Licensed under the MIT license: 9 | * http://www.opensource.org/licenses/MIT 10 | */ 11 | 12 | (function($) { 13 | $.fn.overlap = function(args) { 14 | args = $.extend({ 15 | rect: {x:0, y:0, w:0, h:0}, 16 | element: false, 17 | mark: false, 18 | unmark: true, 19 | filterMark: function(index) {return true}, 20 | filterUnmark: function(index) {return true}, 21 | callback: function($elements) {}, 22 | w: function($element) {return $element.outerWidth(true)}, 23 | h: function($element) {return $element.outerHeight(true)}, 24 | position: function($element) {return $element.position()}, 25 | bring: true 26 | }, args); 27 | Object.prototype.overlap = function(rect) { 28 | return( 29 | (rect.x <= this.x + this.w && rect.x + rect.w >= this.x) && 30 | (rect.y <= this.y + this.h && rect.y + rect.h >= this.y) 31 | ); 32 | }; 33 | if(args.element!=false) { 34 | if(typeof(args.element)=="string") { 35 | args.element=$(args.element); 36 | } 37 | args.element=args.element.first(); 38 | var pos = args.position(args.element); 39 | args.rect={ 40 | x: pos.left, 41 | y: pos.top, 42 | w: args.w(args.element), 43 | h: args.h(args.element) 44 | }; 45 | } 46 | var $selects = this.filter(function(index) { 47 | var pos = args.position($(this)); 48 | if( 49 | args.rect.overlap({ 50 | x: pos.left, 51 | y: pos.top, 52 | w: args.w($(this)), 53 | h: args.h($(this)) 54 | }) 55 | ) { 56 | return true; 57 | } 58 | }); 59 | if(typeof(args.mark) == "string") { 60 | if(args.unmark) { 61 | this.filter(args.filterUnmark).removeClass(args.mark); 62 | } 63 | $selects.filter(args.filterMark).addClass(args.mark); 64 | args.callback($selects); 65 | } 66 | if(args.bring) { 67 | return($selects); 68 | } else { 69 | return(this); 70 | } 71 | }; 72 | }(jQuery)); 73 | -------------------------------------------------------------------------------- /jquery.overlap.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "overlap", 3 | "title": "jQuery Overlap", 4 | "description": "A jQuery plugin for detection of overlaps and selections by superposition.", 5 | "keywords": [ 6 | "overlap", 7 | "selections", 8 | "collisions", 9 | "filter", 10 | "overlapping", 11 | "superposition" 12 | ], 13 | "version": "0.2", 14 | "author": { 15 | "name": "Leandro Brunner", 16 | "email": "leandrobrunner@yahoo.com.ar" 17 | }, 18 | "licenses": [{ 19 | "type": "MIT", 20 | "url": "https://github.com/leandrobrunner/jquery-overlap/raw/master/LICENSE" 21 | }], 22 | "bugs": "https://github.com/leandrobrunner/jquery-overlap/issues", 23 | "homepage": "https://github.com/leandrobrunner/jquery-overlap", 24 | "download": "https://github.com/leandrobrunner/jquery-overlap/tags", 25 | "dependencies": { 26 | "jquery": ">=1.4" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /jquery.overlap.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Overlap Plugin 0.2 3 | * https://github.com/leandrobrunner/jQuery-Overlap 4 | * 5 | * Copyright (c), Leandro Brunner 6 | * leandrobrunner@yahoo.com.ar 7 | * 8 | * Licensed under the MIT license: 9 | * http://www.opensource.org/licenses/MIT 10 | */ 11 | (function($){$.fn.overlap=function(c){c=$.extend({rect:{x:0,y:0,w:0,h:0},element:false,mark:false,unmark:true,filterMark:function(a){return true},filterUnmark:function(a){return true},callback:function(a){},w:function(a){return a.outerWidth(true)},h:function(a){return a.outerHeight(true)},position:function(a){return a.position()},bring:true},c);Object.prototype.overlap=function(a){return((a.x<=this.x+this.w&&a.x+a.w>=this.x)&&(a.y<=this.y+this.h&&a.y+a.h>=this.y))};if(c.element!=false){if(typeof(c.element)=="string"){c.element=$(c.element)}c.element=c.element.first();var d=c.position(c.element);c.rect={x:d.left,y:d.top,w:c.w(c.element),h:c.h(c.element)}}var e=this.filter(function(a){var b=c.position($(this));if(c.rect.overlap({x:b.left,y:b.top,w:c.w($(this)),h:c.h($(this))})){return true}});if(typeof(c.mark)=="string"){if(c.unmark){this.filter(c.filterUnmark).removeClass(c.mark)}e.filter(c.filterMark).addClass(c.mark);c.callback(e)}if(c.bring){return(e)}else{return(this)}}}(jQuery)); 12 | --------------------------------------------------------------------------------