Comment peut-on éviter bascule JQuery () sur une div de mise en page de provoquer votre mise en page se déplacer?

StackOverflow https://stackoverflow.com/questions/1093990

  •  11-09-2019
  •  | 
  •  

Question

J'ai une fonction JQuery qui permet de basculer l'un des divs dans ma mise en page. Le problème est que la mise en page tout se déplace sur l'écran lorsque la div apparaît ou disparaît. Est-il possible d'obtenir le même effet afficher / cacher sans modifier la mise en page? 

<script>
  $(document).ready(function(){
    $("button").click(function () {
      $("#layoutDiv").toggle();
    });
  });
</script>
Était-ce utile?

La solution

Vous pouvez envelopper div que dans un autre div qui maintient la bonne largeur / hauteur pour maintenir la mise en page cohérente. 

<div style="width:300px;height:200px">
  <div class="animateMe">
    <p>When I close, the outer div will still be there.</p>
  </div>
</div>

Si vous ne connaissez pas la hauteur / largeur avant la main, vous pouvez définir ce programme avec javascript lorsque les chargement de la page. Procurez-vous le .width () et .height () valeurs de la div pliable et les appliquer à la css de la div externe.

Autres conseils

Essayez d'écrire une nouvelle fonction qui utilise visibility: hidden au lieu de display: none. Cela maintiendra la boîte CSS (et la mise en page) sans montrer la div.

La réponse de Jonathan Sampson travaillera - alternativement sans savoir ce que vous faites exactement (le balisage et l'effet recherché) j'utiliser le positionnement absolu avec un z-index élevé, ce qui prendra hors du flux de documents. C'est ce que les fenêtres modales / visionneuses utilisent généralement. Voici un tutoriel .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top