Side navigation
#1335 closed enhancement (wontfix)
Opened June 29, 2007 09:11PM UTC
Closed March 31, 2008 02:17AM UTC
Last modified March 15, 2012 04:44PM UTC
jQuery.fn.overlap, check overlap and apply callback (requires Interface jQuery.iUtil)
| Reported by: | artistan | Owned by: | stefan |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.1.3 |
| Component: | interface | Version: | 1.1.2 |
| Keywords: | overlap | Cc: | |
| Blocked by: | Blocking: |
Description
this is an overlap checker that allows you to apply a function ('callback') to an element IF it overlaps anything matched by the 'check' setting (requires Interface jQuery.iUtil)
I am currently using it to fade out a banner ad on the top right portion of my pages if the banner ad is overlapping certain elements on the page.
// jQuery function
(function() {
jQuery.fn.overlap = function(settings){
var oElements = this; // the elements that may be overlapping another element
// define default options and override with settings by extending.
settings = jQuery.extend({
check: 'body',
callback: remove
},settings);
// loop
return oElements.each(function(){
// current element
var oElement = this;
var overlaping = false;
var checkThese = jQuery(settings.check);
// get main (1st) box data
var b1 = jQuery.extend(jQuery.iUtil.getSize(this),jQuery.iUtil.getPosition(this));
checkThese.each(function(){
// only need to check while no overlaping found
if(!overlaping){
// get this (2nd) box data
var b2 = jQuery.extend(jQuery.iUtil.getSize(this),jQuery.iUtil.getPosition(this));
//check overlap
if (
$(this).css('display')!="none" && oElement.id != this.id &&
(
(b1.y<b2.y && b1.y+b1.h>b2.y) || (b1.y<b2.y+b2.h && b1.y+b1.h>b2.y)
) && (
(b1.x<b2.x && b1.x+b1.w>b2.x) || (b1.x<b2.x+b2.w && b1.x+b1.w>b2.x)
)
){
overlaping = true;
//alert(b2.y + '-' + b2.x + '-' + b2.h + '-' + b2.w);
//$(this).css({ postion:"absolute",top:"1px",left:"1px",color: "red", background: "blue" });
}
}
});
if(overlaping){
settings.callback(oElement);
//alert('overlap');
}
});
}
})(jQuery);
remove = function (oElement){
setTimeout(function(){if($(oElement).css('display')!='none'){$(oElement).fadeOut('slow');}},10000);
}
$(function(){
// check if overlapping another cell
$("#side_ad_1").overlap({check:'body > div, table > tbody',callback:remove});
});
Attachments (0)
Change History (1)
Changed March 31, 2008 02:17AM UTC by comment:1
| resolution: | → wontfix |
|---|---|
| status: | new → closed |
Interface is no longer supported; consider switching to jQuery UI.