CODEWITHSUNDEEP
javascriptcsshtmlhideoverlap
user852974
user852974

Reputation: 2282

How to hide a div if it overlaps another div

Is this CSS or javascript? I just need the div to change to display:none if it comes within say 20px of another div. Thanks

Upvotes: 3

Views: 5656

Answers (3)

user230451
user230451

Reputation: 76

Try this https://github.com/brandonaaron/jquery-overlaps

//Listen to the event that will be triggered on window resize:
window.onresize = function(event) 
{
    // test if one element overlaps another
    if($('#div1').overlaps('#div2'))
    {
        //Do stuff, like hide one of the overlapping divs
        $('#div1').hide();
    }
}

Upvotes: 1

kasper Taeymans
kasper Taeymans

Reputation: 7026

You can add an event handler that gets fired when the window is resized. You could do this with javascript or jquery. jquery makes it easy:

window.onresize = function(event) {
var h=$(window).height();
var w=$(window).width();

if(h<400 && w < 300){
 //hide divs
 $('#yourdivid1').hide();
}


}

Hope this helps

Upvotes: 0

Michael Jasper
Michael Jasper

Reputation: 8058

Based on your comment:

Yes it is so that if the user makes their browser window small my site does not look crowded

Instead of answering the question you asked, Here's an answer to the question you didn't ask:

How to resize/position/cssify page elements based on browser size?

There is a new-ish application of css and javascript called Responsive Web Design. Responsive Design allows you to specify different css rules to apply based on different elements. For a great example of this technique, resize your browser around on The Boston Globe's website. They just integrated this technique sometime this week.

Here's an example of the css that would implement this:

@media screen and (min-width: 480px) {

  .content {
    float: left;
  }

  .social_icons {
    display: none
  }

  // and so on...

}

example from http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Here is a boilerplate to get you going.

Upvotes: 0

Related Questions