Comment cacher une div si elle chevauche une autre div

Question

Est-ce CSS ou javascript? J'ai juste besoin de la div pour changer pour afficher: none si elle vient à dire 20px d'un autre div. Merci

Answer 1

J'essaierais d'utiliser jquery pour vérifier la distance entre les objets. Regardez ce poste

Get relative position between 2 DOM elements using JavaScript

Answer 2

Vous pouvez ajouter un gestionnaire d'événements qui est déclenché lorsque la fenêtre est redimensionnée. Vous pouvez le faire avec javascript ou jquery. jquery rend facile:

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 3

Sur la base de votre commentaire:

Oui, il est donc que si l'utilisateur fait la fenêtre de leur navigateur petit mon site ne regarde pas trop de monde

au lieu de répondre à la question que vous avez posée, voici un answe r à la question que vous n'a pas demandé:

Comment redimensionner/position/éléments de page cssify basés sur la taille du navigateur?

Il existe une nouvelle application de css et javascript appelée Responsive Web Design. Responsive Design vous permet de spécifier différentes règles CSS à appliquer en fonction de différents éléments. Pour un bon exemple de cette technique, redimensionnez votre navigateur sur le site Web de The Boston Globe. Ils ont juste intégré cette technique cette semaine.

Voici un exemple de css qui mettrait en œuvre ceci:

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

    .content { 
    float: left; 
    } 

    .social_icons { 
    display: none 
    } 

    // and so on... 

} 

exemple de http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Voici un boilerplate pour vous aller.

Answer 4

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