Skip to main content

Bug Tracker

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 scott.gonzal comment:1

resolution: → wontfix
status: newclosed

Interface is no longer supported; consider switching to jQuery UI.