Get new jQuery plugins just once a week

×

jquery-overlap

February 16, 2015

Overlap | A jQuery plugin to detect overlaps by superposition.

overlap is a jQuery plugin for detection of overlaps and selections by superposition.

Created by Leandro Brunner

Download

Example

jQuery-overlap

Overlapping featured

jquery-overlap

A jQuery plugin for detection of overlaps and selections by superposition.

How to use

$(selector).overlap({
    rect: {x:0, y:0, w:0, h:0}, // Area to select the elements.
    element: false, // Element of where get automatically "rect". ($("selector") or "selector").
    mark: ".class", // Class to add at elements overlapped.
    unmark: true, // Unmark if not overlapped (in new executions)
    filterMark: function(index) {return true}, // Filter elements to mark ($.filter)
    filterUnmark: function(index) {return true}, // Filter element to unmark ($.filter)
    callback: function($elements) {}, // Function to execute at end.
    w: function($element) {return $element.outerWidth(true)}, // Function for get the width of the elements.
    h: function($element) {return $element.outerHeight(true)}, // Function for get the height of the elements.
    position: function($element) {return $element.position()}, // Function for get the position of the elements.
    bring: true // get the element selected.
});

Examples

var divs_in_the_area = $("div").overlap({
    rect: {x: 120, y: 100, w: 500, h: 300}
});
var divs_superposing_other_div = $("div").overlap({
    element: $("div.other_div") // If are multiple elements is selected the first.
});
var divs_superposing_other_div = $("div").overlap({
    element: $("div.other_div"), // If are multiple elements is selected the first.
    position: function($element) {return $element.offset()} // Get the position with "$.offset".
});

Practical use

Mutiple selector: Demo online

License

jquery-overlap is licensed under the MIT License (LICENSE).

Copyright (c) 2015 Leandro Brunner

jquery-overlap

Related posts:

Sortable
FakeCrop
Salvattore
jQuery-overlap

http://jquer.in/wp-content/uploads/2015/02/jQuery-overlap.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever