如果它与另一个div重叠，如何隐藏div

Question

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

Answer 1

I would try using jquery to check the distance between objects. Look at this post

Get relative position between 2 DOM elements using JavaScript

Answer 2

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();
    }
}

Answer 3

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

Answer 4

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.