CODEWITHSUNDEEP
javascriptjquerycsshtmlpositioning
user852974
user852974

Reputation: 2282

Hide a div if it overlaps another div

I have my main content in the center of the page about 900px wide. on a large screen there is enough space between the right margin of my content and the right side of the browser window that I can display a small 100x100px div in the bottom right corner and it looks good because there is no overlap between that div and the main content. When the screen size is less that div which is relatively positioned overlaps with the bottom right corner of my content. How can I set the display=none of the div if it comes within 20px of my content? Thanks

Upvotes: 5

Views: 2463

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

As for media queries are not familiar with IE I suggest you kindly 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 like THIS

Upvotes: 0

jAndy
jAndy

Reputation: 235962

I'd go for a pure CSS solution here. Sounds like a perfect case for media queries:

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

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

That CSS will only display the #rightdiv element when the browser window size has at least 1000px width. If it gets smaller, it applies the display: none property.

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

Upvotes: 10

Related Questions