Hide div if it overlaps another div

Question

I have the main content in the center of the page at about 900px. on the big screen there is enough space between the right edge of my content and the right side of the browser window, in which I can display a small square of 100x100 pixels in the lower right corner, and it looks good, because between this div and the main content. When the screen size is smaller than the div, which is relatively positioned, it overlaps with the lower right corner of my content. How can I set display = none of a div if it is included in 20px of my content? Thanks

Answer 1

I would choose a clean CSS solution. Sounds like the perfect case for media queries:

#rightdiv {
    position: relative;
    width: 100px;
    height: 100px;
}

@media screen and (max-width: 1000px) {
    #rightdiv {
        display: none;
    }
}

Only an element will be displayed in CSS #rightdivif the size of the browser window is at least 1000 pixels wide. If it gets smaller, it applies the property display: none.

Example : http://jsfiddle.net/7CCtH/

Answer 2

As for media queries that are not familiar with IE, I offer you this solution for your problem :

Demo

code used:

function hideSmall(){
    var smallW = $('#small').outerWidth(true);
    var winW = $(window).width();
    var mainW = $('#main').outerWidth(true);
    var calculateW = (winW-mainW)/2;

    if ( calculateW <= smallW ){
         $('#small').hide();   
    }
    else{
         $('#small').show();
    }
}
hideSmall();

$(window).resize(function(){
   hideSmall();
});

or IT